UX Starter Crash Course

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
November 29, 2019

UX Starter Crash Course

A few days ago I facilitated a series of two evenings of workshop on for WIDE, Women in Digital Empowerment in Luxembourg. The audience was a nice mix between students and entrepreneurs with a project/ website. The goal was to help them discover how to build a product with user centric approach and why companies should focus on users needs and talk to their potential users as soon as possible.
More details here:

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

November 29, 2019
Tweet

Transcript

  1. UX Starter Crash Course Stéphanie Walter - @walterstephanie

  2. UX & Product Designer Mobile expert. Pixel & CSS Lover

    stephaniewalter.design @WalterStephanie
  3. 29/11 ๏ Paper prototyping the pages ๏ Testing the prototype

    ๏ Conclusion - Why should I invest in a user centred design process? ๏ Introduction and definition ๏ Defining a product concept ๏ Getting to know the users ๏ Building a user flow 22/11
  4. Graphic, UI, UX, design: 
 some definitions

  5. Visual design, logo design, illustrations, etc.

  6. Visual design

  7. Logo design

  8. Illustrations

  9. None
  10. A pretty object meant as a “conversation starter”

  11. User Interface (UI)

  12. UI components 
 from the Foyer 
 Design System

  13. A mobile User Interface

  14. Same product, desktop User Interface

  15. The interface reflects user expectations: Good Deals

  16. A pretty but not really usable object

  17. User Experience (UX)

  18. “I wanted to cover all aspects of the person’s experience

    with the system including industrial design graphics, the interface, the physical interaction and the manual.” 1993, Don Norman as Apple’s first User Experience Architect
  19. use During Before After use use

  20. UX Design is not limited to digital interfaces and products

  21. It doesn’t always have to be a pleasant experience

  22. Okay, how do I get started?

  23. Define a clear concept for your product/service 01

  24. A well-defined project should answer the following questions: ๏ WHAT:

    what type of project is it? (e-commerce, shop window, blog, application, service, shop, etc.) ๏ WHO: for whom is this product made (aka what is the main target audience, who are you users?) ๏ WHY: What user problem are you trying to solve? Why is it useful for them? Why will they want to us it? ๏ WHERE: where are your users, what is there location, are they in a specific area, all around the world, where will be your market? ๏ WHEN: when will your product be used? A specific time of the day? The year? All the time?
  25. MY PROJECT IS What? Type? MY USERS ARE Who? Target

    audience? THEY ARE LOCATED Where? THEY NEED // MY PROJECT ALLOWS THEM TO Why, what problem do I solve? IT WILL BE USED When?
  26. And yes this is marketing 101…

  27. Your turn :)

  28. Get to know your users 02

  29. But… but we don’t have “UX people” But… we don’t

    have the time But… we don’t have budget But…
  30. But… but we don’t have “UX people” But… we don’t

    have the time But… we don’t have budget But… Everyone in your team is responsible for the user experience of your products.
  31. But… Here are some guerrilla 
 user research techniques

  32. On a new product/project

  33. Online surveys for quantitative data

  34. Guerilla interviews

  35. Remote interviews

  36. Interviewing without influencing or bringing biases in the conversation is

    hard!
  37. None
  38. On an existing project

  39. Ask the support

  40. Online user feedback

  41. Analytics & backend data

  42. User Experience / Customer Journey Map With all this, you

    can start building a “map” of the experience of a user before, while they are using your service and after Source NNgroup
  43. User Journey map of going to a UX in Lux

    Workshop
  44. Your turn :)

  45. Build a user flow 03

  46. It shows of all the different steps user will need

    to take to complete their task or goal.
  47. The “nice version”

  48. The “guerilla paper version”

  49. User flows ๏ What are the most likely scenarios and

    sequences users will go through on your site? ๏ Are there potentiel dead-ends? ๏ Are there different “paths” to accomplish the same goal?
  50. 1. Find a starting point ๏ Identify major “parts” (pages)

    users will need to accomplish the task to find your starting point. ๏ What are the “key destinations”? 
 (example: the product page and the purchase page in ecommerce)
  51. 2. What comes before/next ๏ How does user arrive to

    this particular point? ๏ What comes before? ๏ What are the next steps?
  52. 3. Alternative routes ๏ For each steps: ๏ is there

    another way to arrive here? ๏ is there another place they can go from this step?
  53. Your turn :)

  54. Prototype page content 04

  55. ๏ Based on your user flow you now have a

    “list” of pages and views to help your user accomplish the goal of “finding a cooking recipe”. ๏ You might also have subpages, modals and other small “interactions” List your main pages
  56. What do I need on each page?

  57. Content inventory A way to identify and list the different

    types of content and features necessary on each page to help users accomplish their goal.
  58. Navigation You know the navigation path in your user flow.

    Now you need to ask: what does the user need on the screen to go from one page to the other? Don’t forget about secondary navigations (internal links)
  59. Paper prototype to explore more options A quick tool to

    let you explore and throw away if needed different options without too much cost risks
  60. Resources http://inspirationhut.net/printable-paper/

  61. Your turn :)

  62. Let’s test this prototype! 05

  63. Guérilla Prototyping: 10 minutes to create the "functional" paper prototype

    and test the hypothesis "how users will place media on a timeline". Guerilla usability testing
  64. ๏ Testing a paper prototype is cheaper than testing a

    final product ๏ It’s better to test x 5 people than with none ๏ It’s better to test with people in your target audience Guerilla usability testing
  65. ๏ Prepare a test protocol and follow it ๏ Pre-test

    your test. Usability testing!
  66. ๏ Explain to the person what’s going to happen (see

    cheatsheet) ๏ Have the person sign an authorisation if you record them Usability testing!
  67. ๏ Be careful about biases ๏ Don’t help the users,

    let them finish and then you can answer all their questions ๏ Take notes (or have a note taker) Usability testing!
  68. Your turn :)

  69. Okay, then what?

  70. This is just the beginning UX Design UI Design Developpement

  71. Why should I invest in a user centred design process?

  72. Well-designed & usable products cost less support and help gain

    time. 1.
  73. How much money is this intranet costing in “time wasted”?

    VS
  74. Users today expect 
 well-designed & usable products 2.

  75. Would you trust this site with your credentials?

  76. Why am I punished using this for work?

  77. While I’m used to have this at home…

  78. Great experience drives user satisfaction 3.

  79. Would you use that app?

  80. User research drives quality and innovation 4.

  81. use During Before After use use Taking pictures is easy

    It takes forever to send when wifi is slow Opportunities 1 1 We have to wait until front-desk tells us the client answered 2 2 Asynchronous Loading in the background Push notifications and navigation rework Fleetback now Additional work accepted Open The client Serges Heinrich accepted 2/3 additional work. Project Fi 59% 5:07 5:07 Sun Jul. 29 Sun Jul. 29
  82. User Data helps take business decisions 5.

  83. Avoid feature creep and endless scope changes

  84. Is there a market for this TV app?

  85. Design driven products make development cheaper 6.

  86. Tables Table headings Table rows Collapsing table rows Table filters

    / search Table pagination Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 15/10/2018 To Send Edit 540€ 3 planned works found in 1 intervention Christophe Grosjean 10/11/2018 To Send We contacted him by mail COMMENTS 300€ Other reparation lo… - Recommended 40€ Tyre FR - Recommended 200€ Broken disc - Urgent WORKS DETAILS INT3RVENTION-N33MB3R Linked intervention: +352 00 000 000 christophe.grosjean@arhs-spikeseed.com CUSTOMER DETAILS BMW 320d - PA9976 First Name Last Name Email Adresss Phone Number Last Update Table headings have a font size of 16 px. User can sort the column by using the double arrows next to the table heading title Table rows have an odd/even background. They can have action buttons on the right side of the table. The action button is always an outline button style Table rows can have collapsing elements. When they do, we use - the down arrow for collapsed rows - the up arrow for expanded rows Some tables might have filters / search functionnalities to help users navigate inside the data. Those fonctionalities are displayed on top of the table headings Tables display 10 items by default. At the bottom or the table, the pagination lets user navigate towards other items Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Grosjean Christophe +352 909 8990 10/04/2018 08:14:41 Filtres Filter Interventions 12/11/2018 A partir de: Cette semaine Aujourd’hui Tous First Name Last Name Email Adresss Phone Number Last Update 12/11/2018 As of: This Week Today All Filters First Name Last Name Email Adresss Phone Number Last Update 13 14 12 10 … 2 3 4 1 Buttons and links Primary buttons Primary buttons are used for the MAIN action on the page / view Default Desactivated Hover and active Button Button Button fill: #FFFFFF 100% border: 1px center * #0072CE 100% fill: #E3F0FF 100% border: 1px center * #8BB8E8 100% fill: #0072CE 100% border: 1px center * #0072CE 100% color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Default Desactivated Hover and active Button Button Button Button Default Desactivated Hover and active fill: #0072CE 100% border: 1px center * #0072CE 100% fill: #8BB8E8 100% border: 1px center * #8BB8E8 100% fill: #005090 100% border: 1px center * #005090 100% color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px color: #FFFFFF 100% font-face: Roboto-Medium font-size: 14px Button Button fill: #FFFFFF 100% border: 1px center * #A1A3A6 100% fill: #EDEDED 100% border: 1px center * #BABCBF 100% fill: #FFFFFF 100% border: 1px center * #0072CE 100% color: #5B6770 100% font-face: Roboto-Medium font-size: 14px color: #A1A3A6 100% font-face: Roboto-Medium font-size: 14px color: #0072CE 100% font-face: Roboto-Medium font-size: 14px Outline secondary buttons Outline secondary buttons are used for the secondary actions on the page / view, actions that are performed the less often. They are also used for filters, tabs and interface controls All dealers Filter Interventions All Filters Outline primary buttons Outline primary buttons are used for the secondary actions on the page / view, actions that are performed less often than the first one. They are also used for repeated actions like in table rows Examples Examples Examples Interventions New Intervention Create Latest customers Import Preview More Save Send Import Preview More Save Send Primary buttons like send and save are in blue Outline secondary buttons preview and import Colors - main palette Colors - secondary palette Text colors and background Background colors Accessibility rgba(0,114,206,1); #0072CE blue-50 rgba(0,80,144,1); #005090 blue-70 rgba(0,55,99,1); #003763 blue-80 rgba(139,184,232,1); #8BB8E8 blue-20 rgba(195,215,238,1); #C3D7EE blue-10 rgba(227,240,255,1); #E3F0FF blue-05 rgba(197,41,155,1); #C5299B fushia-50 Design specifications bring consistency
  87. It’s much harder and expensive to fix issues after development

  88. It’s never too late to ask for designer’s help on

    a project!