Get your hands dirty: UX design process, explained

Get your hands dirty: UX design process, explained

Through a real-life case study @leonissima and me explained the design process we applied, what were the outcomes, challenges and learnings.

D30bb555e2a96b0170f5b903dff43129?s=128

Janko Jovanovic

March 28, 2017
Tweet

Transcript

  1. Milica Tomić Jovanović and Janko Jovanović Studio at Warp Speed

    Get your hands dirty Design process explained through case study
  2. Who we are Janko Interaction designer Milica Interaction designer Tags:

    IxDA, Interfaces, Team leading, Blogging, Painting, Playing drums, Playing son’s Wii while he sleeps @jankowarpspeed www.jankoatwarpspeed.com Tags: IxDA, Agile, Project Management, Cooking & Baking, Crafting batiks, Enjoying solitary morning coffee while others sleep @leonissima www.leonissima.com
  3. Case Study: GotCourts Previously mytins.ch GotCourts Clubs Tennis players

  4. Design process Research Analysis & Synthesis Ideation & Validation Surveys

    & Questionaries Stakeholder interviews User interviews SME interviews Observation Participation Usability testing Competitive analysis Expert reviews Affinity diagramming Card Sorting Insight combination Personas User scenarios Process flows Reporting Exploring with sketching Collaborative ideation Wireframing Paper prototypes HTML/CSS prototypes Concept validation Refinement Design mockups Style guides Coordination Economic metrics Behavioral metrics Delivery & Measuring Engagement with clients Project objectives Business & UX Strategy Partnership
  5. Research phase Research Analysis & Synthesis Ideation & Validation Surveys

    & Questionaries Stakeholder interviews User interviews SME interviews Observation Participation Usability testing Competitive analysis Expert reviews Affinity diagramming Card Sorting Insight combination Personas User scenarios Process flows Reporting Exploring with sketching Collaborative ideation Wireframing Paper prototypes HTML/CSS prototypes Concept validation Refinement Design mockups Style guides Coordination Economic metrics Behavioral metrics Delivery & Measuring
  6. Stakeholder interviews See different perspectives of anyone who affects the

    product in any way.
  7. Competitive analysis

  8. Questionaries & Surveys 150 participants replied

  9. None
  10. User interviews Talking to tennis players about their habits, motivations,

    goals and problems and recording everything they say.
  11. None
  12. Contextual inquiry Observing tennis players when talking to other players,

    booking courts or playing tennis.
  13. Participation

  14. Usability testing Trying to figure out what works in the

    existing application, and what NOT.
  15. How long did it take? 1 survey, 30 interviews &

    observations, 5 tennis matches and more than 100 coffees.
  16. Analysis & Synthesis Research Analysis & Synthesis Ideation & Validation

    Surveys & Questionaries Stakeholder interviews User interviews SME interviews Observation Participation Usability testing Competitive analysis Expert reviews Affinity diagramming Card Sorting Insight combination Personas User scenarios Process flows Reporting Exploring with sketching Collaborative ideation Wireframing Paper prototypes HTML/CSS prototypes Concept validation Refinement Design mockups Style guides Coordination Economic metrics Behavioral metrics Delivery & Measuring
  17. This is where the magic is.

  18. Affinity diagramming

  19. Persona skeletons

  20. 6 personas 1 primary persona

  21. Emma

  22. Scenarios It’s Thursday afternoon and Emma wants to play tennis

    on the coming weekend. This is her usual time for playing since she is very busy during work days. She will be partnering with her husband and playing doubles against another couple, with whom they play often. They don’t have any specific time in mind but know that they would like to play on Sunday morning. 
 
 While she’s on a launch break, she logs in to GotCourts site using her browser and is presented with a page where she can immediately book a court by choosing date, time and location. She chooses a club which is conveniently located for both couples - it has a restaurant so that they can have a cup of coffee after the game and, of course, has available courts for Sunday morning. She double-checks by phone call with the other couple about the exact time - 11 o’clock is suitable for them. After she gets a confirmation from them, while still on the phone she books a court for 11:00 for two hours.After the booking has been made, she is given a confirmation of her reservation. Emma informs her friends and sends an SMS to her husband.
  23. User journeys

  24. Process flows

  25. Idea creation

  26. Ideation & Validation Research Analysis & Synthesis Ideation & Validation

    Surveys & Questionaries Stakeholder interviews User interviews SME interviews Observation Participation Usability testing Competitive analysis Expert reviews Affinity diagramming Card Sorting Insight combination Personas User scenarios Process flows Reporting Exploring with sketching Collaborative ideation Wireframing Paper prototypes HTML/CSS prototypes Concept validation Refinement Design mockups Style guides Coordination Economic metrics Behavioral metrics Delivery & Measuring
  27. Translating needs to features Basic Latent Basic Performance Excitement Needs

    Features
  28. Defined structure for website and application for Clubs

  29. Card sorting

  30. Mental diarrhea through sketching

  31. Collaborative brainstorming

  32. Role playing Interface in Chrome Interface in Internet Explorer

  33. Paper prototypes

  34. Validating prototypes 4 major rounds of testing & refinement

  35. Delivery & Measuring Research Analysis & Synthesis Ideation & Validation

    Surveys & Questionaries Stakeholder interviews User interviews SME interviews Observation Participation Usability testing Competitive analysis Expert reviews Affinity diagramming Card Sorting Insight combination Personas User scenarios Process flows Reporting Exploring with sketching Collaborative ideation Wireframing Paper prototypes HTML/CSS prototypes Concept validation Refinement Design mockups Style guides Coordination Economic metrics Behavioral metrics Delivery & Measuring
  36. Detailed specifications

  37. Visual design

  38. Style guide

  39. Measuring success Persona validation Prototype testing User feedback Club feedback

    More metrics when site goes live
  40. Lessons learned

  41. Thank you. Janko Milica @jankowarpspeed www.jankoatwarpspeed.com @leonissima www.leonissima.com &