What it is, why it matters + what makes it good or bad.

User Experience

Geoff Mackey + Greg Harron

UX

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:

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

≈

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

centerline.net

Reduces re-work (wasted development time)

Increases sales, credibility, user retention

People matter, so their experience matters

Why does matter?UX

centerline.net

Good UX vs. Bad UXExamples

centerline.net

BadGoodBad

centerline.net

BadGoodBad

Too many options presented in a non-scannable format

Options consolidated into one, familiar interaction

centerline.net

centerline.net

BadGood

centerline.net

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

centerline.net

GoodBad

centerline.net

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

centerline.net

GoodBad

centerline.net

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

*The Experience Score Rubric is available for download here.

centerline.net

The Experience ScoreHow 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.

If you don’t talk to your customers, how will you know how to talk to your customers?

- Will Evans, Semantic Foundry

“”

centerline.net

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

centerline.net

UX Project Timeline

UX Outputs

UX Research

DiscoveryContent Strategy

Information Architecture

Design and Development

Test and Refine

Discovery Phase

centerline.net

UX Outputs

UX Research

centerline.net

UX Project Timeline

DiscoveryContent Strategy

Information Architecture

Design and Development

Test and Refine

Stakeholder Interviews, Contextual Inquiry, Analytics, Usability Testing

Personas, Journey Maps, Baseline Metrics

Content Strategy Phase

centerline.net

UX Outputs

UX Research

centerline.net

UX Project Timeline

DiscoveryContent Strategy

Information Architecture

Design and Development

Test and Refine

Content Audit

Audit Analysis Spreadsheet,Gap Analysis, Content Strategy

Information Architecture Phase

centerline.net

UX Outputs

UX Research

centerline.net

UX Project Timeline

DiscoveryContent Strategy

Information Architecture

Design and Development

Test and Refine

Card sorting, tree testing

Site Mapping, Flow Diagrams, Wireframes, Storyboards

Visual Design, Interaction Design, and Development Phase

centerline.net

UX Outputs

UX Research

centerline.net

UX Project Timeline

DiscoveryContent Strategy

Information Architecture

Design and Development

Test and Refine

Prototype Testing, Heuristics Evaluation

Lo-Fidelity Prototypes, Hi-Fidelity Prototypes

Testing and Refining Phase

centerline.net

UX Outputs

UX Research

centerline.net

UX Project Timeline

DiscoveryContent 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

centerline.net

Geoff Mackey, UX Designer @geoffmackeyGreg Harron, UX Strategist @gregharron

@centerline | centerline.net

Thank you!