Downloaded 26 times
Uploaded byDee Sadler
UX Process
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.
More Related Content
UX Process
- 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.
- 4. UX in generalis 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.
- 6. RESEARCH VISUAL INTERACTION UI DESIGN ANALYSIS PERSONAS WIREFRAMES SPEC DOCUMENT MOCKUPS COMPONENTS ASSETS PROTOTYPING PROTOTYPES FORTESTING 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.
- 8.
- 9.
- 11.
- 13. HOUSEHOLD INCOME: $48,000 TAXFORM: 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.
- 16.
- 17. Roadmaps INTERATION 1 STAKE HOLDERINTERVIEWS 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.
- 19. • Word • Axure •Visio/Omnigraffle • PowerPoint/Keynote • Balsamic • mime 19 Tools
- 20. Research RESEARCH/VALIDATION Quantitative/Qualitative Research RESEARCH/VALIDATION Contextual Inquiry RESEARCH/VALIDATION UserInterviews RESEARCH/VALIDATION Card Sorting RESEARCH/VALIDATION Surveys RESEARCH/VALIDATION Usability Testing 20
- 21.
- 22. Review Current State Dashboardconcentrates 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 DesignIdeation Sessions CONCEPTING Site Map CONCEPTING Affinity Diagramming CONCEPTING 23
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. 3030 Tools • Azure • AdobeCreative 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.
- 32.
- 34.
- 35.
- 36.
- 37. LOGOUTMY CARDS EnrollmentEnrollment 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 VISUALDESIGN High Fidelity Wireframes VISUAL DESIGN Style Guide VISUAL DESIGN 38
- 39.
- 40.
- 41. $105,000 $97,438 TOTAL INCOME $105,000 TOTAL INCOME TAXABLE $92,438 TAXABLE $8,000 DEDUCTIONS $8,000 DEDUCTIONS Home AT&T11: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 UIDESIGN Prototype UI DESIGN Standards Guide UI DESIGN 42
- 43.
- 44.
- 46.
- 47.
- 48.
- 49.
- 50.
- 52. 52 What — Definitionof 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.
- 54. IBM Design Thinking Sophiede Bonis, Sandra Belfils A new Era at IBM
- 56.
- 60. How to makeUX 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 makeUX 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 makeUX 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, UXmastery.com, usability.gov Thanks
- 65.