For many creatives getting out of college and into the field, it's hard to know what career best fits them. UXcellence: The Importance Of Human-Centered Design is meant to be a quick education to - What UX is - Why it is important - When it's thought about - Why it is important in today's society - And a quick overview of how to do it

1. UXcellence
The Importance of Human-Centered Design
by Mike Townson

2. Mike Townson
UX Designer
I work at projekt202 and focus on
user research and software design.
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

3. AUSTIN DALLAS SEATTLE
miketownson.com • @miketownson • Slideshare.com/miketownson May 3, 2014

4. 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

5. User Experience Definition
The 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.

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

8. WTF?

9. Before iPhone After iPhone

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

12. CD
DR
IXD
VD
FET
BET
The UX
Family Tree

13. CD UX Creative Director
Could 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

14. DR Design Researcher
Could 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

15. IXD Interaction Designer
Could 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.

16. VD Visual Designer
Could 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.

17. CD
DR
IXD
VD
FET
BET
The UX
Family Tree

18. FET Front-End Technologist
Could 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

19. BET Back-End Technologist
Could also be known as “Back-End Dev”, “System Architect”
• Makes sure the needed data can be delivered
from the technology stack.
• Black Magic

20. Who are we leaving out?
Users

22. These people
are users.
(or models)

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

24. 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

25. The UX Process
Discover
Analyze Existing
User Observations
UX Strategy Ideation &
User Validation
Detailed Design
& Development
System
Testing
User
Testing
Design Specs &
UX Pattern Library
Ideate Design & Build

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

27. This is the core of who we design for
and the people we work/live with...
...and someone needs to fight for them.
USER

28. “Let’s totally make an elephant slide.”

29. Just because it’s pretty...
..doesn’t mean it’s good.

30. Sony Remote for Google TV Nokia N-Gage
Windows 8
Reliant Robin

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

32. CD DR IXDVD FET BET
More like “Boy Meets World” Less like “Family Guy”
How does this family work together?

33. Research
Start Launch
CD
DR
Ideation Design Development
IXD
VD
FET
BET
Basic UX Schedule

34. Stakeholder Interviews
Heuristic Evaluation
Contextual Inquiries
Synthesis
Analysis
Opportunity Definition
Roadmap
Start Launch
CD
DR
Site-Map
User Flow
Framework Design
Wireframes
Interaction Document
Functional Specs
Color Theory
Key Screen Design
Unique Screen Comps
UI Toolkit
Framework
Content Creation
Styles
Content Management System
Middle-Ware
DB Creation
Magic Stuffs
IXD
VD
FET
BET
Basic UX Schedule

35. Project Example:
Video Watching Thing

36. Kick Off + Stakeholder Interview

37. Contextual Inquiries
(User Observations)

38. Synthesis
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote
Theme
Quote
Quote
Quote

39. Workflow Diagrams

40. Opportunity Matrix & Roadmap
Low Risk
Low Effort
High Effort
High Risk
Key
ImpactonResourcestoDesign&Develop
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
acronyms
Cleaner
iconography
Increase
readability on all
form factors

41. LOGO SEARCH USER ACCOUNT
RECENT ACTIVITY
WATCH AGAIN
SUGGESTED
POPULAR
WHAT TO WATCH SUBSCRIPTIONS
NAVIGATION

42. 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

44. UI Toolkit
(Library of Visual Elements)

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

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

47. All done?

49. Rinse & Repeat
Detailed Design
& Development
System
Testing
User
Testing
Design Specs &
UX Pattern Library

50. 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

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