Investing in User Centric Design is a Good Business Decision

The slides of my keynote in front of the LOIC event on UX/UI design in Luxembourg.

I start the talk by explaining what user interface (UI) design and user experience (UX) designer are. I give advice on how companies start getting to know their users: conducting face to face and remote guerilla user research, online surveys, gathering data from supports, online communities, etc. I then present a few different levels of design maturities within the organisations, what happens at each of those levels and the problems that might arise. I end the talk with advice on "How to sell the benefits of a design and user driven process?".

Transcript

1. Investing in User Centric Design is a Good Business Decision
2. UX & Product Designer Mobile expert. Pixel & CSS Lover stephaniewalter.design @WalterStephanie
3. A pretty object meant as a “conversation starter”
4. User Interface (UI)
5. UI components 
 from the Foyer 
 Design System
6. The interface reflects user expectations: Good Deals
7. A pretty but not really usable object
8. User Experience (UX)
9. “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
10. use During Before After use use
11. UX Design is not limited to digital interfaces and products
12. It doesn’t always have to be a pleasant experience
13. How do you get to know 
 your users?
14. Ask the support
15. Online user feedback
16. Analytics & backend data
17. Online surveys for quantitative data
18. Guerilla interviews
19. Remote interviews
20. What’s your company 
 design maturity?
21. Hostility “It’s not worth it”
22. Self-Referential People rely on their own intuition
23. UX-UI-Unicorn team of one Because you need to start somewhere
24. Scattered “I too want my own designer!!”
25. Centralised Design as a service
26. User Driven Company User Experience is part of the culture
27. How to sell the benefits of a design and user driven process?
28. Well-designed & usable products cost less support and help gain time. 1.
29. How much money is this intranet costing in “time wasted”? VS
30. Users today expect 
 well-designed & usable products 2.
31. Would you trust this site with your credentials?
32. Why am I punished using this for work?
33. While I’m used to have this at home…
34. Great experience drives user satisfaction 3.
35. Would you use that app?
36. User research drives quality and innovation 4.
37. 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
38. User Data helps take business decisions 5.
39. Avoid feature creep and endless scope changes
40. Is there a market for this TV app?
41. Design driven products make development cheaper 6.
42. 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 & mockups help gain development time
43. It’s much harder and expensive to fix issues after development
44. It’s never too late to ask for designer’s help on a project!
45. inpx.it/LOIC stephaniewalter.design @WalterStephanie