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.

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
10. User interviews Talking to tennis players about their habits, motivations, goals and problems and recording everything they say.
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 &