User Experience (UX) Process
Gary Coker, May 2017
High-Level UX Process
2
Great UX
UX Areas
3
Philosophies / Methodologies
4
User-Centered Design
User Research, Rapid Prototyping, Usability Testing
Lean/Agile UX: Iterative, Evidence-Based Design
Mobile First
Responsive Design
Accessibility (WCAG 2.0 / a11y)
Browser Compatibility
Living Style Guide / Pattern Library
Lean UX
5
Lean UX emphasizes collaborative learning via iterative hypothesis testing
instead of โ€œBig Design Up Frontโ€ and heavy documentation processes.
- Jeff Gothelf
UX Activities
6
Design
PrototypeUsability Test
Code
RWD Test
BC TestAC Test
Usability Test
Plan
Understand
existing
systems
User research User personas
Understand
new systemโ€™s
requirements
Information
Architecture
Iterate
Adjunct
UX Education Hire & Manage
UX Team
Develop UX
Guidelines
Develop UX
Pattern Library
Monitor
UX/Design
Trends
UX Activities: Prerequisites and Planning
Plan
Understand existing
systems
User research User personas
Understand new
systemโ€™s
requirements
Information
Architecture
Planning
8
1.Understand functionality of existing systems.
2. User Research: Understand users of existing systems and
prospective users of new system.
Identify and involve stakeholders
(external to development teams):
Provide ongoing ideas & feedback to UX
team by participating in agile iterations.
Establish communication / collaboration
mechanisms.
Field studies / data gathering:
Journey Mapping: Map the userโ€™s experience with our
products & services. Identify weak points and opportunities
for improvement.
Contextual Inquiry: Watch users in their own environment to
see what they really do (vs. what we think they do); find
gaps between expectations/needs and current offerings.
Review existing analytics (if available).
Planning (continued)
9
3. Create User Personas:
Characterize categories of users of the new system.
Formatted as profiles of individual persons that describe skills, behaviors, and other
attributes.
Allow us to better understand target users by summarizing user research.
Goals of personas:
Guide design decisions by taking a โ€œrealโ€ userโ€™s point of view.
Create empathy for users with stakeholders & development teams.
User Research: User Groupings and Personas
10
Groupings are based on previously conducted user research:
โ€ข Contextual Inquiry visits to clients and prospects
โ€ข Meetings with clients
โ€ข In-house knowledge of our users and their needs
User research is the beginning of
the User-Centered Design process,
which keeps us focused on users at
every step in the projectโ€™s lifecycle.
User Research: User Grouping and Personas (cont.)
11
User Grouping helps us understand the different categories of users, with
differing needs, for whom we need to design.
Groupings are based on the key attributes of user populations. These
attributes are identified via user research.
Groupings serve as a platform for development of personas.
Sample User Grouping Dimensions
12
Group Name
J
Task Scope
W
M
H
Domain Exp.
M
L
H
Collab & Comm
MNeed
Frequency of Use Device Pref.
N
H
F
O
Goals & Motivations
Goal 1
Goal 2
Goal 3
Pain Points / Frustrations
Frustration 1
Frustration 2
Frustration 3
n
J = Jack of All
Trades (very
wide range of
tasks)
W = Wide
(wide range
of tasks)
M = Medium
N = Narrow
H = High
M = Medium
L = Low
Computer
Tablet
Smartphone
Size of circle indicates extent of usage of that item / method.
Dotted line indicates minimal usage.
Size of bar segment indicates proportion of user population with that
attribute.
H = Habitual
F = Frequent
O = Occasional
Methods
(current)
Paper
Phone
Other systems
Email
Face-to-face
Fax
Patient-facing Staff, Multi-taskers
13
J
Task Scope
W
M
H
Domain Exp.
M
L
H
Collab & Comm
M
Need
H
Frequency Device Pref.
Goals & Motivations
Delight patients
Accuracy
Speed
Avoid rekeying data
Pain Points / Frustrations
Performance (too slow)
UX is unpleasant
Poor data exchange
between systems
1
Methods
(current)
User Grouping Example
Denise, the Front Office Multi-tasker
14
I am the face of the business for patients and
the staff of other providers (e.g. referring
physicians). I also work closely with other staff
at my facility. In this role, I want to delight
everyone with the quality of my service, but
especially patients. I need to capture and use
data quickly and accurately, which is important
to our business running smoothly.
Goals & Motivations
ยง Want to make patients and coworkers happy,
which reduces stress for me.
ยง Need to multi-task (juggle multiple tasks at once
and switch quickly, while maintaining my context
for each).
ยง Be able to manage my tasks quickly and
efficiently so that I can handle the workload and
go home on time.
ยง Accurately collect money due on date of surgery.
Pain points
ยง I often get interrupted during tasks (I need to be
able to stop and start tasks while not losing my
progress on a task); itโ€™s often hard to switch
between tasks quickly.
ยง I often have to re-key data from other systems,
because data doesnโ€™t transfer.
ยง I have to wait on the software too much.
ยง Too much paper!
Name Denise
Type Patient-facing, Multi-tasker
Tasks Registration, Scheduling,
Audit, Billing, Payments, +
โ€œI want to provide great
service to everyone I deal
with, but I also just want to
get done and go home.โ€
Behaviors / Attributes
Low High
Technical experience
Low High
Domain knowledge / experience
Narrow Jack of all trades
Task scope
Guided / novice Power user
Usage style
Occasional Habitual
Frequency of usage
Low High
Collaboration & Communication Needs
Planning (continued)
15
4. Understand requirements/constraints of new system:
Business goals: What value are we creating for users?
Target users: Are they different from existing systems? How are they changing?
Contexts (Environments, Devices): Different from existing systems?
Technical Targets/Constraints: Web/Native Apps, UX Frameworks, Responsive Design,
Accessibility, Browser Compatibility, etc.
5. Information Architecture:
Establish the overarching model of how information and associated tasks within the
system are organized and structured.
Per-Sprint UX Activities: Overview
16
Design
Prototype
Usability Test
Revise
Code
RWD Test
BC TestAC Test
Usability Test
Design Loop Implementation Loop
Upcoming Sprints Current Sprint
Per-Sprint UX Activities: Details
17
Define features in
upcoming sprint
โ€ขRequirements / Stories
โ€ขInformation Architecture
Design features in
upcoming sprint
โ€ขVisual design
โ€ขInteraction design
Mockups / prototypes
โ€ข Low-fidelity / wireframe
โ€ข Clickable
โ€ข Working code
Test and refine
โ€ขCognitive Walkthrough
โ€ขUsability Test
Code UX for features in
current sprint
โ€ขHTML / CSS / Sass
โ€ขJavascript / Angular
Responsiveness Test
โ€ข Smartphone
โ€ข Tablet
โ€ข Desktop
Browser Compat. Test
โ€ขAll browsers and versions
specified in SM browser
standards doc
Accessibility Test
โ€ข WCAG 2.0 Level A
Post-mortem
โ€ข Revise IA
โ€ข Add to UX guidelines /
pattern library
Design Loop Implementation Loop
Upcoming Sprints Current Sprint
Tech / Tools Example
18
HTML5 / CSS3
SASS, SMACSS
AngularJS
+ Bootstrap + Pattern Library
Customized to needs of DEVELOPERS
Adobe tools
Balsamiq, Sketch
JustinMind, Invision, UXPin
Dev
Design
Customized to needs of STAKEHOLDERS,
UX RESEARCHERS, and DEVELOPERS
Working Code
Design Artifacts
UX Artifacts
19
Mockups & Prototypes
CSS / HTML
Living Style Guide
Styles & Colors
Interaction Design
UX Pattern Library
Personas
Usability Test Reports
Per-Feature Design Docs
Mobile First and Responsive Design
20
Mobile (smartphone) solution is designed first
Tablet and Desktop solutions follow
Responsive Design means the same code base adapts to different devices
Usability Testing
21
assesses these quality attributes of a UX
Usability Testing
Useful Findable Accessible
Usable Desirable
Usability Testing: Types of Tests
22
1. Quantitative (Analytics)
2. Qualitative
โ€ข Participant: A โ€œregularโ€ person who is not associated
with the development of the product.
โ€ข Facilitator (Moderator): The person conducting the test.
Usually a UX professional.
โ€ข Participant uses software while Facilitator observes.
โ€ข 15 minutes to 1 hour per participant.
80% of usability problems can be
found by testing just 5 users
Usability Testing: Process
23
Create
testable
wireframe /
mockup /
prototype
Formulate
UX questions
&
hypotheses
Create user
tasks list
Recruit
participants
Conduct
tests with
users,
observe &
record
Compile
and analyze
results
Report
problems &
create
solutions
Usability Testing: Setup
24
Participant uses a device with screen-sharing and
-recording software so that what they do can be
seen by others. Example: WebEx.
For computers, the webcam & microphone are
used so that we can see and hear the user.
For mobile devices, an external camera is pointed
at the deviceโ€™s screen so we can see the userโ€™s
physical actions, such as finger taps and swipes.
Usability Testing: Method
25
Participant is given a list of real-world tasks to perform.
โ€œThink Aloudโ€ protocol: User verbalizes what theyโ€™re
thinking as they use the software.
One-on-one: Participant performs tasks in the software
while Facilitator observes and takes notes.
Additional observers can watch remotely via screen
sharing and webcams / microphone.
Usability Testing: Technique
26
Focus is on observing actual behavior, not asking for
opinions.
We want to know if the user can accomplish tasks in the
software, not if they โ€œlikeโ€ it.
Local (Participant and Facilitator in same location) vs.
Remote (in different locations).
Moderated (Facilitator present) vs. Unmoderated
(Facilitator not present; session is recorded for later
review).
Usability Testing: When do we test?
27
We test at every stage of
design & development
Test
competitors
Test
wireframes
Test static
mockups
Test clickable
prototypes
Test
pre-release
Test
post-launch
Usability Testing: What do we test?
28
Wireframes / Sketches / โ€œPaper Prototypesโ€
โ€ข Only practical for local testing (requires Facilitator)
โ€ข Limited range of tasks that are feasible
Clickable / Tappable Prototypes
โ€ข Can be done remotely using screen sharing and
webcams
โ€ข Much wider range of feasible tasks
Working Code / Production Code
โ€ข Can be done remotely using screen sharing and
webcams
โ€ข Greatest range of feasible tasks
โ€ข But often โ€œtoo lateโ€ โ€“ if usability problems are found,
design / code must be reworked ($$$)
UX Activities: Adjunct Tasks
Adjunct
UX Education Hire UX Team
Develop UX
Guidelines
Develop UX
Pattern Library
Monitor
UX/Design
Trends
Adjunct Activities
30
1. UX education for stakeholders & development teams:
Presentations / webinars / blog posts / videos
Recommended learning resources (books, videos, articles, tools, etc.)
Champion Design Thinking throughout the enterprise
2. Hire UX team members (engineers and designers)
3. Develop UX guidelines and standards documentation, and pattern
(code) library as design & development evolve.
4. Monitor emerging UX/design trends and incorporate as warranted.
THANK YOU!
Email questions and comments to:
garycoker@gmail.com

UX (User Experience) Process, May 2017

  • 1.
    User Experience (UX)Process Gary Coker, May 2017
  • 2.
  • 3.
  • 4.
    Philosophies / Methodologies 4 User-CenteredDesign User Research, Rapid Prototyping, Usability Testing Lean/Agile UX: Iterative, Evidence-Based Design Mobile First Responsive Design Accessibility (WCAG 2.0 / a11y) Browser Compatibility Living Style Guide / Pattern Library
  • 5.
    Lean UX 5 Lean UXemphasizes collaborative learning via iterative hypothesis testing instead of โ€œBig Design Up Frontโ€ and heavy documentation processes. - Jeff Gothelf
  • 6.
    UX Activities 6 Design PrototypeUsability Test Code RWDTest BC TestAC Test Usability Test Plan Understand existing systems User research User personas Understand new systemโ€™s requirements Information Architecture Iterate Adjunct UX Education Hire & Manage UX Team Develop UX Guidelines Develop UX Pattern Library Monitor UX/Design Trends
  • 7.
    UX Activities: Prerequisitesand Planning Plan Understand existing systems User research User personas Understand new systemโ€™s requirements Information Architecture
  • 8.
    Planning 8 1.Understand functionality ofexisting systems. 2. User Research: Understand users of existing systems and prospective users of new system. Identify and involve stakeholders (external to development teams): Provide ongoing ideas & feedback to UX team by participating in agile iterations. Establish communication / collaboration mechanisms. Field studies / data gathering: Journey Mapping: Map the userโ€™s experience with our products & services. Identify weak points and opportunities for improvement. Contextual Inquiry: Watch users in their own environment to see what they really do (vs. what we think they do); find gaps between expectations/needs and current offerings. Review existing analytics (if available).
  • 9.
    Planning (continued) 9 3. CreateUser Personas: Characterize categories of users of the new system. Formatted as profiles of individual persons that describe skills, behaviors, and other attributes. Allow us to better understand target users by summarizing user research. Goals of personas: Guide design decisions by taking a โ€œrealโ€ userโ€™s point of view. Create empathy for users with stakeholders & development teams.
  • 10.
    User Research: UserGroupings and Personas 10 Groupings are based on previously conducted user research: โ€ข Contextual Inquiry visits to clients and prospects โ€ข Meetings with clients โ€ข In-house knowledge of our users and their needs User research is the beginning of the User-Centered Design process, which keeps us focused on users at every step in the projectโ€™s lifecycle.
  • 11.
    User Research: UserGrouping and Personas (cont.) 11 User Grouping helps us understand the different categories of users, with differing needs, for whom we need to design. Groupings are based on the key attributes of user populations. These attributes are identified via user research. Groupings serve as a platform for development of personas.
  • 12.
    Sample User GroupingDimensions 12 Group Name J Task Scope W M H Domain Exp. M L H Collab & Comm MNeed Frequency of Use Device Pref. N H F O Goals & Motivations Goal 1 Goal 2 Goal 3 Pain Points / Frustrations Frustration 1 Frustration 2 Frustration 3 n J = Jack of All Trades (very wide range of tasks) W = Wide (wide range of tasks) M = Medium N = Narrow H = High M = Medium L = Low Computer Tablet Smartphone Size of circle indicates extent of usage of that item / method. Dotted line indicates minimal usage. Size of bar segment indicates proportion of user population with that attribute. H = Habitual F = Frequent O = Occasional Methods (current) Paper Phone Other systems Email Face-to-face Fax
  • 13.
    Patient-facing Staff, Multi-taskers 13 J TaskScope W M H Domain Exp. M L H Collab & Comm M Need H Frequency Device Pref. Goals & Motivations Delight patients Accuracy Speed Avoid rekeying data Pain Points / Frustrations Performance (too slow) UX is unpleasant Poor data exchange between systems 1 Methods (current) User Grouping Example
  • 14.
    Denise, the FrontOffice Multi-tasker 14 I am the face of the business for patients and the staff of other providers (e.g. referring physicians). I also work closely with other staff at my facility. In this role, I want to delight everyone with the quality of my service, but especially patients. I need to capture and use data quickly and accurately, which is important to our business running smoothly. Goals & Motivations ยง Want to make patients and coworkers happy, which reduces stress for me. ยง Need to multi-task (juggle multiple tasks at once and switch quickly, while maintaining my context for each). ยง Be able to manage my tasks quickly and efficiently so that I can handle the workload and go home on time. ยง Accurately collect money due on date of surgery. Pain points ยง I often get interrupted during tasks (I need to be able to stop and start tasks while not losing my progress on a task); itโ€™s often hard to switch between tasks quickly. ยง I often have to re-key data from other systems, because data doesnโ€™t transfer. ยง I have to wait on the software too much. ยง Too much paper! Name Denise Type Patient-facing, Multi-tasker Tasks Registration, Scheduling, Audit, Billing, Payments, + โ€œI want to provide great service to everyone I deal with, but I also just want to get done and go home.โ€ Behaviors / Attributes Low High Technical experience Low High Domain knowledge / experience Narrow Jack of all trades Task scope Guided / novice Power user Usage style Occasional Habitual Frequency of usage Low High Collaboration & Communication Needs
  • 15.
    Planning (continued) 15 4. Understandrequirements/constraints of new system: Business goals: What value are we creating for users? Target users: Are they different from existing systems? How are they changing? Contexts (Environments, Devices): Different from existing systems? Technical Targets/Constraints: Web/Native Apps, UX Frameworks, Responsive Design, Accessibility, Browser Compatibility, etc. 5. Information Architecture: Establish the overarching model of how information and associated tasks within the system are organized and structured.
  • 16.
    Per-Sprint UX Activities:Overview 16 Design Prototype Usability Test Revise Code RWD Test BC TestAC Test Usability Test Design Loop Implementation Loop Upcoming Sprints Current Sprint
  • 17.
    Per-Sprint UX Activities:Details 17 Define features in upcoming sprint โ€ขRequirements / Stories โ€ขInformation Architecture Design features in upcoming sprint โ€ขVisual design โ€ขInteraction design Mockups / prototypes โ€ข Low-fidelity / wireframe โ€ข Clickable โ€ข Working code Test and refine โ€ขCognitive Walkthrough โ€ขUsability Test Code UX for features in current sprint โ€ขHTML / CSS / Sass โ€ขJavascript / Angular Responsiveness Test โ€ข Smartphone โ€ข Tablet โ€ข Desktop Browser Compat. Test โ€ขAll browsers and versions specified in SM browser standards doc Accessibility Test โ€ข WCAG 2.0 Level A Post-mortem โ€ข Revise IA โ€ข Add to UX guidelines / pattern library Design Loop Implementation Loop Upcoming Sprints Current Sprint
  • 18.
    Tech / ToolsExample 18 HTML5 / CSS3 SASS, SMACSS AngularJS + Bootstrap + Pattern Library Customized to needs of DEVELOPERS Adobe tools Balsamiq, Sketch JustinMind, Invision, UXPin Dev Design Customized to needs of STAKEHOLDERS, UX RESEARCHERS, and DEVELOPERS Working Code Design Artifacts
  • 19.
    UX Artifacts 19 Mockups &Prototypes CSS / HTML Living Style Guide Styles & Colors Interaction Design UX Pattern Library Personas Usability Test Reports Per-Feature Design Docs
  • 20.
    Mobile First andResponsive Design 20 Mobile (smartphone) solution is designed first Tablet and Desktop solutions follow Responsive Design means the same code base adapts to different devices
  • 21.
    Usability Testing 21 assesses thesequality attributes of a UX Usability Testing Useful Findable Accessible Usable Desirable
  • 22.
    Usability Testing: Typesof Tests 22 1. Quantitative (Analytics) 2. Qualitative โ€ข Participant: A โ€œregularโ€ person who is not associated with the development of the product. โ€ข Facilitator (Moderator): The person conducting the test. Usually a UX professional. โ€ข Participant uses software while Facilitator observes. โ€ข 15 minutes to 1 hour per participant. 80% of usability problems can be found by testing just 5 users
  • 23.
    Usability Testing: Process 23 Create testable wireframe/ mockup / prototype Formulate UX questions & hypotheses Create user tasks list Recruit participants Conduct tests with users, observe & record Compile and analyze results Report problems & create solutions
  • 24.
    Usability Testing: Setup 24 Participantuses a device with screen-sharing and -recording software so that what they do can be seen by others. Example: WebEx. For computers, the webcam & microphone are used so that we can see and hear the user. For mobile devices, an external camera is pointed at the deviceโ€™s screen so we can see the userโ€™s physical actions, such as finger taps and swipes.
  • 25.
    Usability Testing: Method 25 Participantis given a list of real-world tasks to perform. โ€œThink Aloudโ€ protocol: User verbalizes what theyโ€™re thinking as they use the software. One-on-one: Participant performs tasks in the software while Facilitator observes and takes notes. Additional observers can watch remotely via screen sharing and webcams / microphone.
  • 26.
    Usability Testing: Technique 26 Focusis on observing actual behavior, not asking for opinions. We want to know if the user can accomplish tasks in the software, not if they โ€œlikeโ€ it. Local (Participant and Facilitator in same location) vs. Remote (in different locations). Moderated (Facilitator present) vs. Unmoderated (Facilitator not present; session is recorded for later review).
  • 27.
    Usability Testing: Whendo we test? 27 We test at every stage of design & development Test competitors Test wireframes Test static mockups Test clickable prototypes Test pre-release Test post-launch
  • 28.
    Usability Testing: Whatdo we test? 28 Wireframes / Sketches / โ€œPaper Prototypesโ€ โ€ข Only practical for local testing (requires Facilitator) โ€ข Limited range of tasks that are feasible Clickable / Tappable Prototypes โ€ข Can be done remotely using screen sharing and webcams โ€ข Much wider range of feasible tasks Working Code / Production Code โ€ข Can be done remotely using screen sharing and webcams โ€ข Greatest range of feasible tasks โ€ข But often โ€œtoo lateโ€ โ€“ if usability problems are found, design / code must be reworked ($$$)
  • 29.
    UX Activities: AdjunctTasks Adjunct UX Education Hire UX Team Develop UX Guidelines Develop UX Pattern Library Monitor UX/Design Trends
  • 30.
    Adjunct Activities 30 1. UXeducation for stakeholders & development teams: Presentations / webinars / blog posts / videos Recommended learning resources (books, videos, articles, tools, etc.) Champion Design Thinking throughout the enterprise 2. Hire UX team members (engineers and designers) 3. Develop UX guidelines and standards documentation, and pattern (code) library as design & development evolve. 4. Monitor emerging UX/design trends and incorporate as warranted.
  • 31.
    THANK YOU! Email questionsand comments to: garycoker@gmail.com