ui ux design - talk at newme accelerator
DESCRIPTION
TRANSCRIPT
www.drawp.it
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!
4/2/13
www.drawp.it 3
ContentsIntroduction
Framework for UI/UX design
Applied Example
Iteration
Summary
4/2/13
www.drawp.it 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
4/2/13
A successful UI/UX influences the user to “do what you want”
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)
4/2/13www.drawp.it
Successful UI/UX design is…
www.drawp.it 6
Successful design is:An iterative process by which you find increasingly better ways…
to use tools…
to influence users…
to meet objectives
4/2/13
www.drawp.it 7
Our ApproachFirst, 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
4/2/13
www.drawp.it 8
ContentsIntroduction
Framework for UI/UX design
Applied Example
Iteration
Summary
4/2/13
www.drawp.it 94/2/13
Discovery Intro Engagement
Iteration
The framework
www.drawp.it 10
Design objectives by stage of engagement
4/2/13
Discovery
Find the product
Intro experience
Create incentive to use product
Continued Engagement
Meet overall app objective
• Does this product meet my need?
• For the right price?
• Does it meet my expectations?
• Do I understand how to use it?
• Is the app meeting my needs?
www.drawp.it 11
Understand “the container”
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
4/2/13
Discovery Intro Engagement
www.drawp.it 12
Where does the user experience the product?
4/2/13
Discovery Intro Engagement
You will design more than just the product
www.drawp.it 13
ContentsIntroduction
Framework for UI/UX design
Applied Example
Iteration
Summary
4/2/13
www.drawp.it 14
App Discovery
4/2/13
Discovery Intro Engagement
• Does this product meet a need?
• For the right price?
Find the Product• The user sees the AppStore
in the context of search
• Then sees it on the home screen
www.drawp.it 15
App Discovery – in the store
4/2/13
www.drawp.it 16
App Discovery – in the iPad
4/2/13
www.drawp.it 17
App Discovery – in the iPad
4/2/13
www.drawp.it 18
App Discovery – in the iPad
4/2/13
www.drawp.it 19
Intro Experience
4/2/13
Discovery Intro Engagement
• Does it meet my expectations?
• Do I understand how to use it?
Create incentive to use product
• What does the user need to understand how to draw and share?
• What if there’s no one to share with?
Note: 84% of users delete an app after an unsuccessful intro experience
20
Intro Experience
First attempt
Old video
60 second video
Passive
Dismiss when done
Revision
New Video
5 second
Active
Easy win
Drawp buddy to share with when alone
4/2/13www.drawp.it
Of users who sign up, the number of users who shared drawings increased from 46.4% to 72.1%
www.drawp.it 21
Intro experience
4/2/13
www.drawp.it 22
Path is one example of a great intro experience
4/2/13
www.drawp.it 23
Subsequent Usage
4/2/13
Discovery Intro Engagement
• Is the app meeting my needs?
Meet overall objective of the
app• How do I define overall
objective?
• How do persuade the user to meet those smaller goals?
• How do I take context into account?
www.drawp.it 24
Subsequent Engagement
Comprises many “asks”
Discover feature set
Release identity information
Buy something
Share drawings with others
Key Learnings
Provide incentives, feedback, and rewards
Make harder “asks” at times of user delight
Minimize number of steps
“Soften” commits
More than ever, be aware of context
4/2/13
www.drawp.it 25
Evernote: a great example of designing for context
4/2/13
www.drawp.it 26
Subsequent Engagement: push notifications
4/2/13
With push notifications, the most important choice is timing
www.drawp.it 27
Subsequent engagement: Why should the user sign up?
4/2/13
With login requests, the most important choice is design
www.drawp.it 28
Subsequent Engagement: Create succinct argument for
ask
4/2/13
www.drawp.it 29
Drawquest asks for signup after first drawing is
complete…
4/2/13
www.drawp.it 30
… and it leverages facebook connect
4/2/13
www.drawp.it 31
Subsequent Experience: monetization
4/2/13
www.drawp.it 32
Subsequent engagement: monetization in context
4/2/13
Remember that pricing affords one of the richest opportunities for iterations
www.drawp.it 33
ContentsIntroduction
Framework for UI/UX design
Applied Example
Iteration
Summary
4/2/13
www.drawp.it 34
Iteration: Map user behavior to test hypotheses
Map user behavior
1. Split experience into sub-experiences
2. Identify target action for each sub experience
3. Identify sets of steps that lead to target actions
4. Create an event for each step
Test design hypotheses
Funnel analyses track the % of users who reach target (and where they fall off)
Cohorts analyses segment users based on date and track their behavior over time
Use outside tools (Apsalar, Flurry,etc) and inside data
4/2/13
www.drawp.it 35
Sample Funnel Analysis
4/2/13
www.drawp.it 36
Cohort analyses
4/2/13
www.drawp.it 37
Inside tools: leverage own data
4/2/13
www.drawp.it 38
ContentsIntroduction
Framework for UI/UX design
Applied Example
Iteration
Summary
4/2/13
www.drawp.it 39
SummaryThe 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
4/2/13
www.drawp.it 404/2/13
Discovery(AppStore/iPad)
IntroUI, first 5 sec
EngagementUI, rest of time
Iteration
UI/UX design is the iterative process by which we motivate our users to better meet our objectives
Summary
Product found in the context of search -> keywords
Cold start problemplaying alone
Offline experienceDifferent countries
Download product
Create incentive to play
Login, push notifications, monetization
Use funnels and cohorts
Outside and inside tools
41
List of resourcesKeywords
Appstorerankings.netBlog post on strategy
Image optimization ImageOptim
Login:Case study on using facebook connect
4/2/13www.drawp.it
