An overview of my UX process, including user research, design, prototyping, usability testing, and more.

1. User Experience (UX) Process
Gary Coker, May 2017

2. High-Level UX Process
2
Great UX

3. UX Areas
3

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

5. Lean UX
5
Lean UX emphasizes 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
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

7. UX Activities: Prerequisites and Planning
Plan
Understand existing
systems
User research User personas
Understand new
system’s
requirements
Information
Architecture

8. 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).

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

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

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

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

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

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

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

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 / 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

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

21. Usability Testing
21
assesses these quality attributes of a UX
Usability Testing
Useful Findable Accessible
Usable Desirable

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

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

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

26. 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).

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

28. 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 ($$$)

29. UX Activities: Adjunct Tasks
Adjunct
UX Education Hire UX Team
Develop UX
Guidelines
Develop UX
Pattern Library
Monitor
UX/Design
Trends

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

31. THANK YOU!
Email questions and comments to:
garycoker@gmail.com