Sep 10, 2012 - add filter. 4.0.3. Add Note. 5..0.1. Record. Sent (filter) send/blow edit. Sent! ... mandatory, email add
Hello. Again. Ziya Danishmend 917-693-1604
[email protected]
UX Methodology I’ve often been asked, “well, how do you do it?”. The following should help to illustrate the approach I take to UX design. These are pages from a case study for a mobile app, bublit, that my team launched.
our purpose
Our purpose is to share happiness through human-connected design v
At the start. The UX Sprint The objective of each UX sprint was to validate our concept (sharing happiness) and quickly get to the next level of build. We tried to maintain a practice of open innovation where pivots could happen at any stage - as long as the momentum was forward and the burn rate managed. The ultimate goal was to stay lean - and deliver a product that users loved.
{
Concept -> Research
Need
User (persona & journey) -> MVP -> Validate Market
Sketching the business prop - the Business Canvas
Sketching the business prop - the Business Canvas Problem Top 3 problems
Solution Top 3 features
1: it’s a hassle to have to check each of their social networks separately to make sure they are not missing anything
this is a faster, easier and more engaging way to share & keep up with contacts across different networks
2: users want to post any type of content file to certain people and certain networks but there is no easy way to do that
Key Metrics Key activities to measure
Channels Path to customers
# users time spent # shares content type shared
(1) app store (2) incentives for sharing app
3: users feel left out when they don’t see any messages from friends in their notifications
Cost Structure what are the costs of implementing this business model
engineering, design, brand strategy, legal Market Size How big the opportunity is Benchmark(s)
Value Proposition Unfair Advantage Single, clear, compelling Can’t be easily copied or message that states why bought you are different and worth the UI/UX is intuitive, buying
this is a faster, easier and more engaging way to share & keep up with contacts across different networks
beautiful and fun to use on your phone
Customer Segments Who the customer is and what problems the product solves
for users who are constantly checking phones and social/ content sharing but find it difficult or tedious to do it across all of their social networks with their different contacts
Revenue Streams revenue and profit sources and size
advertising revenue; data on social sharing
US smartphone users with data plans (114MM) who have Android phones (59MM people)and use mobile apps = 40MM people
Research online asynchronous research over 3 days with 26 participants completing study 354 pages of participant’s written responses follow up 1 on 1 phone interviews with 7 participants Stats age
male
female
15-19
4
2
20-29
4
4
30-39
2
9
40+
0
1
total
10
16
8
Behavioral findings Mobile Snacking mobile usage seamlessly integrated into daily habits
}
check phone first thing in the am, throughout the day and at night frequent mobile “snacking” between activities requiring attention - checking phones while cooking, in traffic, watching tv, while at lunch... many potential snack times throughout day
Validation Cycles We first identified features for a minimally viable product and with each UX cycle we validated - and raised the fidelity of the build. And did it again till we had a complete build.
Fidelity
Time
Prototyping In each UX cycle, rapid prototyping, “getting out of the building”, was the best way for us to get immediate feedback. I did it simply. We chose features for the MVP(minimally viable product) and then I created the wireframe in Illustrator and OmniGraffle and exported it as a JPEG or PNG and emailed it to myself. I opened the image on the target device and then handed the device to a user to validate the concept. Once we validated we would proceed to the next level of fidelity in the wireframing and concept development - or we would pivot and move on to another idea.
Personas Personas were at the heart of developing the app. I’ve created personas in different ways. In the next page are the personas we crafted for bublit. And after that is a template that I use (and you may recognize if you are familiar with the Lean Startup and Business Model Generation books) that I’ve been calling an empathy map. I used this in our group brainstorms to have the team participate in creating an overview of one of the primary target personas.
What does she THINK AND FEEL?
What does she HEAR?
What does she SEE?
what friends say
environment
what boss says
friends what the market offers
What does she SAY AND DO? behavior to others
What does she see? DESCRIBE WHAT THE CUSTOMER SEES IN HER ENVIRONMENT •
What does it look and feel like?
•
Who surounds her?
•
Who are her friends?
•
What types of offes is she exposed to daily (as opposed to all market ofers)?
•
What problems does she encoutner?
PAIN
GAIN
fears
wants/needs
What does she hear? DESCRIBE HOW THE ENVIRONMENT INFLUENCES THE CUSTOMER
What does she really think and feel? TRY TO SKETCH OUT WHAT GOES ON IN YOUR CUSTOMER’S MIND •
•
What do her friends say? Her spouse?
•
•
how? •
What is really important to her (which she might not say publicly)?
Which media channels are
moves her? •
What might keep her up at night?
•
Try describing her dreams and aspirations
What does she say and do? IMAGINE WHAT THE CUSTOMER MIGHT SAY, OR HOW SHE MIGHT BEHAVE IN PUBLIC •
What is her attitude?
•
What could she be telling others?
•
Pay particular attention to customer might say and what she may truly think or feel
What is the customer pain points?
What does the customer gain?
•
What are her biggest frustrations?
•
•
What obstacles stand between her and what she wants or needs to achieve?
What does she truly want or need to achieve?
•
How does she measure success?
•
Think of some strategies she might use to achieve her goals.
•
Which risks might she fear taking?
Wireframes & User Flows
Install
0.5 splash screen "bubbles are more fun when you invite friends"
0.1 Android "Do you want to install?"
Settings
0.2 Android, "Installing"
1.0 Settings 0.3 Android, "Application installed"
launch app via app icon
My BUBLs
2.0 My BUBLs
1.0.1 Profile
0.4 launch screen + app introduction
0.4/a SIgn-in with Facebook
1..0.2 Privacy
Register (username mandatory, email address and location - optional)
0.4/b Sign-in with Twitter
1..0.3 About
Register (enter phone number)
0.4/c "why we need this"
1.0.4 Configure Sharing
name
username
email address
08.15.2012 0.6 BUBL Home Screen
if logged off
Audio
Gift
Camera
3.0 Gift
4.0 Camera
5.0 Audio
3.0.1 Choose icon
4..0.1 From Gallery
5..0.1 Record
3.0.2 Add Note
0.6a Log in
0.6b Sign Up
0.6c Need help?
Friends
Change Bubble
6.0 Friends
6.0.1 Find Friends
6.0.2 Invite Friends
6.0.3 Address Book
6.0.4 Facebook
edit 4.0.2 Use Camera
crop
5..0.2 Add Note
Invite SMS
add filter
Sent! Invite Email
4.0.3 Add Note
1.0.5 Help Us Improve! 1.1.1 edit profile
BUBL vers. 0.3
Path 1 "I want to send a BUBL!"
First run
Sent! 1.0.6 Sign Out
1.0.5.1 Send email
Sent (filter)
1.0.5.2 Send log
key
Received (filter)
Android OS functionality
Path 2 "I've got a BUBL!"
send/blow
0.7 BUBL Landing Page
Sent!
App functionality Page functionality
photo (optional)
launch app via received BUBL Reply
0.8 BUBL Detail Page
Start flow End flow
Favorite Content Forward
Decision
Install
0.5 splash screen "bubbles are more fun when you invite friends"
0.1 Android "Do you want to install?"
Settings
0.2 Android, "Installing"
BUBL vers. 0.3
Path 1 "I want to send a BUBL!"
First run
08.15.2012
launch app via app icon
0.6 BUBL Home Screen
if logged off
notes
7.0
0.6a Log in
0.6b Sign Up
My BUBLs
Gift
Camera
3.0 Gift
4.0 Camera
Audio
Friends
Change Bubble
5.0 1.0 Settings
0.3 Android, "Application installed"
2.0 My BUBLs
4.0 1.0.1 Profile
3.0.1 Choose icon
5.0
6.0 Friends
User can choose Audio full featured camera app
4..0.1
5..0.1 Record
Gifting for MVP will From Gallery include emoticons
6.0.1 Find Friends
1.0 Register (username 0.4/b mandatory, email address and All events in the Sign-in with Twitter location - optional) registration flow
occur on one screen 0.4/c
"why we need this"
name
username
email address
1..0.3 About
5..0.2 Add Note
add filter
All events in the edit profile flow occur on one screen
6.0.3 Address Book
6.0.4 Facebook
Invite SMS
6.0 1.0.4 Configure Sharing
6.0.2 Choose Friends
edit 4.0.2 Use Camera
crop
User chooses photo filters
Sent! Invite Email
4.0.3 Add Note
1.0.5 Help Us Improve!
3.0 1.1.1 edit profile
3.0.2 Add Note
or Twitter
8.0
FB integration for invites
2.0 1..0.2 0.4/a Privacy SIgn-in with Facebook User can sign in with FB
0.4 launch screen + app introduction
Register (enter phone number)
0.6c Need help?
if user signs off user can sign on again or recover password
Sent! 1.0.6 Sign Out
1.0.5.1 Send email
Sent (filter)
1.0.5.2 Send log
Path 2 "I've got a BUBL!"
key
Received (filter)
Android OS functionality send/blow
0.7 BUBL Landing Page
Sent!
App functionality Page functionality
photo (optional)
launch app via received BUBL Reply
0.8 BUBL Detail Page
Start flow End flow
Favorite Content Forward
Decision
BUBL vers. 0.3
3.0 Gift
08.16.2012 22 - Recipient field - can contain multiple addressees 23 - Highlighted name indicates editable field click to edit 24 - Gift icon - on state
22
23
25 - Gift icon 26 - The Slider - this slider allows the user to customize the BUBLs look and feel. As the user slides the BUBL will change color.
24
27- User has the ability to add a note before sending - 140 character limit
25 28 - Press to send. This button can be configured in the Settings window as either a Send or a Blow button - the default state for this is "Send"
26
27
28
BUBL vers. 0.3
3.0.1 Gift Offers
08.16.2012 34 - back to BUBL home screen 35 -Available BUBLs 36 - BUBL preview window
34
37 - BUBL previews are scrollable.
35
36 37 38
38 - Over state for a BUBL preview window. RIght pointing arrow indicates a link to BUBL detail screen All BUBLs will link to a BUBL detail screen. 39 - Scrollable content filters - they are but are not limited to these four a.- date night b - bright ideas c - games and apps d - favorites
39
User flow 1.0 app launch - Gift tray persona opens app
Invite by SMS Bubbles (splash screen) Settings
Friends
Profile
Find Friends
Invite by email
Camera primary interaction window "home screen"
Preferences
About
Gift App
Bubbles
My Bubbles
Bubbles
