ui ux design - talk at newme accelerator

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

www.drawp.it 42

Thank you!

Feel free to contact me with any questions!

ana@moondropapps.com

4/2/13