ux process
TRANSCRIPT
Dee Sadler | ACP, UGM, ACI, UX Geek Senior Design Manager | IBM Watson Health
[email protected] @DeeSadler
UX Process Demystified
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
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
RESEARCH
VISUAL
INTERACTIONUI DESIGN
ANALYSIS
PERSONAS
WIREFRAMES
SPEC DOCUMENT
MOCKUPS
COMPONENTS
ASSETS
PROTOTYPING
PROTOTYPES FOR TESTINGINTERVIEWS
MAPPING
MILESTONE OCCURANCE
AVERAGELESS
MORE
GREATER
INFORMATION ARCHITECTURE
INITIAL MEETING
NEEDS ASSESSMENT
USABILITY TESTING
BACK END WORK
COMPONETSUI
STYLESPAGE ELEMENTS
FINISHEDPRODUCT
PROTOTYPES FOR TESTING
USABILITY TESTING
PROTOTYPES FOR TESTING
USABILITY TESTING
RINSE/ REPEAT
VISUAL STYLE GUIDE
READJUSTMENT
Initial Contact Research Usability Testing
Interaction Design
VisualDesign
UIDesign Development
PHASEIMPORTANCEMILESTONES INVOLVEMENT
6
7
Strategy
AnalysisCompetitive/Comparative
DISCOVER/STRATEGY
Experience orJourney Map
DISCOVER/STRATEGY
Heuristic
Evaluation
DISCOVER/STRATEGY
Personas/Behaviors
DISCOVER/STRATEGY
StakeholderInterview
DISCOVER/STRATEGY
8
9
Understand the user
11
HOUSEHOLD INCOME: $48,000TAX FORM: 1040PRODUCT: Retail/AssistCLIENT STATUS: 2 years
AGE: 26OCCUPATION: Part-time server, part-time receptionistLOCATION: Ft. Worth, TXMARITAL STATUS: MarriedDEPENDENTS: 1HOMELIFE: Married, 1 young child, owns modest home. Husband employed full-time.EDUCATION: Some collegeHOBBIES: 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
Comparative /Competitive Analysis
User Feedback
16
RoadmapsINTERATION 1
STAKE HOLDER INTERVIEWS
ADMIN
DESIGN
COMPARITIVE ANALYIS
TASK ORGANIZATION
DESIGN PLAN
DESIGN REVIEWS / DEMOS
START OF ACTIVITY
DURATION
END OF TASK (NO DELIVERABLE)
END OF TASK (DELIVERABLE)
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
• Word
• Axure
• Visio/Omnigraffle
• PowerPoint/Keynote
• Balsamic
• mime
19
Tools
Research
RESEARCH/VALIDATION
Quantitative/QualitativeResearch
RESEARCH/VALIDATION
Contextual Inquiry RESEARCH/VALIDATION
User Interviews
RESEARCH/VALIDATION
Card Sorting RESEARCH/VALIDATION
Surveys
RESEARCH/VALIDATION
Usability Testing
20
21
Review Current StateDashboard 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
34
5
1
2
3
4
5
6
7
8
9
10
11
12
13
9
8
10 11 1213
76
Sprint 12:45 PM 100%
Total Due10/21/15
Manage Devices
Pay Bill$152.96
816-289-3419
Usage Summary Details +
Support
Store Shop Locator
News Manage Network
22
Task Analysis
CONCEPTING
Concepting
Brainstorming
CONCEPTING
User Flow
CONCEPTING
Storyboarding
CONCEPTING
Design IdeationSessions
CONCEPTING
Site Map
CONCEPTING
AffinityDiagramming
CONCEPTING
23
24
Empathy Mapping
25
26
27
28
29
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.
Interaction
Sketching
INTERACTION
Annotated Wireframes
INTERACTION
1
2
3 4
5
Comparative/Competitive
Analysis
INTERACTION
Low FidelityWireframes
INTERACTION
PaperPrototypes
INTERACTION
31
32
AI wires
34
Flows
35
Flows
LOGOUTMY CARDS Enrollment Enrollment
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
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
SWIPEFOR BALANCE ‹‹‹‹
H&R Block
Earliest Delivery dateMM/DD/YYYY
Username
Password
Remember Me
Create an Account
Forgot Usernameor Password
Log In
Locator Get Help Legal
Member FDIC
Card ending in 5333
Wireframes
Visual Design/Viz.D
Mockup
VISUAL DESIGN
Comparative/Competitive
Analysis
VISUAL DESIGN
High Fidelity
Wireframes
VISUAL DESIGN
Style Guide
VISUAL DESIGN
38
Style Guides
39
WHITESPACE
ACCORDANCE
VARIETY
COLOR
GRID
GOLDEN RATIO
BALANCE
MAGIC
USABILITYRAINBOWS
VARIETY
HIERACHY
TYPOGRAPHY
SYMMETRY
40
$105,000
$97,438
TOTAL INCOME
$105,000TOTAL INCOME
TAXABLE
$92,438TAXABLE
$8,000DEDUCTIONS
$8,000DEDUCTIONS
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
UI
Assets
Hand-off
Competitive/Comparative
Analysis
Spec Guide
UI DESIGN
PatternLibrary
UI DESIGNPrototype
UI DESIGN
StandardsGuide
UI DESIGN
42
Specs and Assets
43
44
Testing
46
47
48
Methodologies
49
Strategy
Research
Design Plan
Interaction
Development
Visuals
QA
Launch
Lean UX
Development
Test/Improve
more testing
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
IBM Design Thinking
Sophie de Bonis, Sandra Belfils
A new Era at IBM
56
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
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.
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!
Resources: UXPin eBooks, UX mastery.com,
usability.gov
Thanks
LinkedInwww.linkedin.com/in/deesadler/
Twittertwitter.com/deesadler.com
Contactdee.sadler@[email protected]://aboxofpixels.com
ContactGet in touch
SkypeMacwebdiva