UXcellence: The Importance Of Human-Centered Design

UXcellenceThe Importance of Human-Centered Design

by Mike Townson

Mike TownsonUX Designer

I work at projekt202 and focus on user research and software design.

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

AUSTIN DALLAS SEATTLE

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

UXWhat is UX? Who is it? When is UX done?

Why is UX important? How do I do UX?

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

User Experience DefinitionThe overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use.

User Experience Definition"If a website degrades the user experience too much, people will simply stay away."

WTF?

Before iPhone After iPhone

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

Who?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

CD

DRIXD

VD

FET

BET

The UX Family Tree

CD UX Creative DirectorCould also be known as “Art Director, UX Lead, UX Manager”

• Kicks off the project

• Removes “road blocks”

• Attends milestone meetings

• Mentors design team

• Takes the heat

• Buys the tacos

DR Design ResearcherCould also be known as “UX Researcher”, “Anthropologist”

• Creates questionnaires

• Performs observations

• Collects & synthesizes data

• Identifies problems and opportunity

• Helps create project roadmap

• Presents findings

• Sometimes travels a lot

IXD Interaction DesignerCould also be known as “Information Architect”, “UX Lead”, “Strategist”

• Attends user observations

• Helps Design Researcher

• Creates presentation materials

• Creates app flow, site map, wireframes,

interaction diagrams, other planning materials.

• Follows project from beginning to end.

VD Visual DesignerCould also be known as “User Interface Designer”, “Pixel Pusher”

• Works with the team to create visual designs.

• Follows interaction diagrams

• Produces UI Toolkits

• Makes ready to use slices for FET

• Guides client in the right direction for colors,

textures, fonts, sizing, overall look & feel.

CD

DRIXD

VD

FET

BET

The UX Family Tree

FET Front-End TechnologistCould also be known as “Front-End Dev”, “Web Developer”, “App Dev”

• Builds the codebase for all the user facing

parts of the application.

• Works with the team to make sure the end

product matches the interaction diagram and

color compositions.

• Magic

BET Back-End TechnologistCould also be known as “Back-End Dev”, “System Architect”

• Makes sure the needed data can be delivered

from the technology stack.

• Black Magic

Who are we leaving out?

Users

These peopleare users.

(or models)

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

When?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

When is the best time to involve UX

• At the beginning of a project planning

• During the testing of a product

• Any UX is better than no UX

The UX ProcessDiscover

Analyze Existing

User Observations

UX Strategy Ideation &User Validation

Detailed Design& Development

System Testing

UserTesting

Design Specs &UX Pattern Library

Ideate Design & Build

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

Why?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

This is the core of who we design for and the people we work/live with...

...and someone needs to fight for them.

USER

“Let’s totally make an elephant slide.”

Just because it’s pretty...

..doesn’t mean it’s good.

Sony Remote for Google TV Nokia N-Gage

Windows 8Reliant Robin

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

How?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

CD DR IXDVD FET BET

More like “Boy Meets World” Less like “Family Guy”

How does this family work together?

Research

Start Launch

CD

DR

Ideation Design Development

IXD

VD

FET

BET

Basic UX Schedule

Stakeholder InterviewsHeuristic EvaluationContextual Inquiries

SynthesisAnalysis

Opportunity DefinitionRoadmap

Start Launch

CD

DR

Site-MapUser Flow

Framework DesignWireframes

Interaction DocumentFunctional Specs

Color TheoryKey Screen Design

Unique Screen CompsUI Toolkit

FrameworkContent Creation

StylesContent Management System

Middle-WareDB CreationMagic Stuffs

IXD

VD

FET

BET

Basic UX Schedule

Project Example:

Video Watching Thing

Kick Off + Stakeholder Interview

Contextual Inquiries(User Observations)

Synthesis

Theme

Quote

Quote

Quote

Theme

Quote

Quote

Quote

Theme

Quote

Quote

Quote

Theme

Quote

Quote

Quote

Workflow Diagrams

Opportunity Matrix & Roadmap

Low Risk

Low Effort

High Effort

High Risk

Key

Impa

ct o

n R

esou

rces

to D

esig

n &

Dev

elop

Current Understanding of Features

MED IMPACT

HIGH IMPACT

VERY HIGH IMPACT

Robust Help FAQ

User-generated custom reports

Drag & drop sorting lists

Breadcrumbs

Color coding

Best practice examples

Wizards for common actions (drug

testing, background checks)

DW branding like DISA

Role based navigation

Consistent labeling

Custom UI views for different types of

users.Chat functionality

Support ticketing

Tutorials for advanced tasks.

Real-time edit tracking

File loading bars

Preview of uploaded files

Notes option on data

Clear text hierarchy

Promote useful data

Progressive disclosure of

data on page load

Mark as viewed

Notifications on completion

Error messaging and system

feedback

Have a "favorite" feature for areas the user goes to

often.

Tool Tips

New notification systems (SMS in app notifications)

Employee Photographs

Cross Browser Compatibility

User-set logout timer

Robust filtering and

sorting

User notifications on data edits

Faster, cleaner, smarter

searches.

Landing pages with

progressive content

Match digital forms to paper order of forms

View uploaded records for employee

Daily digest email

Role-specific actions other users cannot

undertake

Responsiveness

Session memory to

remember last states

Descriptive call outs when

compliance not met

User-defined views (drag &

drop dashboards)

Creating buckets of

tasks based on employee management

Employee and

paperwork search

Batch editing

Avoid DISA-specific

acronymsCleaner

iconography

Increase readability on all

form factors

LOGO SEARCH USER ACCOUNT

RECENT ACTIVITY

WATCH AGAIN

SUGGESTED

POPULAR

WHAT TO WATCH SUBSCRIPTIONS

NAVIGATION

LOGO USER ACCOUNT

WATCH AGAIN

WHAT TO WATCH SUBSCRIPTIONSWhat to Watch

My Channel

My Subscriptions

History

Watch Later

Play Lists

Favorite Videos

Liked Videos

Recently Watched Video

Recently Watched Video

Recently Watched Video

Video Watched Video Watched Video Watched Video Watched

Description Description Description Description

Suggested Video

Description

Suggested Video

Description

Suggested Video

Description

Suggested Video

Description

Popular Video to Watch

Description

Popular Video to Watch

Description

Popular Video to Watch

Description

Popular Video to Watch

Description

Popular Video to Watch

Description

Search

UI Toolkit(Library of Visual Elements)

Get to Dev’n(Code up the front end - Hook up the back end)

Get to Dev’n(Code up the front end)

All done?

Rinse & Repeat

Detailed Design& Development

System Testing

UserTesting

Design Specs &UX Pattern Library

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

UXWhat is UX? Who is it? When is UX done?

Why is UX important? How do I do UX?

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

Questions?miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014