Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

UX Starter Crash Course

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:

Stéphanie Walter

November 29, 2019
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

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

    stephaniewalter.design @WalterStephanie
  2. 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
  3. “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
  4. 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?
  5. 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?
  6. But… but we don’t have “UX people” But… we don’t

    have the time But… we don’t have budget But…
  7. 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.
  8. 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
  9. It shows of all the different steps user will need

    to take to complete their task or goal.
  10. 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?
  11. 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)
  12. 2. What comes before/next ๏ How does user arrive to

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

    another way to arrive here? ๏ is there another place they can go from this step?
  14. ๏ 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
  15. 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.
  16. 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)
  17. 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
  18. 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
  19. ๏ 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
  20. ๏ Explain to the person what’s going to happen (see

    cheatsheet) ๏ Have the person sign an authorisation if you record them Usability testing!
  21. ๏ 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!
  22. 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
  23. 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 [email protected] 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