Your SlideShare is downloading. ×
0
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
UI UX design - talk at NewMe Accelerator
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UI UX design - talk at NewMe Accelerator

345

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
345
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UI/UX Ana Albir – Moondrop Entertainment April 2nd, 2013www.drawp.it
  • 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. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 3
  • 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. 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. 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. 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. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 8
  • 9. The framework Discovery Intro Engagement Iterationwww.drawp.it 4/2/13 9
  • 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. 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. 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. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 13
  • 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. App Discovery – in the storewww.drawp.it 4/2/13 15
  • 16. App Discovery – in the iPadwww.drawp.it 4/2/13 16
  • 17. App Discovery – in the iPadwww.drawp.it 4/2/13 17
  • 18. App Discovery – in the iPadwww.drawp.it 4/2/13 18
  • 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. 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. Intro experiencewww.drawp.it 4/2/13 21
  • 22. Path is one example of a great intro experiencewww.drawp.it 4/2/13 22
  • 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. 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. Evernote: a great example of designing for contextwww.drawp.it 4/2/13 25
  • 26. Subsequent Engagement: push notifications With push notifications, the most important choice is timingwww.drawp.it 4/2/13 26
  • 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. Subsequent Engagement:Create succinct argument for ask www.drawp.it 4/2/13 28
  • 29. Drawquest asks for signup after first drawing is complete…www.drawp.it 4/2/13 29
  • 30. … and it leverages facebook connectwww.drawp.it 4/2/13 30
  • 31. Subsequent Experience: monetizationwww.drawp.it 4/2/13 31
  • 32. Subsequent engagement: monetization in context Remember that pricing affords one of the richest opportunities for iterationswww.drawp.it 4/2/13 32
  • 33. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 33
  • 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. Sample Funnel Analysiswww.drawp.it 4/2/13 35
  • 36. Cohort analyseswww.drawp.it 4/2/13 36
  • 37. Inside tools: leverage own datawww.drawp.it 4/2/13 37
  • 38. Contents Introduction Framework for UI/UX design Applied Example Iteration Summary www.drawp.it 4/2/13 38
  • 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. 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. 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. Thank you! Feel free to contact me with any questions! ana@moondropapps.comwww.drawp.it 4/2/13 42

×