1. UI/UX
Ana Albir – Moondrop Entertainment
April 2nd, 2013
www.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
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 increasingly
better 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
9. The framework
Discovery Intro Engagement
Iteration
www.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 product
www.drawp.it 4/2/13 12
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
19. Intro Experience
Discovery Intro Engagement
Note: 84% of users delete Create incentive to • What does the user need
an app after an use product to understand how to
unsuccessful 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 Revision
Old 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
22. Path is one example of a great
intro experience
www.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 context
www.drawp.it 4/2/13 25
26. Subsequent Engagement: push
notifications
With push notifications, the most important choice is timing
www.drawp.it 4/2/13 26
27. Subsequent engagement:
Why should the user sign up?
With login requests, the most important choice is design
www.drawp.it 4/2/13 27
32. Subsequent engagement:
monetization in context
Remember that pricing affords one of the richest opportunities for
iterations
www.drawp.it 4/2/13 32
34. Iteration: Map user behavior to test
hypotheses
Map user behavior Test design hypotheses
1. 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 track
3. 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
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 our
www.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.com
www.drawp.it 4/2/13 42
