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.

UI UX design - talk at NewMe Accelerator

713 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

UI UX design - talk at NewMe Accelerator

  1. 1. UI/UX Ana Albir – Moondrop Entertainment April 2nd, 2013www.drawp.it
  2. 2. Objectives Share how we approach UI/UX design at Moondrop Provide applied example List useful resources We don’t have all the answers – tell us what you think! www.drawp.it 4/2/13 2
  3. 3. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 3
  4. 4. What are UI and UX? Standard definitions  UI: the part of the product that faces the user  UX: broad term use to explain all aspects of a person’s experience with “the system” So what makes a UI/UX design successful?  Not the usage of any one element  Not the satisfaction a user might get while using the product A successful UI/UX influences the user to “do what you want” www.drawp.it 4/2/13 4
  5. 5. How do you influence the user to “do what you want”? Breakdown the problem:  Your objective: what do you want the user to do?  Your user: What does she care about and expect?  Your tools: And the tools at your disposal? One size NEVER fits all (everyone has different tools, users, and objective) Successful UI/UX design is… www.drawp.it 4/2/13 5
  6. 6. Successful design is:An iterative process by which you find increasinglybetter ways… to use tools… to influence users… to meet objectives www.drawp.it 4/2/13 6
  7. 7. Our Approach First, identify the different objectives, user contexts, and tools relevant for our product Then, follow an iterative process:  Propose informed designs  Implement design  Measure impact  Identify opportunities for design optimization  Start again Designing UI/UX is an exercise that requires attention to detail and commitment to iteration www.drawp.it 4/2/13 7
  8. 8. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 8
  9. 9. The framework Discovery Intro Engagement Iterationwww.drawp.it 4/2/13 9
  10. 10. Design objectives by stage of engagement Continued Discovery Intro experience Engagement Create incentive to Meet overall app Find the product use product objective • Does it meet my• Does this product expectations? • Is the app meeting meet my need? • Do I understand my needs?• For the right price? how to use it?www.drawp.it 4/2/13 10
  11. 11. Understand “the container” Discovery Intro Engagement Decide who you’re targeting Understand user expectations and needs Understand the environment in which they use the product Remember that users are spoiled User context changes across the product lifecycle www.drawp.it 4/2/13 11
  12. 12. Where does the user experience the product? Discovery Intro Engagement You will design more than just the productwww.drawp.it 4/2/13 12
  13. 13. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 13
  14. 14. App Discovery Discovery Intro Engagement Find the Product • The user sees the AppStore in the context of search• Does this product meet a need? • Then sees it on the home screen• For the right price? www.drawp.it 4/2/13 14
  15. 15. App Discovery – in the storewww.drawp.it 4/2/13 15
  16. 16. App Discovery – in the iPadwww.drawp.it 4/2/13 16
  17. 17. App Discovery – in the iPadwww.drawp.it 4/2/13 17
  18. 18. App Discovery – in the iPadwww.drawp.it 4/2/13 18
  19. 19. Intro Experience Discovery Intro EngagementNote: 84% of users delete Create incentive to • What does the user needan app after an use product to understand how tounsuccessful intro draw and share?experience • Does it meet my expectations? • What if there’s no one to • Do I understand share with? how to use it? www.drawp.it 4/2/13 19
  20. 20. Intro Experience First attempt RevisionOld video New Video 60 second video  5 second Passive  Active Dismiss when done  Easy win  Drawp buddy to share with when alone Of users who sign up, the number of users who shared drawings increased from 46.4% to 72.1% www.drawp.it 4/2/13 20
  21. 21. Intro experiencewww.drawp.it 4/2/13 21
  22. 22. Path is one example of a great intro experiencewww.drawp.it 4/2/13 22
  23. 23. Subsequent Usage Discovery Intro Engagement Meet overall objective• How do I define overall of the app objective?• How do persuade the user to • Is the app meeting meet those smaller goals? my needs?• How do I take context into account?www.drawp.it 4/2/13 23
  24. 24. Subsequent Engagement Comprises many “asks” Key Learnings Discover feature set  Provide incentives, feedback, and rewards Release identity information  Make harder “asks” at times Buy something of user delight Share drawings with others  Minimize number of steps  “Soften” commits  More than ever, be aware of context www.drawp.it 4/2/13 24
  25. 25. Evernote: a great example of designing for contextwww.drawp.it 4/2/13 25
  26. 26. Subsequent Engagement: push notifications With push notifications, the most important choice is timingwww.drawp.it 4/2/13 26
  27. 27. Subsequent engagement: Why should the user sign up? With login requests, the most important choice is designwww.drawp.it 4/2/13 27
  28. 28. Subsequent Engagement:Create succinct argument for ask www.drawp.it 4/2/13 28
  29. 29. Drawquest asks for signup after first drawing is complete…www.drawp.it 4/2/13 29
  30. 30. … and it leverages facebook connectwww.drawp.it 4/2/13 30
  31. 31. Subsequent Experience: monetizationwww.drawp.it 4/2/13 31
  32. 32. Subsequent engagement: monetization in context Remember that pricing affords one of the richest opportunities for iterationswww.drawp.it 4/2/13 32
  33. 33. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 33
  34. 34. Iteration: Map user behavior to test hypotheses Map user behavior Test design hypotheses1. Split experience into sub-  Funnel analyses track the % of experiences users who reach target (and where they fall off)2. Identify target action for each sub experience  Cohorts analyses segment users based on date and track3. Identify sets of steps that their behavior over time lead to target actions  Use outside tools (Apsalar,4. Create an event for each Flurry,etc) and inside data step www.drawp.it 4/2/13 34
  35. 35. Sample Funnel Analysiswww.drawp.it 4/2/13 35
  36. 36. Cohort analyseswww.drawp.it 4/2/13 36
  37. 37. Inside tools: leverage own datawww.drawp.it 4/2/13 37
  38. 38. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 38
  39. 39. Summary The purpose of UI/UX design is to influences the user to meet your objective To do that, you have to understand your objectives, your user, and the tools available to you Our framework is meant to help keep those elements in mind www.drawp.it 4/2/13 39
  40. 40. Summary Download product Create incentive to Login, push play notifications, monetization Discovery Intro Engagement (AppStore/iPad) UI, first 5 sec UI, rest of time Product found in the Cold start problem Offline experience context of search -> playing alone Different countries keywords Use funnels and cohorts Iteration Outside and inside tools UI/UX design is the iterative process by which we motivate ourwww.drawp.it users to better meet our objectives 4/2/13 40
  41. 41. List of resources Keywords  Appstorerankings.net  Blog post on strategy Image optimization  ImageOptim Login:  Case study on using facebook connect www.drawp.it 4/2/13 41
  42. 42. Thank you! Feel free to contact me with any questions! ana@moondropapps.comwww.drawp.it 4/2/13 42

×