1. What it is,
why it matters +
what makes it good or bad.
User Experience
Geoff Mackey + Greg Harron
UX

2. What is
centerline.net
UX ?
The sum of a person’s emotions
and behaviors when interacting
with a product, system, or service.
User Experience
(ˈjuːzər ɪkˈspɪriːəns), noun:

3. UX is used at theme parks, casinos,
office spaces, grocery stores, etc.
UX isn’t about designing the experience – that’s the
product of the interaction with what you design.
At its core, UX is about simplicity. It’s finding what
the audience needs to know and how they behave.
Confined to the web
The user interface
Rocket Science
centerline.net
is notUX

4. ≈
What does a professional do?
centerline.net
Throughout the project, there’s continuous
competitive, product and user research.RESEARCH
INFORMATION
ARCHITECTURE
INTERACTION
DESIGN
We figure out how everything should be organized in
order to set up an architecture for that experience.
This requires prioritizing and creating a hierarchy of
all necessary design elements.
UX

5. centerline.net
Reduces re-work (wasted development time)
Increases sales, credibility, user retention
People matter, so their experience matters
Why does matter?UX

6. centerline.net
Good UX vs. Bad UX
Examples

7. centerline.net

8. BadGoodBad
centerline.net

9. BadGoodBad
Too many options presented
in a non-scannable format
Options consolidated into
one, familiar interaction
centerline.net

10. centerline.net

11. BadGood
centerline.net

12. BadGood
• Questions are used to segment the form,
unnecessarily.
• Includes inputs that aren’t required
until after a search has been initiated.
• No opportunities to consolidate form
fields have been made.
• Only the most relevant and necessary
inputs are presented to the user in a
compact, easy to understand way.
• Adjusting search result formats and
other search options are presented only
after the search has been initiated.
centerline.net

13. centerline.net

14. GoodBad
centerline.net

15. GoodBad
• Price and product rating info are clearly
visible and directly associated with the
primary call to action, "add to cart.”
• Interface is uncluttered and allows the
content to dominate the screen.
• The buttons are appropriately spaced to avoid
accidental finger taps.
• Price and product rating info are not prominent
enough.
• Buttons are too close together for mobile. It’s
easy to press wrong button.
• The tab bar decreases the viewing area for
product information.
centerline.net

16. centerline.net

17. GoodBad
centerline.net

18. GoodBad
• There is only one primary goal for each
page.
• Pages are concise and contain one
primary call to action.
• Content is organized in a more logical,
scannable format.
• The content of the page is extremely long
and covers a diverse set of page goals.
• There is no clear call to action or direction
for the reader to follow.
• There are calls to action scattered
throughout the page.
centerline.net

19. *The Experience Score Rubric is available for
download here.
centerline.net
The Experience Score
How well you’re delivering the information you’re
trying to communicate.CLARITY
FLOW
RELEVANCE
A logical progression to follow.
Consider where the audience is in their journey.
UTILITY The functionality of the interface.
TRUSTWORTHINESS The visual aesthetic, organization and hierarchy of
things need to be perfected.

20. If you don’t talk to your customers,
how will you know how to talk to
your customers?
- Will Evans, Semantic Foundry
“
”
centerline.net

21.
Why are we presenting information in a certain way?
Upfront research helps you understand who you’re talking to, their
behavior, their goals.
Then we can understand why we’re emphasizing this information
and why we’re designing it this way.
Finding the why
centerline.net

22. centerline.net
UX Project Timeline
UX Outputs
UX Research
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine

23. Discovery
Phase
centerline.net

24. UX Outputs
UX Research
centerline.net
UX Project Timeline
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine
Stakeholder Interviews, Contextual
Inquiry, Analytics, Usability Testing
Personas, Journey Maps, Baseline Metrics

25. Content Strategy
Phase
centerline.net

26. UX Outputs
UX Research
centerline.net
UX Project Timeline
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine
Content Audit
Audit Analysis Spreadsheet,
Gap Analysis, Content Strategy

27. Information
Architecture
Phase
centerline.net

28. UX Outputs
UX Research
centerline.net
UX Project Timeline
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine
Card sorting, tree testing
Site Mapping, Flow Diagrams,
Wireframes, Storyboards

29. Visual Design,
Interaction Design,
and Development
Phase
centerline.net

30. UX Outputs
UX Research
centerline.net
UX Project Timeline
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine
Prototype Testing, Heuristics Evaluation
Lo-Fidelity Prototypes, Hi-Fidelity Prototypes

31. Testing and
Refining Phase
centerline.net

32. UX Outputs
UX Research
centerline.net
UX Project Timeline
Discovery
Content
Strategy
Information
Architecture
Design and
Development
Test and
Refine
Analytics, Usability Testing,
A/B Testing, Surveys
Data to compare to Baseline,
Metrics to inform opportunities
for improvements

33. centerline.net

34. Geoff Mackey, UX Designer @geoffmackey
Greg Harron, UX Strategist @gregharron
@centerline | centerline.net
Thank you!