UI/UX               Ana Albir – Moondrop Entertainment                                               April 2nd, 2013www.dr...
Objectives Share how we approach UI/UX design at Moondrop Provide applied example List useful resources We don’t have ...
Contents Introduction Framework for UI/UX design Applied Example Iteration Summary   www.drawp.it                4/2/...
What are UI and UX? Standard definitions   UI: the part of the product that faces the user   UX: broad term use to expl...
How do you influence the user to      “do what you want”? Breakdown the problem:   Your objective: what do you want the ...
Successful design is:An iterative process by which you find increasinglybetter ways… to use tools… to influence users… ...
Our Approach First, identify the different objectives, user contexts, and  tools relevant for our product Then, follow a...
Contents Introduction Framework for UI/UX design Applied Example Iteration Summary   www.drawp.it                4/2/...
The framework     Discovery          Intro    Engagement                    Iterationwww.drawp.it                         ...
Design objectives by stage of          engagement                                                    Continued     Discove...
Understand “the container”          Discovery                 Intro              Engagement Decide who you’re targeting ...
Where does the user experience        the product?      Discovery                  Intro               Engagement         ...
Contents Introduction Framework for UI/UX design Applied Example Iteration Summary   www.drawp.it                4/2/...
App Discovery       Discovery          Intro             Engagement  Find the Product                         • The user s...
App Discovery – in the storewww.drawp.it                4/2/13   15
App Discovery – in the iPadwww.drawp.it                4/2/13   16
App Discovery – in the iPadwww.drawp.it                4/2/13   17
App Discovery – in the iPadwww.drawp.it                4/2/13   18
Intro Experience             Discovery             Intro              EngagementNote: 84% of users delete    Create incent...
Intro Experience            First attempt                          RevisionOld video                              New Vide...
Intro experiencewww.drawp.it                      4/2/13   21
Path is one example of a great        intro experiencewww.drawp.it              4/2/13   22
Subsequent Usage      Discovery                Intro      Engagement                                       Meet overall ob...
Subsequent Engagement Comprises many “asks”                  Key Learnings Discover feature set            Provide incen...
Evernote: a great example of     designing for contextwww.drawp.it               4/2/13   25
Subsequent Engagement: push        notifications     With push notifications, the most important choice is timingwww.drawp...
Subsequent engagement:  Why should the user sign up?      With login requests, the most important choice is designwww.draw...
Subsequent Engagement:Create succinct argument for ask www.drawp.it              4/2/13   28
Drawquest asks for signup after  first drawing is complete…www.drawp.it              4/2/13   29
… and it leverages facebook              connectwww.drawp.it               4/2/13   30
Subsequent Experience:             monetizationwww.drawp.it                 4/2/13   31
Subsequent engagement:       monetization in context Remember that pricing affords one of the richest opportunities for   ...
Contents Introduction Framework for UI/UX design Applied Example Iteration Summary   www.drawp.it                4/2/...
Iteration: Map user behavior to test            hypotheses     Map user behavior             Test design hypotheses1. Spli...
Sample Funnel Analysiswww.drawp.it                 4/2/13   35
Cohort analyseswww.drawp.it                     4/2/13   36
Inside tools: leverage own datawww.drawp.it               4/2/13   37
Contents Introduction Framework for UI/UX design Applied Example Iteration Summary   www.drawp.it                4/2/...
Summary The purpose of UI/UX design is to influences the user  to meet your objective To do that, you have to understand...
Summary  Download product      Create incentive to         Login, push                               play                 ...
List of resources Keywords   Appstorerankings.net   Blog post on strategy Image optimization   ImageOptim Login:   ...
Thank you!      Feel free to contact me with any questions!               ana@moondropapps.comwww.drawp.it                ...
Upcoming SlideShare
Loading in...5
×

UI UX design - talk at NewMe Accelerator

361

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
361
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×