janice tsai | ux portfolio 2015
TRANSCRIPT
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
http://9m08rr.axshare.com
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
FUTURE FEATURE IDEAS HIGHLIGHTS
SURPRISE + DELIGHTSOLUTION The restaurant can see that a user is interested in them from their Venue app, and sends an offer if there are open tables.
IN-WATCH VOICE-RECORDED TECHNOLOGYSOLUTION Offer voice recordings for feedback during the Rate Your Experience survey.
LOCATION-BASED REMINDERSSOLUTION Notify users when to depart for their restaurant reservation based on their location.
WHY The microphone is the most accessible way to leave feedback on the watch.
HOW Access the watchs microphone and recording capabilities.
(for RESERVE versions 1.3+!)
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
Apple Watch HIGs were referenced throughout the entire design process.
PAPER PROTOTYPES
RATE YOUR EXPERIENCE - VER. 1 RATE YOUR EXPERIENCE -VER. 2 (MID-FI)
USER FLOWS
Changes are reflected in the simplification between user flows.
TESTING INSIGHTS
No one wants to scroll on a watch.- COLE / 37 Y.O. / WEB DEVELOPER / NYC
Just make it lazy. People are lazy. They want the least amount of reading and work."- SHARON / 35 Y.O. / SOCIAL MEDIA STRATEGIST / AUSTIN
Tap Dismiss
Long Look:
Shoulder time offer from restaurant
Short Look:
Shoulder time
notification
Tap Rate Experience
Tap DismissLong Look:
Shoulder time offer from restaurant
Short Look: Shoulder time
notification
Tap Rate Experience
Ver. 1 used the paginated app style, involving more user actions: tap star/scroll (repeat x3)
Ver. 2 was designed to minimize scrolling and fit on one page.
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
VIBRATING NOTIFICATIONS ARE ESSENTIAL & EFFECTIVESOLUTION Save for core call-to-actions
ACCESSIBLE NOTIFICATIONS ADD CONVENIENCESOLUTION Keep content concise enough for quick glances
BRAND LOYALTY PURCHASES WITHIN SAME OSSOLUTION Make watch extension available for Android & iPhone users
SIMPLIFIED USAGE OVER TIMESOLUTION Keep features to a bare minimum with easy onboarding
KEY TAKEAWAYS
NOTIFICATIONS
Shoulder Time Offer Reminders
CONFIRMATIONS
Reservations Request Added Payment
RECOMMENDATIONS
Suggested Offers
MVP FEATURE SET (VER. 1.3)
LYLES USER STORY
AFFINITY MAPSSynthesized key takeaways from
3 types of interviews to determine MVP feature set.
Lyle is one of two personas we generated fom interviews. He is curious - the type who is always willing to try out new restaurants and tech to improve his lifestyle.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
TT
37SURVEYS
BUSINESSSUCCESSSTORIES
ITUNESAPP
REVIEWSCLIENTDECKS
COMPETIT IVEANALYSIS
COMPARATIVEANALYSIS
12INTERVIEWS
SOURCES INTERVIEWS 3 TYPESCONCIERGES
GOAL Understand how to incorporate concierge experience into design.
TECH ENTHUSIASTSGOAL Understand smartwatch user behavior.COMPARATIVE ANALYSIS Moto360, Pebble,
Suunto, Samsung Galaxy Gear
DINERSGOAL Understand diner expectations,
context, and behavior.
INTERVIEW HIGHLIGHTSCONCIERGES:
Always offer an alternative if you cant accommodate the original request.- LEAH / 29 Y.O. / PR MANAGER / NYC
TECH ENTHUSIASTS:
I use the Moto 360 exclusively for short responses. Usually when in transit somewhere when walking or carrying something.- LUCAS / 25 Y.O. / INTERACTION DESIGNER / BALTIMORE
DINERS:
Good customer service is when a place goes a little bit out of its way to make an evening memorable with personal touches, or personal recommendations.- LISA / 32 Y.O. / MARKETING MANAGER / SAN FRANCISCO
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
THE NATIVE EXPERIENCEWELCOME SCREEN RESTAURANTS LISTING RESTAURANT PROFILE PAYMENT CONFIRMATION RATINGS SCREEN
TT
CONCIERGE SERVICEReserve handles everything from restaurant suggestions
to payment-processing after a meal.
V.I.P. SELECTIONSOffers a highly curated & exclusive listing of restaurants.
DESIGNED WITH RESTAURANTS IN MINDNo fee for restaurants to join.
Flexible - doesnt force them to hold tables.Private feedback from Reserve diners.
HOW IS RESERVE DIFFERENT?
Conducted stakeholder interviews at Reserve HQ to determine project scope, technical constraints, business goals, etc.
Assessed Version 1.3 of the native app and Apple Watch HIGs to determine potential MVP feature set.
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
Identify the most essential functions of the native app to transfer to the Apple Watch design, and create an MVP feature set that will work within the technical constraints of Apple Watch, as well as Reserves most updated native experience.
SOLUTION
Provide an easy way of responding to notifications on the Apple Watch.
OPPORTUNITY
As Project Manager, I managed tasks for my team of 3, maintained client communication and produced research reports and testing insights for clients.
As a UX Designer, I researched, designed, user tested and iterated ideas for Watch design within Apple Watch Human Interface Guidelines.
MY ROLE
This was a 3 week client project done in Feb 2015 during General Assemblys User Experience Design course.
Reserve wanted us to research and develop concepts for an Apple WatchKit extension of their existing iOS app.
OBJECTIVE
Reserve is a personal concierge for creating seamless dining experiences.
The most challenging, yet exciting part was learning the technical and design constraints of a completely new, untested platform. It was thrilling to discover what is possible on the Apple Watch, and how we could design both for and around its limitations.
PROJECT HIGHLIGHT
CLIENT PROJECT:
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
PROTOTYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
http://invis.io/6G23ALL78
PROTOTYPE
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
SKETCHES & PAPER PROTOTYPES
A/B tested copy for feature discoverability and user expectations at lo-fi, mid, & hi-fi levels.
Select a Topic / Course Topics / More Course Topics / Course Topics
Created based on user stories for each persona.
USER FLOWS
TESTING INSIGHTSCustomize Your Course
vs.More Course Topics
Customize Your Course makes me think I can add or remove lessons from the original game tree.
FALSEUSER EXPECTATIONS:
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
The Community Enagager
KEY TAKEAWAYSSynthesized key takeaways from surveys and interviews.
Identified MVP features based on prioritzation & tech constraints.
HOW? Conversations, ListeningSOLUTION Conversation Exercise
WHY? Culture, Work, TravelSOLUTION Topical Game Trees
USER STORYThe patient in room 7 always smiles and greets me in Spanish - I want to be able to respond!
FEATURES PRIORITIZATION
Low/High Effort vs. Nice-to-Have/Essential
The Casual Learner
The Immersive Traveler
Persona profiles created from survey and interview key takeaways.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
SCREENER SURVEYSWHY do people learn a language?
USER INTERVIEWSHOW do people learn a language?
TT
Ben, 24Opted to learn more Japanese in college after watching anime in Japanese with subtitles for years.
Judith, 22Im currently living in South Korea and interested in East Asian foreign policy as a career, so Im learning Korean.
Katie, 23I used to live in the the Bronx, where Spanish is widely spoken, so I wanted to feel more connected.
Alivia, 21Watching a movie helps with picking up vocabulary and hearing pronunciations. The more exposure the better - you hear what makes sense.
Carolyn, 28Was traveling to Barcelona so wanted to learn some of the language to get around.
Samira, 27I listened to Pimsleur because it was conversational, more human. Other apps would be like Hi. How are you? I am well. No one speaks like that!
CULTURE
LISTENING CONVERSATION
CULTURE
TRAVELTRAVEL & WORK
: 46 survey participants: 87% Apple iOS users: 15-20 min/learning session
: 4 interviews total 1 dedicated Duolingo user 2 mixed learners 1 non-Duolingo learner
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
In school, you do a lot of tests and memorization, but Duolingo combines it all to make it fun It doesnt feel like youre actually memorizing things, but after a while you just know the words. Its tricking you that youre playing a game, but youre actually learning.
THE BRANDJenny, 22, daily Duolingo user
TT
Make free language available to anyone in the world.
No hidden ads, fees or paid 'premium' content - a rarity.
COMPARATIVE ANALYSIS: Broke down how they utilized conversation.
Voice, tone & style should be friendly, witty and fun.
Game-fied learning.
Areas of opportunity for Duolingo.
Duolingo Busuu Rosetta Stone Pimsleur
Cost Free Free* $159** $99.95
Platform App App Online, access to apps & games MP3/Audio
Choice of Course Topics? Teach Through Conversation?
COMPETITIVE ANALYSISWhat features are available?
*In-app feature purchases**$159 (6mo. subscription), $199 (12mo.), $229 (36mo.)
To design a solution, we looked into why and how people learn languages, which resulted in a feature which allowed users to customize their lessons by topical game trees, as well as a conversation exercise designed to help users follow the flow of a conversation.
SOLUTION
Allow users to customize their learning experience based on their motivation to learn a new language.
OPPORTUNITY
As a User Researcher, I conducted surveys, user interviews, competitive & comparative analysis, and created personas and user flows.
As a UI Designer, I sketched and user-tested paper prototypes, and created hi-fidelity mockups using Sketch.
MY ROLE
This was a 2 week project done in Jan 2015 during General Assemblys User Experience Design course.
Solve the issue of Americans want to learn to speak a foreign language.
OBJECTIVE
Duollingo is a free, gamefied app for learning a new language!
The best part was digging into the motivations of people who want to learn a language. Ive always been passionate about facilitating learning, and this project gave me a first glimpse of what that process could look like from the design side.
PROJECT HIGHLIGHT
STUDENT PROJECT:
design tools
OMNIGRAFFLE
INVISION
SKETCH PHOTOSHOP
AXURE
KEYNOTE POWERPOINT PREZI
user-centered design process
DESIGNprototype test package
CONCEPTsketch test validate iterate
RESEARCHobserve ask listen
DELIVERABLES screener surveys interviews competitive analysis comparative analysis information architecture card-sorting
DELIVERABLES key takeaways affinity maps personas user stories features prioritization
DELIVERABLES sketches paper prototypes user flows sitemaps testing insights mid-fidelity wireframes
DELIVERABLES hi-fidelity mockups annotated wireframes clickable prototype
TYPES brand research user research tech research
INSIGHTprocess extract prioritize
Why do I choose to studyuser experiences?Id like to explore how UX can advocate for small, but real changes in the ways people experience discovery and learning.
For a lover of arts and humanities, UX has given me the tools to focus abstracts into tangibles with real impact.
J A N I C E T S A Iux portfolio 2015
Im a learner with a heart for peoples stories. For me, empathy lies at the intersection between tech and design.
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
http://9m08rr.axshare.com
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
FUTURE FEATURE IDEAS HIGHLIGHTS
SURPRISE + DELIGHTSOLUTION The restaurant can see that a user is interested in them from their Venue app, and sends an offer if there are open tables.
IN-WATCH VOICE-RECORDED TECHNOLOGYSOLUTION Offer voice recordings for feedback during the Rate Your Experience survey.
LOCATION-BASED REMINDERSSOLUTION Notify users when to depart for their restaurant reservation based on their location.
WHY The microphone is the most accessible way to leave feedback on the watch.
HOW Access the watchs microphone and recording capabilities.
(for RESERVE versions 1.3+!)
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
Apple Watch HIGs were referenced throughout the entire design process.
PAPER PROTOTYPES
RATE YOUR EXPERIENCE - VER. 1 RATE YOUR EXPERIENCE -VER. 2 (MID-FI)
USER FLOWS
Changes are reflected in the simplification between user flows.
TESTING INSIGHTS
No one wants to scroll on a watch.- COLE / 37 Y.O. / WEB DEVELOPER / NYC
Just make it lazy. People are lazy. They want the least amount of reading and work."- SHARON / 35 Y.O. / SOCIAL MEDIA STRATEGIST / AUSTIN
Tap Dismiss
Long Look:
Shoulder time offer from restaurant
Short Look:
Shoulder time
notification
Tap Rate Experience
Tap DismissLong Look:
Shoulder time offer from restaurant
Short Look: Shoulder time
notification
Tap Rate Experience
Ver. 1 used the paginated app style, involving more user actions: tap star/scroll (repeat x3)
Ver. 2 was designed to minimize scrolling and fit on one page.
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
VIBRATING NOTIFICATIONS ARE ESSENTIAL & EFFECTIVESOLUTION Save for core call-to-actions
ACCESSIBLE NOTIFICATIONS ADD CONVENIENCESOLUTION Keep content concise enough for quick glances
BRAND LOYALTY PURCHASES WITHIN SAME OSSOLUTION Make watch extension available for Android & iPhone users
SIMPLIFIED USAGE OVER TIMESOLUTION Keep features to a bare minimum with easy onboarding
KEY TAKEAWAYS
NOTIFICATIONS
Shoulder Time Offer Reminders
CONFIRMATIONS
Reservations Request Added Payment
RECOMMENDATIONS
Suggested Offers
MVP FEATURE SET (VER. 1.3)
LYLES USER STORY
AFFINITY MAPSSynthesized key takeaways from
3 types of interviews to determine MVP feature set.
Lyle is one of two personas we generated fom interviews. He is curious - the type who is always willing to try out new restaurants and tech to improve his lifestyle.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
TT
37SURVEYS
BUSINESSSUCCESSSTORIES
ITUNESAPP
REVIEWSCLIENTDECKS
COMPETIT IVEANALYSIS
COMPARATIVEANALYSIS
12INTERVIEWS
SOURCES INTERVIEWS 3 TYPESCONCIERGES
GOAL Understand how to incorporate concierge experience into design.
TECH ENTHUSIASTSGOAL Understand smartwatch user behavior.COMPARATIVE ANALYSIS Moto360, Pebble,
Suunto, Samsung Galaxy Gear
DINERSGOAL Understand diner expectations,
context, and behavior.
INTERVIEW HIGHLIGHTSCONCIERGES:
Always offer an alternative if you cant accommodate the original request.- LEAH / 29 Y.O. / PR MANAGER / NYC
TECH ENTHUSIASTS:
I use the Moto 360 exclusively for short responses. Usually when in transit somewhere when walking or carrying something.- LUCAS / 25 Y.O. / INTERACTION DESIGNER / BALTIMORE
DINERS:
Good customer service is when a place goes a little bit out of its way to make an evening memorable with personal touches, or personal recommendations.- LISA / 32 Y.O. / MARKETING MANAGER / SAN FRANCISCO
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
THE NATIVE EXPERIENCEWELCOME SCREEN RESTAURANTS LISTING RESTAURANT PROFILE PAYMENT CONFIRMATION RATINGS SCREEN
TT
CONCIERGE SERVICEReserve handles everything from restaurant suggestions
to payment-processing after a meal.
V.I.P. SELECTIONSOffers a highly curated & exclusive listing of restaurants.
DESIGNED WITH RESTAURANTS IN MINDNo fee for restaurants to join.
Flexible - doesnt force them to hold tables.Private feedback from Reserve diners.
HOW IS RESERVE DIFFERENT?
Conducted stakeholder interviews at Reserve HQ to determine project scope, technical constraints, business goals, etc.
Assessed Version 1.3 of the native app and Apple Watch HIGs to determine potential MVP feature set.
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
Identify the most essential functions of the native app to transfer to the Apple Watch design, and create an MVP feature set that will work within the technical constraints of Apple Watch, as well as Reserves most updated native experience.
SOLUTION
Provide an easy way of responding to notifications on the Apple Watch.
OPPORTUNITY
As Project Manager, I managed tasks for my team of 3, maintained client communication and produced research reports and testing insights for clients.
As a UX Designer, I researched, designed, user tested and iterated ideas for Watch design within Apple Watch Human Interface Guidelines.
MY ROLE
This was a 3 week client project done in Feb 2015 during General Assemblys User Experience Design course.
Reserve wanted us to research and develop concepts for an Apple WatchKit extension of their existing iOS app.
OBJECTIVE
Reserve is a personal concierge for creating seamless dining experiences.
The most challenging, yet exciting part was learning the technical and design constraints of a completely new, untested platform. It was thrilling to discover what is possible on the Apple Watch, and how we could design both for and around its limitations.
PROJECT HIGHLIGHT
CLIENT PROJECT:
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
PROTOTYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
http://invis.io/6G23ALL78
PROTOTYPE
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
SKETCHES & PAPER PROTOTYPES
A/B tested copy for feature discoverability and user expectations at lo-fi, mid, & hi-fi levels.
Select a Topic / Course Topics / More Course Topics / Course Topics
Created based on user stories for each persona.
USER FLOWS
TESTING INSIGHTSCustomize Your Course
vs.More Course Topics
Customize Your Course makes me think I can add or remove lessons from the original game tree.
FALSEUSER EXPECTATIONS:
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
The Community Enagager
KEY TAKEAWAYSSynthesized key takeaways from surveys and interviews.
Identified MVP features based on prioritzation & tech constraints.
HOW? Conversations, ListeningSOLUTION Conversation Exercise
WHY? Culture, Work, TravelSOLUTION Topical Game Trees
USER STORYThe patient in room 7 always smiles and greets me in Spanish - I want to be able to respond!
FEATURES PRIORITIZATION
Low/High Effort vs. Nice-to-Have/Essential
The Casual Learner
The Immersive Traveler
Persona profiles created from survey and interview key takeaways.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
SCREENER SURVEYSWHY do people learn a language?
USER INTERVIEWSHOW do people learn a language?
TT
Ben, 24Opted to learn more Japanese in college after watching anime in Japanese with subtitles for years.
Judith, 22Im currently living in South Korea and interested in East Asian foreign policy as a career, so Im learning Korean.
Katie, 23I used to live in the the Bronx, where Spanish is widely spoken, so I wanted to feel more connected.
Alivia, 21Watching a movie helps with picking up vocabulary and hearing pronunciations. The more exposure the better - you hear what makes sense.
Carolyn, 28Was traveling to Barcelona so wanted to learn some of the language to get around.
Samira, 27I listened to Pimsleur because it was conversational, more human. Other apps would be like Hi. How are you? I am well. No one speaks like that!
CULTURE
LISTENING CONVERSATION
CULTURE
TRAVELTRAVEL & WORK
: 46 survey participants: 87% Apple iOS users: 15-20 min/learning session
: 4 interviews total 1 dedicated Duolingo user 2 mixed learners 1 non-Duolingo learner
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
In school, you do a lot of tests and memorization, but Duolingo combines it all to make it fun It doesnt feel like youre actually memorizing things, but after a while you just know the words. Its tricking you that youre playing a game, but youre actually learning.
THE BRANDJenny, 22, daily Duolingo user
TT
Make free language available to anyone in the world.
No hidden ads, fees or paid 'premium' content - a rarity.
COMPARATIVE ANALYSIS: Broke down how they utilized conversation.
Voice, tone & style should be friendly, witty and fun.
Game-fied learning.
Areas of opportunity for Duolingo.
Duolingo Busuu Rosetta Stone Pimsleur
Cost Free Free* $159** $99.95
Platform App App Online, access to apps & games MP3/Audio
Choice of Course Topics? Teach Through Conversation?
COMPETITIVE ANALYSISWhat features are available?
*In-app feature purchases**$159 (6mo. subscription), $199 (12mo.), $229 (36mo.)
To design a solution, we looked into why and how people learn languages, which resulted in a feature which allowed users to customize their lessons by topical game trees, as well as a conversation exercise designed to help users follow the flow of a conversation.
SOLUTION
Allow users to customize their learning experience based on their motivation to learn a new language.
OPPORTUNITY
As a User Researcher, I conducted surveys, user interviews, competitive & comparative analysis, and created personas and user flows.
As a UI Designer, I sketched and user-tested paper prototypes, and created hi-fidelity mockups using Sketch.
MY ROLE
This was a 2 week project done in Jan 2015 during General Assemblys User Experience Design course.
Solve the issue of Americans want to learn to speak a foreign language.
OBJECTIVE
Duollingo is a free, gamefied app for learning a new language!
The best part was digging into the motivations of people who want to learn a language. Ive always been passionate about facilitating learning, and this project gave me a first glimpse of what that process could look like from the design side.
PROJECT HIGHLIGHT
STUDENT PROJECT:
design tools
OMNIGRAFFLE
INVISION
SKETCH PHOTOSHOP
AXURE
KEYNOTE POWERPOINT PREZI
user-centered design process
DESIGNprototype test package
CONCEPTsketch test validate iterate
RESEARCHobserve ask listen
DELIVERABLES screener surveys interviews competitive analysis comparative analysis information architecture card-sorting
DELIVERABLES key takeaways affinity maps personas user stories features prioritization
DELIVERABLES sketches paper prototypes user flows sitemaps testing insights mid-fidelity wireframes
DELIVERABLES hi-fidelity mockups annotated wireframes clickable prototype
TYPES brand research user research tech research
INSIGHTprocess extract prioritize
Why do I choose to studyuser experiences?Id like to explore how UX can advocate for small, but real changes in the ways people experience discovery and learning.
As a lover of arts and humanities, UX has given me the tools to focus abstracts into tangibles with real impact.
J A N I C E T S A Iux portfolio 2015
Im a learner with a heart for peoples stories. For me, empathy lies at the intersection between tech and design.
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
http://9m08rr.axshare.com
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
FUTURE FEATURE IDEAS HIGHLIGHTS
SURPRISE + DELIGHTSOLUTION The restaurant can see that a user is interested in them from their Venue app, and sends an offer if there are open tables.
IN-WATCH VOICE-RECORDED TECHNOLOGYSOLUTION Offer voice recordings for feedback during the Rate Your Experience survey.
LOCATION-BASED REMINDERSSOLUTION Notify users when to depart for their restaurant reservation based on their location.
WHY The microphone is the most accessible way to leave feedback on the watch.
HOW Access the watchs microphone and recording capabilities.
(for RESERVE versions 1.3+!)
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
Apple Watch HIGs were referenced throughout the entire design process.
PAPER PROTOTYPES
RATE YOUR EXPERIENCE - VER. 1 RATE YOUR EXPERIENCE -VER. 2 (MID-FI)
USER FLOWS
Changes are reflected in the simplification between user flows.
TESTING INSIGHTS
No one wants to scroll on a watch.- COLE / 37 Y.O. / WEB DEVELOPER / NYC
Just make it lazy. People are lazy. They want the least amount of reading and work."- SHARON / 35 Y.O. / SOCIAL MEDIA STRATEGIST / AUSTIN
Tap Dismiss
Long Look:
Shoulder time offer from restaurant
Short Look:
Shoulder time
notification
Tap Rate Experience
Tap DismissLong Look:
Shoulder time offer from restaurant
Short Look: Shoulder time
notification
Tap Rate Experience
Ver. 1 used the paginated app style, involving more user actions: tap star/scroll (repeat x3)
Ver. 2 was designed to minimize scrolling and fit on one page.
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
VIBRATING NOTIFICATIONS ARE ESSENTIAL & EFFECTIVESOLUTION Save for core call-to-actions
ACCESSIBLE NOTIFICATIONS ADD CONVENIENCESOLUTION Keep content concise enough for quick glances
BRAND LOYALTY PURCHASES WITHIN SAME OSSOLUTION Make watch extension available for Android & iPhone users
SIMPLIFIED USAGE OVER TIMESOLUTION Keep features to a bare minimum with easy onboarding
KEY TAKEAWAYS
NOTIFICATIONS
Shoulder Time Offer Reminders
CONFIRMATIONS
Reservations Request Added Payment
RECOMMENDATIONS
Suggested Offers
MVP FEATURE SET (VER. 1.3)
LYLES USER STORY
AFFINITY MAPSSynthesized key takeaways from
3 types of interviews to determine MVP feature set.
Lyle is one of two personas we generated fom interviews. He is curious - the type who is always willing to try out new restaurants and tech to improve his lifestyle.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
TT
37SURVEYS
BUSINESSSUCCESSSTORIES
ITUNESAPP
REVIEWSCLIENTDECKS
COMPETIT IVEANALYSIS
COMPARATIVEANALYSIS
12INTERVIEWS
SOURCES INTERVIEWS 3 TYPESCONCIERGES
GOAL Understand how to incorporate concierge experience into design.
TECH ENTHUSIASTSGOAL Understand smartwatch user behavior.COMPARATIVE ANALYSIS Moto360, Pebble,
Suunto, Samsung Galaxy Gear
DINERSGOAL Understand diner expectations,
context, and behavior.
INTERVIEW HIGHLIGHTSCONCIERGES:
Always offer an alternative if you cant accommodate the original request.- LEAH / 29 Y.O. / PR MANAGER / NYC
TECH ENTHUSIASTS:
I use the Moto 360 exclusively for short responses. Usually when in transit somewhere when walking or carrying something.- LUCAS / 25 Y.O. / INTERACTION DESIGNER / BALTIMORE
DINERS:
Good customer service is when a place goes a little bit out of its way to make an evening memorable with personal touches, or personal recommendations.- LISA / 32 Y.O. / MARKETING MANAGER / SAN FRANCISCO
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
THE NATIVE EXPERIENCEWELCOME SCREEN RESTAURANTS LISTING RESTAURANT PROFILE PAYMENT CONFIRMATION RATINGS SCREEN
TT
CONCIERGE SERVICEReserve handles everything from restaurant suggestions
to payment-processing after a meal.
V.I.P. SELECTIONSOffers a highly curated & exclusive listing of restaurants.
DESIGNED WITH RESTAURANTS IN MINDNo fee for restaurants to join.
Flexible - doesnt force them to hold tables.Private feedback from Reserve diners.
HOW IS RESERVE DIFFERENT?
Conducted stakeholder interviews at Reserve HQ to determine project scope, technical constraints, business goals, etc.
Assessed Version 1.3 of the native app and Apple Watch HIGs to determine potential MVP feature set.
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
Identify the most essential functions of the native app to transfer to the Apple Watch design, and create an MVP feature set that will work within the technical constraints of Apple Watch, as well as Reserves most updated native experience.
SOLUTION
Provide an easy way of responding to notifications on the Apple Watch.
OPPORTUNITY
As Project Manager, I managed tasks for my team of 3, maintained client communication and produced research reports and testing insights for clients.
As a UX Designer, I researched, designed, user tested and iterated ideas for Watch design within Apple Watch Human Interface Guidelines.
MY ROLE
This was a 3 week client project done in Feb 2015 during General Assemblys User Experience Design course.
Reserve wanted us to research and develop concepts for an Apple WatchKit extension of their existing iOS app.
OBJECTIVE
Reserve is a personal concierge for creating seamless dining experiences.
The most challenging, yet exciting part was learning the technical and design constraints of a completely new, untested platform. It was thrilling to discover what is possible on the Apple Watch, and how we could design both for and around its limitations.
PROJECT HIGHLIGHT
CLIENT PROJECT:
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
PROTOTYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
http://invis.io/6G23ALL78
PROTOTYPE
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
SKETCHES & PAPER PROTOTYPES
A/B tested copy for feature discoverability and user expectations at lo-fi, mid, & hi-fi levels.
Select a Topic / Course Topics / More Course Topics / Course Topics
Created based on user stories for each persona.
USER FLOWS
TESTING INSIGHTSCustomize Your Course
vs.More Course Topics
Customize Your Course makes me think I can add or remove lessons from the original game tree.
FALSEUSER EXPECTATIONS:
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
The Community Enagager
KEY TAKEAWAYSSynthesized key takeaways from surveys and interviews.
Identified MVP features based on prioritzation & tech constraints.
HOW? Conversations, ListeningSOLUTION Conversation Exercise
WHY? Culture, Work, TravelSOLUTION Topical Game Trees
USER STORYThe patient in room 7 always smiles and greets me in Spanish - I want to be able to respond!
FEATURES PRIORITIZATION
Low/High Effort vs. Nice-to-Have/Essential
The Casual Learner
The Immersive Traveler
Persona profiles created from survey and interview key takeaways.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
SCREENER SURVEYSWHY do people learn a language?
USER INTERVIEWSHOW do people learn a language?
TT
Ben, 24Opted to learn more Japanese in college after watching anime in Japanese with subtitles for years.
Judith, 22Im currently living in South Korea and interested in East Asian foreign policy as a career, so Im learning Korean.
Katie, 23I used to live in the the Bronx, where Spanish is widely spoken, so I wanted to feel more connected.
Alivia, 21Watching a movie helps with picking up vocabulary and hearing pronunciations. The more exposure the better - you hear what makes sense.
Carolyn, 28Was traveling to Barcelona so wanted to learn some of the language to get around.
Samira, 27I listened to Pimsleur because it was conversational, more human. Other apps would be like Hi. How are you? I am well. No one speaks like that!
CULTURE
LISTENING CONVERSATION
CULTURE
TRAVELTRAVEL & WORK
: 46 survey participants: 87% Apple iOS users: 15-20 min/learning session
: 4 interviews total 1 dedicated Duolingo user 2 mixed learners 1 non-Duolingo learner
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
In school, you do a lot of tests and memorization, but Duolingo combines it all to make it fun It doesnt feel like youre actually memorizing things, but after a while you just know the words. Its tricking you that youre playing a game, but youre actually learning.
THE BRANDJenny, 22, daily Duolingo user
TT
Make free language available to anyone in the world.
No hidden ads, fees or paid 'premium' content - a rarity.
COMPARATIVE ANALYSIS: Broke down how they utilized conversation.
Voice, tone & style should be friendly, witty and fun.
Game-fied learning.
Areas of opportunity for Duolingo.
Duolingo Busuu Rosetta Stone Pimsleur
Cost Free Free* $159** $99.95
Platform App App Online, access to apps & games MP3/Audio
Choice of Course Topics? Teach Through Conversation?
COMPETITIVE ANALYSISWhat features are available?
*In-app feature purchases**$159 (6mo. subscription), $199 (12mo.), $229 (36mo.)
To design a solution, we looked into why and how people learn languages, which resulted in a feature which allowed users to customize their lessons by topical game trees, as well as a conversation exercise designed to help users follow the flow of a conversation.
SOLUTION
Allow users to customize their learning experience based on their motivation to learn a new language.
OPPORTUNITY
As a User Researcher, I conducted surveys, user interviews, competitive & comparative analysis, and created personas and user flows.
As a UI Designer, I sketched and user-tested paper prototypes, and created hi-fidelity mockups using Sketch.
MY ROLE
This was a 2 week project done in Jan 2015 during General Assemblys User Experience Design course.
Solve the issue of Americans want to learn to speak a foreign language.
OBJECTIVE
Duollingo is a free, gamefied app for learning a new language!
The best part was digging into the motivations of people who want to learn a language. Ive always been passionate about facilitating learning, and this project gave me a first glimpse of what that process could look like from the design side.
PROJECT HIGHLIGHT
STUDENT PROJECT:
design tools
OMNIGRAFFLE
INVISION
SKETCH PHOTOSHOP
AXURE
KEYNOTE POWERPOINT PREZI
user-centered design process
DESIGNprototype test package
CONCEPTsketch test validate iterate
RESEARCHobserve ask listen
DELIVERABLES screener surveys interviews competitive analysis comparative analysis information architecture card-sorting
DELIVERABLES key takeaways affinity maps personas user stories features prioritization
DELIVERABLES sketches paper prototypes user flows sitemaps testing insights mid-fidelity wireframes
DELIVERABLES hi-fidelity mockups annotated wireframes clickable prototype
TYPES brand research user research tech research
INSIGHTprocess extract prioritize
Why do I choose to studyuser experiences?Id like to explore how UX can advocate for small, but real changes in the ways people experience discovery and learning.
For a lover of arts and humanities, UX has given me the tools to focus abstracts into tangibles with real impact.
J A N I C E T S A Iux portfolio 2015
Im a learner with a heart for peoples stories. I bring empathy to the intersection between tech and design.
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
http://9m08rr.axshare.com
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
FUTURE FEATURE IDEAS HIGHLIGHTS
SURPRISE + DELIGHTSOLUTION The restaurant can see that a user is interested in them from their Venue app, and sends an offer if there are open tables.
IN-WATCH VOICE-RECORDED TECHNOLOGYSOLUTION Offer voice recordings for feedback during the Rate Your Experience survey.
LOCATION-BASED REMINDERSSOLUTION Notify users when to depart for their restaurant reservation based on their location.
WHY The microphone is the most accessible way to leave feedback on the watch.
HOW Access the watchs microphone and recording capabilities.
(for RESERVE versions 1.3+!)
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
Apple Watch HIGs were referenced throughout the entire design process.
PAPER PROTOTYPES
RATE YOUR EXPERIENCE - VER. 1 RATE YOUR EXPERIENCE -VER. 2 (MID-FI)
USER FLOWS
Changes are reflected in the simplification between user flows.
TESTING INSIGHTS
No one wants to scroll on a watch.- COLE / 37 Y.O. / WEB DEVELOPER / NYC
Just make it lazy. People are lazy. They want the least amount of reading and work."- SHARON / 35 Y.O. / SOCIAL MEDIA STRATEGIST / AUSTIN
Tap Dismiss
Long Look:
Shoulder time offer from restaurant
Short Look:
Shoulder time
notification
Tap Rate Experience
Tap DismissLong Look:
Shoulder time offer from restaurant
Short Look: Shoulder time
notification
Tap Rate Experience
Ver. 1 used the paginated app style, involving more user actions: tap star/scroll (repeat x3)
Ver. 2 was designed to minimize scrolling and fit on one page.
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
VIBRATING NOTIFICATIONS ARE ESSENTIAL & EFFECTIVESOLUTION Save for core call-to-actions
ACCESSIBLE NOTIFICATIONS ADD CONVENIENCESOLUTION Keep content concise enough for quick glances
BRAND LOYALTY PURCHASES WITHIN SAME OSSOLUTION Make watch extension available for Android & iPhone users
SIMPLIFIED USAGE OVER TIMESOLUTION Keep features to a bare minimum with easy onboarding
KEY TAKEAWAYS
NOTIFICATIONS
Shoulder Time Offer Reminders
CONFIRMATIONS
Reservations Request Added Payment
RECOMMENDATIONS
Suggested Offers
MVP FEATURE SET (VER. 1.3)
LYLES USER STORY
AFFINITY MAPSSynthesized key takeaways from
3 types of interviews to determine MVP feature set.
Lyle is one of two personas we generated fom interviews. He is curious - the type who is always willing to try out new restaurants and tech to improve his lifestyle.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
TT
37SURVEYS
BUSINESSSUCCESSSTORIES
ITUNESAPP
REVIEWSCLIENTDECKS
COMPETIT IVEANALYSIS
COMPARATIVEANALYSIS
12INTERVIEWS
SOURCES INTERVIEWS 3 TYPESCONCIERGES
GOAL Understand how to incorporate concierge experience into design.
TECH ENTHUSIASTSGOAL Understand smartwatch user behavior.COMPARATIVE ANALYSIS Moto360, Pebble,
Suunto, Samsung Galaxy Gear
DINERSGOAL Understand diner expectations,
context, and behavior.
INTERVIEW HIGHLIGHTSCONCIERGES:
Always offer an alternative if you cant accommodate the original request.- LEAH / 29 Y.O. / PR MANAGER / NYC
TECH ENTHUSIASTS:
I use the Moto 360 exclusively for short responses. Usually when in transit somewhere when walking or carrying something.- LUCAS / 25 Y.O. / INTERACTION DESIGNER / BALTIMORE
DINERS:
Good customer service is when a place goes a little bit out of its way to make an evening memorable with personal touches, or personal recommendations.- LISA / 32 Y.O. / MARKETING MANAGER / SAN FRANCISCO
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
THE NATIVE EXPERIENCEWELCOME SCREEN RESTAURANTS LISTING RESTAURANT PROFILE PAYMENT CONFIRMATION RATINGS SCREEN
TT
CONCIERGE SERVICEReserve handles everything from restaurant suggestions
to payment-processing after a meal.
V.I.P. SELECTIONSOffers a highly curated & exclusive listing of restaurants.
DESIGNED WITH RESTAURANTS IN MINDNo fee for restaurants to join.
Flexible - doesnt force them to hold tables.Private feedback from Reserve diners.
HOW IS RESERVE DIFFERENT?
Conducted stakeholder interviews at Reserve HQ to determine project scope, technical constraints, business goals, etc.
Assessed Version 1.3 of the native app and Apple Watch HIGs to determine potential MVP feature set.
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
Identify the most essential functions of the native app to transfer to the Apple Watch design, and create an MVP feature set that will work within the technical constraints of Apple Watch, as well as Reserves most updated native experience.
SOLUTION
Provide an easy way of responding to notifications on the Apple Watch.
OPPORTUNITY
As Project Manager, I managed tasks for my team of 3, maintained client communication and produced research reports and testing insights for clients.
As a UX Designer, I researched, designed, user tested and iterated ideas for Watch design within Apple Watch Human Interface Guidelines.
MY ROLE
This was a 3 week client project done in Feb 2015 during General Assemblys User Experience Design course.
Reserve wanted us to research and develop concepts for an Apple WatchKit extension of their existing iOS app.
OBJECTIVE
Reserve is a personal concierge for creating seamless dining experiences.
The most challenging, yet exciting part was learning the technical and design constraints of a completely new, untested platform. It was thrilling to discover what is possible on the Apple Watch, and how we could design both for and around its limitations.
PROJECT HIGHLIGHT
CLIENT PROJECT:
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
PROTOTYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
http://invis.io/6G23ALL78
PROTOTYPE
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
SKETCHES & PAPER PROTOTYPES
A/B tested copy for feature discoverability and user expectations at lo-fi, mid, & hi-fi levels.
Select a Topic / Course Topics / More Course Topics / Course Topics
Created based on user stories for each persona.
USER FLOWS
TESTING INSIGHTSCustomize Your Course
vs.More Course Topics
Customize Your Course makes me think I can add or remove lessons from the original game tree.
FALSEUSER EXPECTATIONS:
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
The Community Enagager
KEY TAKEAWAYSSynthesized key takeaways from surveys and interviews.
Identified MVP features based on prioritzation & tech constraints.
HOW? Conversations, ListeningSOLUTION Conversation Exercise
WHY? Culture, Work, TravelSOLUTION Topical Game Trees
USER STORYThe patient in room 7 always smiles and greets me in Spanish - I want to be able to respond!
FEATURES PRIORITIZATION
Low/High Effort vs. Nice-to-Have/Essential
The Casual Learner
The Immersive Traveler
Persona profiles created from survey and interview key takeaways.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
SCREENER SURVEYSWHY do people learn a language?
USER INTERVIEWSHOW do people learn a language?
TT
Ben, 24Opted to learn more Japanese in college after watching anime in Japanese with subtitles for years.
Judith, 22Im currently living in South Korea and interested in East Asian foreign policy as a career, so Im learning Korean.
Katie, 23I used to live in the the Bronx, where Spanish is widely spoken, so I wanted to feel more connected.
Alivia, 21Watching a movie helps with picking up vocabulary and hearing pronunciations. The more exposure the better - you hear what makes sense.
Carolyn, 28Was traveling to Barcelona so wanted to learn some of the language to get around.
Samira, 27I listened to Pimsleur because it was conversational, more human. Other apps would be like Hi. How are you? I am well. No one speaks like that!
CULTURE
LISTENING CONVERSATION
CULTURE
TRAVELTRAVEL & WORK
: 46 survey participants: 87% Apple iOS users: 15-20 min/learning session
: 4 interviews total 1 dedicated Duolingo user 2 mixed learners 1 non-Duolingo learner
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
In school, you do a lot of tests and memorization, but Duolingo combines it all to make it fun It doesnt feel like youre actually memorizing things, but after a while you just know the words. Its tricking you that youre playing a game, but youre actually learning.
THE BRANDJenny, 22, daily Duolingo user
TT
Make free language available to anyone in the world.
No hidden ads, fees or paid 'premium' content - a rarity.
COMPARATIVE ANALYSIS: Broke down how they utilized conversation.
Voice, tone & style should be friendly, witty and fun.
Game-fied learning.
Areas of opportunity for Duolingo.
Duolingo Busuu Rosetta Stone Pimsleur
Cost Free Free* $159** $99.95
Platform App App Online, access to apps & games MP3/Audio
Choice of Course Topics? Teach Through Conversation?
COMPETITIVE ANALYSISWhat features are available?
*In-app feature purchases**$159 (6mo. subscription), $199 (12mo.), $229 (36mo.)
To design a solution, we looked into why and how people learn languages, which resulted in a feature which allowed users to customize their lessons by topical game trees, as well as a conversation exercise designed to help users follow the flow of a conversation.
SOLUTION
Allow users to customize their learning experience based on their motivation to learn a new language.
OPPORTUNITY
As a User Researcher, I conducted surveys, user interviews, competitive & comparative analysis, and created personas and user flows.
As a UI Designer, I sketched and user-tested paper prototypes, and created hi-fidelity mockups using Sketch.
MY ROLE
This was a 2 week project done in Jan 2015 during General Assemblys User Experience Design course.
Solve the issue of Americans want to learn to speak a foreign language.
OBJECTIVE
Duollingo is a free, gamefied app for learning a new language!
The best part was digging into the motivations of people who want to learn a language. Ive always been passionate about facilitating learning, and this project gave me a first glimpse of what that process could look like from the design side.
PROJECT HIGHLIGHT
STUDENT PROJECT:
design tools
OMNIGRAFFLE
INVISION
SKETCH PHOTOSHOP
AXURE
KEYNOTE POWERPOINT PREZI
user-centered design process
DESIGNprototype test package
CONCEPTsketch test validate iterate
RESEARCHobserve ask listen
DELIVERABLES screener surveys interviews competitive analysis comparative analysis information architecture card-sorting
DELIVERABLES key takeaways affinity maps personas user stories features prioritization
DELIVERABLES sketches paper prototypes user flows sitemaps testing insights mid-fidelity wireframes
DELIVERABLES hi-fidelity mockups annotated wireframes clickable prototype
TYPES brand research user research tech research
INSIGHTprocess extract prioritize
Why do I choose to studyuser experiences?Id like to explore how UX can advocate for small, but real changes in the ways people experience discovery and learning.
For a lover of arts and humanities, UX has given me the tools to focus abstracts into tangibles with real impact.
J A N I C E T S A Iux portfolio 2015
Im a learner with a heart for peoples stories. I bring empathy to the intersection between tech and design.
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant to the request container, for the original time & date requested.
Tap into each restaurant for details. Recommendations based on cuisine type, location, and ratings, with respect to users original request.
CONFIRMATION notification received once restaurant accepts request. First SHORT LOOK, then LONG LOOK will appear.
GO TO RESERVE APP pushes to native app for more functionality.
3.2
3.3
3.4
3.5
PROTOYPE
http://9m08rr.axshare.com
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
FUTURE FEATURE IDEAS HIGHLIGHTS
SURPRISE + DELIGHTSOLUTION The restaurant can see that a user is interested in them from their Venue app, and sends an offer if there are open tables.
IN-WATCH VOICE-RECORDED TECHNOLOGYSOLUTION Offer voice recordings for feedback during the Rate Your Experience survey.
LOCATION-BASED REMINDERSSOLUTION Notify users when to depart for their restaurant reservation based on their location.
WHY The microphone is the most accessible way to leave feedback on the watch.
HOW Access the watchs microphone and recording capabilities.
(for RESERVE versions 1.3+!)
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
Apple Watch HIGs were referenced throughout the entire design process.
PAPER PROTOTYPES
RATE YOUR EXPERIENCE - VER. 1 RATE YOUR EXPERIENCE -VER. 2 (MID-FI)
USER FLOWS
Changes are reflected in the simplification between user flows.
TESTING INSIGHTS
No one wants to scroll on a watch.- COLE / 37 Y.O. / WEB DEVELOPER / NYC
Just make it lazy. People are lazy. They want the least amount of reading and work."- SHARON / 35 Y.O. / SOCIAL MEDIA STRATEGIST / AUSTIN
Tap Dismiss
Long Look:
Shoulder time offer from restaurant
Short Look:
Shoulder time
notification
Tap Rate Experience
Tap DismissLong Look:
Shoulder time offer from restaurant
Short Look: Shoulder time
notification
Tap Rate Experience
Ver. 1 used the paginated app style, involving more user actions: tap star/scroll (repeat x3)
Ver. 2 was designed to minimize scrolling and fit on one page.
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
VIBRATING NOTIFICATIONS ARE ESSENTIAL & EFFECTIVESOLUTION Save for core call-to-actions
ACCESSIBLE NOTIFICATIONS ADD CONVENIENCESOLUTION Keep content concise enough for quick glances
BRAND LOYALTY PURCHASES WITHIN SAME OSSOLUTION Make watch extension available for Android & iPhone users
SIMPLIFIED USAGE OVER TIMESOLUTION Keep features to a bare minimum with easy onboarding
KEY TAKEAWAYS
NOTIFICATIONS
Shoulder Time Offer Reminders
CONFIRMATIONS
Reservations Request Added Payment
RECOMMENDATIONS
Suggested Offers
MVP FEATURE SET (VER. 1.3)
LYLES USER STORY
AFFINITY MAPSSynthesized key takeaways from
3 types of interviews to determine MVP feature set.
Lyle is one of two personas we generated fom interviews. He is curious - the type who is always willing to try out new restaurants and tech to improve his lifestyle.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
TT
37SURVEYS
BUSINESSSUCCESSSTORIES
ITUNESAPP
REVIEWSCLIENTDECKS
COMPETIT IVEANALYSIS
COMPARATIVEANALYSIS
12INTERVIEWS
SOURCES INTERVIEWS 3 TYPESCONCIERGES
GOAL Understand how to incorporate concierge experience into design.
TECH ENTHUSIASTSGOAL Understand smartwatch user behavior.COMPARATIVE ANALYSIS Moto360, Pebble,
Suunto, Samsung Galaxy Gear
DINERSGOAL Understand diner expectations,
context, and behavior.
INTERVIEW HIGHLIGHTSCONCIERGES:
Always offer an alternative if you cant accommodate the original request.- LEAH / 29 Y.O. / PR MANAGER / NYC
TECH ENTHUSIASTS:
I use the Moto 360 exclusively for short responses. Usually when in transit somewhere when walking or carrying something.- LUCAS / 25 Y.O. / INTERACTION DESIGNER / BALTIMORE
DINERS:
Good customer service is when a place goes a little bit out of its way to make an evening memorable with personal touches, or personal recommendations.- LISA / 32 Y.O. / MARKETING MANAGER / SAN FRANCISCO
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
THE NATIVE EXPERIENCEWELCOME SCREEN RESTAURANTS LISTING RESTAURANT PROFILE PAYMENT CONFIRMATION RATINGS SCREEN
TT
CONCIERGE SERVICEReserve handles everything from restaurant suggestions
to payment-processing after a meal.
V.I.P. SELECTIONSOffers a highly curated & exclusive listing of restaurants.
DESIGNED WITH RESTAURANTS IN MINDNo fee for restaurants to join.
Flexible - doesnt force them to hold tables.Private feedback from Reserve diners.
HOW IS RESERVE DIFFERENT?
Conducted stakeholder interviews at Reserve HQ to determine project scope, technical constraints, business goals, etc.
Assessed Version 1.3 of the native app and Apple Watch HIGs to determine potential MVP feature set.
stakeholder interviewstechnical researchbrand researchcompetitive analysiscomparative analysisscreener surveysinterviews
Identify the most essential functions of the native app to transfer to the Apple Watch design, and create an MVP feature set that will work within the technical constraints of Apple Watch, as well as Reserves most updated native experience.
SOLUTION
Provide an easy way of responding to notifications on the Apple Watch.
OPPORTUNITY
As Project Manager, I managed tasks for my team of 3, maintained client communication and produced research reports and testing insights for clients.
As a UX Designer, I researched, designed, user tested and iterated ideas for Watch design within Apple Watch Human Interface Guidelines.
MY ROLE
This was a 3 week client project done in Feb 2015 during General Assemblys User Experience Design course.
Reserve wanted us to research and develop concepts for an Apple WatchKit extension of their existing iOS app.
OBJECTIVE
Reserve is a personal concierge for creating seamless dining experiences.
The most challenging, yet exciting part was learning the technical and design constraints of a completely new, untested platform. It was thrilling to discover what is possible on the Apple Watch, and how we could design both for and around its limitations.
PROJECT HIGHLIGHT
CLIENT PROJECT:
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
PROTOTYPE
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototype
RESEARCH
FEATURE #1CUSTOMIZE LESSONS
Separate game tree based around TRAVEL specific material.
Instead of progressing linearly to get to a relevant lesson, tap for a list of topics.
1.3
SITUATION: Youre flying to Barcelona, and you just want to learn some Spanish to get you through the airport.
FEATURE #2LISTENING & CONVERSATION
1.1
2.1
2.2
2.3
1.2
Audio highlights and begins automatically.
Toggle ENGLISH text.START/PAUSE audio.
Tap a line to initiate audio from that point.
CONCEPTAudio highlights and begins automatically.
2.4
2.5
2.6
2.7
After user records and releases, flow of conversation continues.
Audio pauses here to indicate it is the users turn to speak.
Prompts user to utilize mic.
http://invis.io/6G23ALL78
PROTOTYPE
DESIGN
INSIGHT
CONCEPTsketch test validate iterate
RESEARCH
sketchespaper prototypesuser flowstesting insightsmid-fi wireframes
SKETCHES & PAPER PROTOTYPES
A/B tested copy for feature discoverability and user expectations at lo-fi, mid, & hi-fi levels.
Select a Topic / Course Topics / More Course Topics / Course Topics
Created based on user stories for each persona.
USER FLOWS
TESTING INSIGHTSCustomize Your Course
vs.More Course Topics
Customize Your Course makes me think I can add or remove lessons from the original game tree.
FALSEUSER EXPECTATIONS:
DESIGN
INSIGHTprocess extract prioritize
CONCEPT
RESEARCH
key takeawaysaffinity mapspersonasuser storiesfeatures prioritization
The Community Engager
KEY TAKEAWAYSSynthesized key takeaways from surveys and interviews.
Identified MVP features based on prioritzation & tech constraints.
HOW? Conversations, ListeningSOLUTION Conversation Exercise
WHY? Culture, Work, TravelSOLUTION Topical Game Trees
USER STORYThe patient in room 7 always smiles and greets me in Spanish - I want to be able to respond!
FEATURES PRIORITIZATION
Low/High Effort vs. Nice-to-Have/Essential
The Casual Learner
The Immersive Traveler
Persona profiles created from survey and interview key takeaways.
PERSONAS
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
SCREENER SURVEYSWHY do people learn a language?
USER INTERVIEWSHOW do people learn a language?
TT
Ben, 24Opted to learn more Japanese in college after watching anime in Japanese with subtitles for years.
Judith, 22Im currently living in South Korea and interested in East Asian foreign policy as a career, so Im learning Korean.
Katie, 23I used to live in the the Bronx, where Spanish is widely spoken, so I wanted to feel more connected.
Alivia, 21Watching a movie helps with picking up vocabulary and hearing pronunciations. The more exposure the better - you hear what makes sense.
Carolyn, 28Was traveling to Barcelona so wanted to learn some of the language to get around.
Samira, 27I listened to Pimsleur because it was conversational, more human. Other apps would be like Hi. How are you? I am well. No one speaks like that!
CULTURE
LISTENING CONVERSATION
CULTURE
TRAVELTRAVEL & WORK
: 46 survey participants: 87% Apple iOS users: 15-20 min/learning session
: 4 interviews total 1 dedicated Duolingo user 2 mixed learners 1 non-Duolingo learner
DESIGN
INSIGHT
CONCEPT
RESEARCHobserve ask listen
brand researchcompetitive analysiscomparative analysisscreener surveysuser interviews
In school, you do a lot of tests and memorization, but Duolingo combines it all to make it fun It doesnt feel like youre actually memorizing things, but after a while you just know the words. Its tricking you that youre playing a game, but youre actually learning.
THE BRANDJenny, 22, daily Duolingo user
TT
Make free language available to anyone in the world.
No hidden ads, fees or paid 'premium' content - a rarity.
COMPARATIVE ANALYSIS: Broke down how they utilized conversation.
Voice, tone & style should be friendly, witty and fun.
Game-fied learning.
Areas of opportunity for Duolingo.
Duolingo Busuu Rosetta Stone Pimsleur
Cost Free Free* $159** $99.95
Platform App App Online, access to apps & games MP3/Audio
Choice of Course Topics? Teach Through Conversation?
COMPETITIVE ANALYSISWhat features are available?
*In-app feature purchases**$159 (6mo. subscription), $199 (12mo.), $229 (36mo.)
To design a solution, we looked into why and how people learn languages, which resulted in a feature which allowed users to customize their lessons by topical game trees, as well as a conversation exercise designed to help users follow the flow of a conversation.
SOLUTION
Allow users to customize their learning experience based on their motivation to learn a new language.
OPPORTUNITY
As a User Researcher, I conducted surveys, user interviews, competitive & comparative analysis, and created personas and user flows.
As a UI Designer, I sketched and user-tested paper prototypes, and created hi-fidelity mockups using Sketch.
MY ROLE
This was a 2 week project done in Jan 2015 during General Assemblys User Experience Design course.
Solve the issue of Americans want to learn to speak a foreign language.
OBJECTIVE
Duolingo is a free, gamefied app for learning a new language!
The best part was digging into the motivations of people who want to learn a language. Ive always been passionate about facilitating learning, and this project gave me a first glimpse of what that process could look like from the design side.
PROJECT HIGHLIGHT
STUDENT PROJECT:
design tools
OMNIGRAFFLE
INVISION
SKETCH PHOTOSHOP
AXURE
KEYNOTE POWERPOINT PREZI
user-centered design process
DESIGNprototype test package
CONCEPTsketch test validate iterate
RESEARCHobserve ask listen
DELIVERABLES screener surveys interviews competitive analysis comparative analysis information architecture card-sorting
DELIVERABLES key takeaways affinity maps personas user stories features prioritization
DELIVERABLES sketches paper prototypes user flows sitemaps testing insights mid-fidelity wireframes
DELIVERABLES hi-fidelity mockups annotated wireframes clickable prototype
TYPES brand research user research tech research
INSIGHTprocess extract prioritize
Why do I choose to studyuser experiences?Id like to explore how UX can advocate for small, but real changes in the ways people experience discovery and learning.
As a lover of arts and humanities, UX has given me the tools to focus abstracts into tangibles with real impact.
J A N I C E T S A Iux portfolio 2015
Im a learner with a heart for peoples stories. For me, empathy lies at the intersection between tech and design.
-
Greater New York City Area
T H A N K Y O U !
[email protected]/in/janicetsaislideshare.net/JaniceTsai1Greater New York City Area
T H A N K Y O U !
INSIGHT
DESIGNprototype test package
hi-fidelity mockupsannotated wireframesclickable prototypenext stepsfuture feature ideas
RESEARCH
CONCEPT
UPCOMING RESERVATIONSContains list of upcoming restaurant reservations.
PENDING REQUESTSList of pending requests and status (e.g., Waitlisted)
RECOMMEND A RESTAURANTRecommendations will appear if a request has been started in native app and the watch has diners data.
INVITE FRIENDSInvite friends through Apple Contacts.
3.1
ANNOTATED WIREFRAMES
APPLE WATCH HOME
SEE RECOMMENDATIONS
SHORT LOOK: CONFIRMATION LONG LOOK: CONFIRMATION
RECOMMENDATION #1 PAGANI REQUEST ADDED
RESERVE WATCHKIT MENU
ADD REQUEST will add the selected restaurant