Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

When Mobile meets UX/UI powered by Growth Hacking Asia

887 views

Published on

2 hours training on Mobile UX with Farah Nuraini, Interaction Designer at Traveloka, Indonesia
45 min theory: Research, Analysis, Design solutions and Testing
+ 1h15 min of hands-on exercises with the 5 facilitators from Traveloka.

Published in: Marketing
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.thesisscientist.com/top-30-sites-for-download-free-books-2018
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

When Mobile meets UX/UI powered by Growth Hacking Asia

  1. 1. Growth Hacking Asia Growth Hacking Asia @GrowthHackAsia Growth Hacking Indonesia Powered by Farah Nuraini Designing for Mobile UX Workshop
  2. 2. Designing for Mobile UX Farah Nuraini farah.nuraini@gmail.com
  3. 3. 43% people use a smartphone.
  4. 4. 65% people access the internet via smartphone
  5. 5. Smartphone has become our primary needs
  6. 6. How? • Offer solution to problems that people have • Pay attention to UX so people could use it easily without creating new problem
  7. 7. However…
  8. 8. Not every problem is solved by app
  9. 9. Does the problem need to be solved? Is it urgent? Is it the root cause or just a byproduct?
  10. 10. What to do? We need to validate the problem
  11. 11. Design Process 1 2 3 4 Research Analysis & Synthesis Develop Solution Testing
  12. 12. Research Validate Problem 1 2 3 4
  13. 13. Research Research • Observe and empathize with people and their conditions
  14. 14. Research Why Research • To get inspiration on making new innovation • To understand better about our potential users
  15. 15. Research Survey Share a set of questions to certain group of people to get insight from their answers. Pros • Can get lots of data from many participants • Breadth information Cons • Sometimes unreliable • Cannot get deeper information than what we ask
  16. 16. Research User Interview Selecting some candidates (around 4 candidates per user segments) based on certain criteria and have conversations with them Pros • Can elaborate our questions when participant says something interesting • Deeper information Cons • Exhausted Resources (energy, time, etc.) • Must sync the schedule
  17. 17. Research Ethnographic Research Researchers go to the places where people whom they study do their activities. Could be high or low efforts. Pros • Can see what our target users normally do in their real environment • rich information Cons • Take times • Not quite flexible place • Need to gain trusts from the people we observe
  18. 18. Research And many more… stakeholder research, competitor analysis, etc.
  19. 19. Analysis & Synthesis Validate Problem 1 2 3 4
  20. 20. Analysis & Synthesis Analysis & Synthesis Analysis: the procedure by which we break down an intellectual or substantial whole into parts or components Swedish Morphological Society Synthesis: combine separate elements or components in order to form a coherent conclusion.
  21. 21. Analysis & Synthesis Analysis + Synthesis Data Insights
  22. 22. Analysis & Synthesis Analysis & Synthesis • Persona • User Journey
  23. 23. Analysis & Synthesis Persona • Persona is archetype of a certain group of people, modeled as a specific person based on research. • Proto-persona is persona which built based on hypothesis as a base for persona.
  24. 24. Analysis & Synthesis Why persona? • Build empathy • Focused target user • Easier communication to prioritize which problem need to be solved • As a base for defending an argument
  25. 25. Analysis & Synthesis Component in Persona • Picture + Name + Quote • Demographic • Background to empathize know what we would help know how we would help • User Goals and Needs • Behavior • Limitation • etc.
  26. 26. Source: Content Marketing Institute
  27. 27. Analysis & Synthesis User Journey User Journey is a series of steps that describes the journey of a user by representing the different touchpoint that characterize user’s interaction with the service
  28. 28. Analysis & Synthesis Why User Journey? • Identify problem that need to be solved • Identify opportunities for innovation or improvement • Show how user do their activities and interact with system • Highlight different user segments experience
  29. 29. Analysis & Synthesis User Journey Elements in User Journey • Stage — Phases that users always go through to reach their goal • Motivation — What users try to achieve in certain stage • Touchpoints — Points of interactions between user and system where user try to reach goal • Emotion — What user feels when interacts with system • Problems — the cause of negative emotion • Opportunities — Possibility ways to solve the problems
  30. 30. ShopifyNation
  31. 31. Design Solutions Develop Solution 1 2 3 4
  32. 32. Design Solution Solve problems while considering understandability, usability, distinction, aesthetics of the solution An Introduction to Service Design: How to Have Your Cake and Eat It Too
  33. 33. Design Solution Design • Sketch: Basic concept on how the app will work • Wireframe: Visual guide that represents the outline of interfaces • Mockup: static design representation of UI
  34. 34. Design Solution Design • Start with Minimum Viable Product (MVP) • Start with sketching
  35. 35. Design Solution Why sketching? • makes you think and work faster • easier to refine • low cost to change • perfect for brainstorming
  36. 36. Design Solution Brainstorming come up with creative solutions to problems quickly https://developers.google.com/design-sprint/downloads/ DesignSprintMethods.pdf Further study:
  37. 37. Testing Validate Solution 1 2 3 4
  38. 38. Testing Why Testing • To learn more about your users • To discover critical design issues • To refine your solution ideas as soon as possible
  39. 39. Testing Level of Fidelity • low — concept design on paper • middle — solution in form of wireframe • high — design with color
  40. 40. Testing User Testing • Concept testing—sketch • Solution Testing—wireframe/paper prototype • look & feel testing — complete UI with colors and micro interaction
  41. 41. Testing What to prepare? • Target — what criteria of participants will be your target? • Goal(s) — what do you want to test? • Method(s) — Define how you would inquire the answer from participants (Observation? Question?) • Scenario — Story which you tell the participants so they could imagine the real situation. • Stakeholders — who need to know the results? • Equipment needed
  42. 42. Testing Scenario • Do not directly tell users what they have to do with UI “You are going to Pluit from Kebayoran by bus. You wait for the bus at the bus stop close to your house. How do you know when the next bus arrive?” “Open the map from homepage.”
  43. 43. Testing Research Questions • Ask open-ended questions • Make sure you ask just about enough questions
  44. 44. Testing Tips in conducting testing • Prepare your script • Do pilot testing • Bring observer with you • Guide user to do their task when they get distracted. Further study: https://library.gv.com/get-better-data-from-user-studies-16-interviewing- tips-328d305c3e37#.w8k7x2awq
  45. 45. Testing Solution works?
  46. 46. Final notes…
  47. 47. Reminder To solve problems we need to: • research • analyze & synthesize • design solution • test This process can be done as simple as possible based on your need and resources.
  48. 48. Exercise
  49. 49. Exercise • Find opportunities according to each problems (5 minutes) • Discuss with your group to pick one opportunities you want to develop (10 minutes)
  50. 50. • Sketch the solution based on one of the opportunities you find in the user journey you have created (20 minutes) Exercise
  51. 51. • define one test question and test with someone from another group (15 minutes) Exercise
  52. 52. Presentation Time!

×