This document provides an overview of user experience (UX) design and the UX process. It describes the typical roles in UX including research, strategy, interaction design, visual design, and development. Research involves activities like user interviews, personas, and usability testing. Strategy focuses on analysis, journey mapping, and defining goals. Interaction design covers wireframing, prototyping, and user testing. Visual design includes style guides, mockups, and assets. The document also includes examples of personas, journey maps, wireframes, and style guides.

1. Dee Sadler | ACP, UGM, ACI, UX Geek
Senior Design Manager | IBM Watson Health
dee.sadler@ibm.com
@DeeSadler
UX Process Demystified

2. What is User
Experience Design?
"User experience" encompasses all aspects
of the end-user's interaction with the
company, its services, and its products.
2

3. 3

4. UX in general is made up of 4-5 unique
roles and ideas
Discovery Phase: UX Researcher, Strategist
▪ Strategy and content: Data analysis, competitor analysis, customer analysis, personas, journey
mapping, initial focus groups, user testing…
Design Phase: Interaction Designer
▪ Wireframing and prototyping: Co-design sessions, IA, task flows, creating the why and how of
the interaction, based on the user research. Help with user testing.
Develop: UI Designer
▪Execution and analytics: The lay out based on the wires. Defining the standards and design
patterns, style guides, spec docs and assets for the developers.
▪ Visual Design look and feel, animation, adaption to all screens and devices…
Deploy: UI Developer, Front-end designer/developer
▪ HTML, CSS, working with the developers
4

5. 5

6. RESEARCH
VISUAL
INTERACTION
UI DESIGN
ANALYSIS
PERSONAS
WIREFRAMES
SPEC DOCUMENT
MOCKUPS
COMPONENTS
ASSETS
PROTOTYPING
PROTOTYPES
FOR TESTING
INTERVIEWS
MAPPING
MILESTONE OCCURANCE
AVERAGE
LESS
MORE
GREATER
INFORMATION ARCHITECTURE
INITIAL MEETING
NEEDS ASSESSMENT
USABILITY TESTING
BACK END WORK
COMPONETS
UI
STYLES
PAGE ELEMENTS
FINISHED
PRODUCT
PROTOTYPES
FOR TESTING
USABILITY TESTING
PROTOTYPES
FOR TESTING
USABILITY TESTING
RINSE/ REPEAT
VISUAL STYLE GUIDE
READJUSTMENT
Initial Contact Research Usability
Testing
Interaction
Design
Visual
Design
UI
Design Development
PHASEIMPORTANCEMILESTONES INVOLVEMENT
6

7. 7

8. Strategy
Analysis
Competitive/Comparative
DISCOVER/STRATEGY
Experience or
Journey Map
DISCOVER/STRATEGY
Heuristic
Evaluation
DISCOVER/STRATEGY
Personas/
Behaviors
DISCOVER/STRATEGY
Stakeholder
Interview
DISCOVER/STRATEGY
8

9. 9

11. Understand the user
11

13. HOUSEHOLD INCOME: $48,000
TAX FORM: 1040
PRODUCT: Retail/Assist
CLIENT STATUS: 2 years
AGE: 26
OCCUPATION: Part-time server,
part-time receptionist
LOCATION: Ft. Worth, TX
MARITAL STATUS: Married
DEPENDENTS: 1
HOMELIFE: Married, 1 young child, owns
modest home. Husband employed full-time.
EDUCATION: Some college
HOBBIES: Being a mom, likes to visit flea and
vintage markets, cooking
BEHAVIORS
(social, email, word processing, searching)
to do her own taxes.
GOALS
by a professional
professional prepare her taxes next year.
money for next year. Wants to be able to
have tax prep fees taken out of her refund
“With my life changes, I’m
concerned. I don’t know how to
do my taxes. H&R Block can
make it easy for me.”
Antonia and Greg have a 16-month-old and recently
purchased a modest home. Antonia loves coming to her own
home each day. Antonia believes that you must work hard to
get by in life. She thinks that a happy family equals a happy
life. She has never had much disposable income, and this is
combined income to ease financial strain. She enjoys
time, Antonia enjoys going out to the local flea markets looking
for toys and fun items for her home.
Antonia and her husband agree that all of
their life changes make it too
stressful to tackle taxes on their
making mistakes and needs
the security a professional
can provide when it comes to
concerned about getting the
best refund possible, as they
could use the money.
AntoniaMarried,
One Child
UX RETAIL PERSONAS
H&R Block proprietary and confidential. All rights reserved.
13

15. 15
Comparative /Competitive Analysis

16. User Feedback
16

17. Roadmaps
INTERATION 1
STAKE HOLDER INTERVIEWS
ADMIN
DESIGN
COMPARITIVE ANALYIS
TASK ORGANIZATION
DESIGN PLAN
DESIGN REVIEWS / DEMOS
INFORMATION ARCHITECTURE
WIREFRAMES
SPEC DOCUMENT
VISUAL STYLE GUIDE
INTERATION 2 INTERATION 3 INTERATION 4 INTERATION 5 INTERATION 6 INTERATION 7 INTERATION 8 INTERATION 9INTERATION 0
12/11 - 12/24 12/25 - 1/07 1/08 - 1/21 1/22 - 2/04 2/05 - 2/18 2/19 - 3/04 3/05 - 3/18 3/19 - 4/01 4/02 - 4/1511/27 - 12/10
SECURE DEVELOPMENT SERVER / DB
DEV
CMS PLATFORM
SITE ADMIN / DEVELOPMENT
APPLY CSS / DEPLOY
CONTENT
LOCATE EXISTING EXAMPLES
CATALOG EXISTING STANDARDS
STERILIZE EXISTING EXAMPLES
STORE CONTENT / FINALIZE
17

18. 18

19. • Word
• Axure
• Visio/Omnigraffle
• PowerPoint/Keynote
• Balsamic
• mime
19
Tools

20. Research
RESEARCH/VALIDATION
Quantitative/Qualitative
Research
RESEARCH/VALIDATION
Contextual Inquiry RESEARCH/VALIDATION
User Interviews
RESEARCH/VALIDATION
Card Sorting RESEARCH/VALIDATION
Surveys
RESEARCH/VALIDATION
Usability Testing
20

21. 21

22. Review Current State
Dashboard concentrates on Primary number and usage. If more
numbers are available, there should also be a way to access or
change number from Dashboard.
Total Due, and Pay Bill are #1 for calls to care, and complaints in
the App store. Bring it front and center. First thing they see.
Inconsistent bolding, and colors compared to other pages.
Accordian is dated and how the inside functions is too similar to
website, which doesn’t function as responsive, and app, if an
app, should have a better look and feel for viewing.
Fonts are not the same throughout the app. Bold, font family,
sizing, colors are all different.
Looks nothing like the rest of the app. Doesn’t feel a part of the
same app.
Double menus, which are also inconsistent.
Again, the 2nd menu looks nothing like the other page.
Coverage page has inconsistent spacing, font sizing and colors.
Select a store: The use of“Sprint Store”means nothing to the
user. Icon usage and coloring is inconsistent.
Icons are color, while other pages are grey. Size is also different.
Inconsistent icon usage.
Not sure the correct design pattern of a toggle is right here. For
the iPhone, perhaps a check is better.
1
2
3
4
5
1
2
3
4
5
6
7
8
9
10
11
12
13
9
8
10 11 12
13
7
6
Sprint 12:45 PM 100%
Total Due
10/21/15
Manage Devices
Pay Bill$152.96
816-289-3419
Usage Summary Details +
Support
Store Shop Locator
News Manage Network
22

23. Task Analysis
CONCEPTING
Concepting
Brainstorming
CONCEPTING
User Flow
CONCEPTING
Storyboarding
CONCEPTING
Design Ideation
Sessions
CONCEPTING
Site Map
CONCEPTING
Affinity
Diagramming
CONCEPTING
23

24. 24

25. Empathy Mapping
25

26. 26

27. 27

28. 28

29. 29

30. 3030
Tools
• Azure
• Adobe Creative Cloud (Edge Animate,
Muse, Dreamweaver, InDesign, Illustrator)
• UXPin
• InVisionApp
• Omnigraffle/Visio
• Sketch
• Affinity Designer
• Balsamiq
• Anything to get the idea across to the
stakeholder and the developers of the
interactions needed.

31. Interaction
Sketching
INTERACTION
Annotated
Wireframes
INTERACTION
1
2
3 4
5
Comparative/
Competitive
Analysis
INTERACTION
Low Fidelity
Wireframes
INTERACTION
Paper
Prototypes
INTERACTION
31

32. 32

34. AI wires
34

35. Flows
35

36. Flows

37. LOGOUTMY CARDS Enrollment Enrollment
Email
Verify Email
Please provide and/or verify e-mail
address and phone number to complete
your enrollment in Online Bill Pay
01 User is not enrolled in Bill Payment
BANK APP UX Uses FLows
Check to Card
Location Finder
Direct Deposit
Emerald Cash Rewards
Bill Payment
Emerald Advance
Savings
More
LOGOUTBACK BACK
Phone
ENROLL ENROLL
Email
Verify Email
Please provide and/or verify e-mail
address and phone number to complete
your enrollment in Online Bill Pay
LOGOUT
Phone
Bill PaymentBACK
CANCEL
CANCEL
SUBMIT
HISTORY
Make a Payment
LOGOUT
Success!
You are now enrolled and can
Use bill pay.
OK
Select a Payee
Amount $
Manage Payees
Date MM/DD/YYYY
BANNER SPACE
$426.58
SWIPE
FOR BALANCE ‹‹
‹‹
H&R Block
Earliest Delivery date
MM/DD/YYYY
Username
Password
Remember Me
Create an Account
Forgot Username
or Password
Log In
Locator Get Help Legal
Member FDIC
Card ending in 5333
Wireframes

38. Visual Design/Viz.D
Mockup
VISUAL DESIGN
Comparative/
Competitive
Analysis
VISUAL DESIGN
High Fidelity
Wireframes
VISUAL DESIGN
Style Guide
VISUAL DESIGN
38

39. Style Guides
39

40. WHITESPACE
ACCORDANCE
VARIETY
COLOR
GRID
GOLDEN RATIO
BALANCE
MAGIC
USABILITY
RAINBOWS
VARIETY
HIERACHY
TYPOGRAPHY
SYMMETRY
40

41. $105,000
$97,438
TOTAL INCOME
$105,000
TOTAL INCOME
TAXABLE
$92,438
TAXABLE
$8,000
DEDUCTIONS
$8,000
DEDUCTIONS
Home
AT&T 11:56 AM
FEDERAL REFUND STATE REFUND
$3,837 $0 $0
AT&T 11:56 AM
FEDERAL REFUND STATE OWE
$3,837
PERSONAL
INFORMATION
TAKE A PHOTO OF MY W-2
FILE RETURN
FILE RETURN
PERSONAL
INFORMATION
TAKE A PHOTO OF MY W-2
2014 Summary
Search
AT&T 11:56 AM
State Information
Check Return Status
FIle Return
Take a Photo of my W-2
Personal Information
Rate this app
Like us on Facebook
Legal
Privacy Policy
STATE INFO
MY INFO
OTHER
41

42. UI
Assets
Hand-off
Competitive/
Comparative
Analysis
Spec Guide
UI DESIGN
Pattern
Library
UI DESIGN
Prototype
UI DESIGN
Standards
Guide
UI DESIGN
42

43. Specs and Assets
43

44. 44

46. Testing
46

47. 47

48. 48

49. Methodologies
49

50. Strategy
Research
Design
Plan
Interaction
Development
Visuals
QA
Launch
Lean UX
Development
Test/
Improve
more testing

52. 52
What — Definition of Design
Thinking
Design thinking is an ideology supported by an
accompanying process. A complete definition
requires an understanding of both.
Definition:The design-thinking ideology
asserts that a hands-on, user-centric approach
to problem solving can lead to innovation, and
innovation can lead to differentiation and a
competitive advantage.This hands-on, user-
centric approach is defined by the design-
thinking process and comprises 6 distinct
phases, as defined and illustrated below.

53. 53

54. IBM Design Thinking
Sophie de Bonis, Sandra Belfils
A new Era at IBM

56. 56

60. How to make UX Easier
• Identify your users
• Remember the 80/20 rule when looking through data
and catering to the user
• Use task-based design - every function should be
geared to helping them complete a task. Sense their
intent when completing the task.
• Keep it simple

61. How to make UX Easier
• Don't ignore platform UX
• Large calls to action and easily clickable links are easy
for mobile users to navigate
• Get feedback early
• Ensure your buttons and fields are size-appropriate.
Platforms and fingers vary in size.

62. How to make UX Easier
• Standards - user interaction of interfaces, buttons
swipes etc., and not reinventing the wheel.When OS
standards are a part of the requirements.
• Mobile specific touch - location, camera, social
networks, other environmental factors
• Designing for interruption
• Design isn’t perfect - throw away wires and do more
user testing!

64. Resources:
UXPin eBooks, UX mastery.com,
usability.gov
Thanks

65. LinkedIn
www.linkedin.com/in/deesadler/
Twitter
twitter.com/deesadler.com
Contact
dee.sadler@ibm
dee@aboxofpixels.com
http://aboxofpixels.com
Contact
Get in touch
Skype
Macwebdiva