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:

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