Download - Carolyn Jao UX Design Portfolio
ux portfolio 2015
CAROLYN JAO
I'm an efficient, execution-oriented UX designer who creates delightful designs and interactions that are grounded in research.I have experience designing for the web, mobile, film, and 3D animation platforms.
I’M CAROLYN, NICE TO MEET YOU!
I've worked as a film producer, illustrator, print designer, printmaker, drawing instructor, court translator, human trafficking victim counselor, and more.
Through my varied experiences, I strive to understand the people who I am designing for, everything from their motivation to what they aim to achieve.
I believe that User Experience is about bringing fluidity online and offline. Through the systems I design, I aim to empower and improve the lives of others.
!
RESEARCH
"
DESIGN
#
TEST
$
ITERATE
USER-CENTERED DESIGN PROCESS
Oscar Health is a new kind of insurance brand. Oscar aims to make using technology and design to make healthcare simple, intuitive, and human. In other words, the kind of healthcare we want for ourselves.
This was a 2 week project done in January, 2015 for my General Assembly User Experience Immersive Course.Create an extension of the existing Oscar Health app for the Apple Watch & Moto 360 X that integrate a system that contacts emergency responders in a quick and timely manner.
%
&
OBJECTIVE
'
(
OPPORTUNITY
Extend accident detection system to wearables - specifically the Moto 360, and the Apple Watch to provide an emergency alert for collisions of any kind.
SOLUTION
Through our research we found that smart watches are a good platform for this because they are aware of the user’s context - from location to heart rate- and with the Oscar Health app, they can also take into account the user’s health history.
MY ROLE
Project Manager & UX Designer I carefully managed deliverables and timeline for the product. As the UX Designer I conducted case studies of the hardware capabilities and API, Interviewed subjects & created hi fidelity prototypes.
1
2
3
4
5
Comparative Analysis
Technology Research
User Research
Personas / Flows
Prototype
Feature Oscar Health(iOS, Android)
Google Maps (iOS/Android)
Find Clinic App (iOS) Emergency Alert
(Android) iTriage Health
Navigation ✔ ✔ ✔
Panic Alert ✔
Share Location ✔ ✔
Nearest Doctor ✔ ✔ ✔ ✔
Medical History ✔ ✔
Medical Information ✔ ✔
๏ How are people reaching out in emergency situations with their smart phones?
๏ What are the available features within these medical/health apps?
๏ What are features that exist within the Oscar native app and what can we do to bring this to the wearable platform?
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
Technology Research
User Research
Personas / Flows
Prototype
๏ Traditional accident detection systems like Onstar only provide the vehicles context, not he users
๏ Smartphones and their onboard sensors (such as GPS receivers and accelerometers) are promising platforms for constructing such systems.
๏ With the hardware available in the apple watch, we can transmit the user’s context such as current medication, actual collision impact, and medical history for an effective emergency response.
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
Technology Research
User Research
Personas / Flows
Prototype
๏ We looked at their habits with wearables, technology, and priorities with healthcare.
๏ Screener survey, multiple interviews and user testing. helped informed us of our personas and of our decision on how to approach the alert and notification feature we wanted to add to the Oscar Health brand.
๏ From the 60 survey responses we received, we selected 12 participants to do in dept interviews to build our personas.
30
60
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
Technology Research
User Research
Personas / Flows
Prototype
๏ Primary Persona: Jean, AKA the existing Oscar user. She's cost conscious and is a loyal user of Oscar. Likes that Oscar is simple and utilizes technology.
๏ After interviewing the subjects extensively, we look for trends in motivation, habits, pain points to develop our 3 personas
๏ Developed extensive users flows to figure out the point of triggering a notification.
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
Technology Research
User Research
Personas / Flows
Prototype
๏ We studied gestures by making different cards to determine what users would do instinctively when seeing the notifications.
๏ We started with paper prototypes to determine the different screens needed, and asked users what they expected to see & what made sense.
LAUNCH PROTOTYPE!
DESIGN PROCESS
TWITCH.TV VIDEO UPLOADERTwitch is home to the most dedicated and highly skilled gamers on the planet. They shatter world records. They cruise through the newest titles. Gamers broadcast their own gameplay and interact with each other.
This was a 2 week project done in January, 2015 for my General Assembly User Experience Immersive Course. The Objective was to create an beta feature for Twitch Users to be able to search for video walkthroughs and upload their own walkthroughs.
Walkthroughs are guides to help gamers get through tough parts within a game- As a platform where the best gamers in the world, adding this would be a natural transition for Twitch as there are already “informal” walkthroughs but cannot jump around within parts of a game
We conducted a screener survey to identify people we want to interview. From there, along with contextual inquiry we look to understand habits and look for behavioral trends when it comes to looking for walkthroughs.
UX & Interaction DesignerAs the UX Designer I conducted interviews and contextual inquiry. As the interaction designer I studied user on-boarding and created a video uploader with my team.
%
&
OBJECTIVE (
OPPORTUNITY SOLUTION
MY ROLE
'
Feature Youtube IGN.com HitBox Twitch Reddit
Live streaming ✔ ▲ ✔ ✔
Channels ✔ ✔ ✔ ✔ ▲Video Walkthroughs ✔ ✔ ▲ ▲Partner Programs ✔ ✔ ✔ ✔
Chat ✔ ✔ ▲Up vote / down vote ✔ ✔ ✔ ✔
▲ ✔ - No- Yes- Special1
2
3
4
5
Comparative Analysis
User Research
Personas / Flows / Sitemaps
On-boarding Process
Prototype
๏ Special websites- players go to share tips & strategy, but not in the “walkthrough” kind of way.
๏ What are the core features on the competitors website?
๏ How can we keep users engaged while using the existing platform?
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
User Research
Personas / Flows / Sitemaps
On-boarding Process
Prototype
๏ We observe how people play video games, in-person and also watch their interaction on the Twitch platform.
๏ What are the ways people are finding information about video games?
๏ We select 12 participants, of different demographics and age groups to do in depth interviews. We included game developers, mobile-only gamers, professional gamers and walkthrough creators to gain the perspective of both the content creator and the consumers.
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
User Research
Personas / Flows / Sitemaps
On-boarding Process
Prototype
๏ We created a site map based on the different user’s point of entry,
๏ After determining the personas and sitemap, we developed several of the user’s flow through the website based on the features they would interact with.
DESIGN PROCESS
๏ We created three personas through user research.Keeping in mind that Twitch is a social platform- Understanding the personas interaction between each persona is an important look into the overall user experience
ReaganThe Creator of Content
JakeContent Consumer
CaseySocial Gamer
1
2
3
4
5
Comparative Analysis
User Research
Personas / Flows / Sitemaps
On-boarding Process
Prototype
๏ We studied on-boarding process of sites and especially apps that guide you through. We then tested “tips” for the first time user these on to our prototype to be tested.
DESIGN PROCESS
๏ We focused on created a video uploader for the content creator persona - Reagan. Through testing, found that we needed to look into the mindset of a first time user.
1
2
3
4
5
Comparative Analysis
User Research
Personas / Flows / Sitemaps
On-boarding Process
Prototype
๏ After several iterations, we build a prototype beginning with an email for the content creator, into an on-boarding flow and creation of a walkthrough. We used this based on Twitch’s existing designs to ensure familiarity.
DESIGN PROCESS
๏ We conducted several design sprints within the team to build out wireframes & copy.
LAUNCH PROTOTYPE!
CLOSET COLLECTIVECloset Collective is an online community where women can rent clothing, bags, shoes and accessories from each other and have an unlimited rotating closet.
%
&
OBJECTIVE
'
(
OPPORTUNITY
This was a 2 week project done in January, 2015 for my General Assembly User Experience Immersive Course. The Objective was to create an efficient, delightful way to increase the conversion rate for their subscription box service.
Saturated market space for fashion e-commerce, rental, and personal styling companies. We aim to deliver a system and clear initiative for potential users to convert into a subscriber.
SOLUTION
Restructure Closet Collective’s landing page content to encourage new user signups, we conducted users tests and developed a flow from a style quiz, style profile, and new user sign-up to increase conversion.
MY ROLE
UX & Interaction DesignerAs the UX Designer for this project I focused on interpreting data gathered from contextual inquiries, usability tests from the existing website, usability testing from competitor’s websites, and and extended user journey study to create a practical and delightful way to sign-up for the platform.
I created hi fidelity prototypes on Axure with multiple iterations and user tests.
Feature Closet Collective Tradesy Material Wrld Twice ThredUp The RealReal
Rental ✔Selling/
Consignment ✔ ✔ ✔ ✔ ✔ ✔
Social Login ✔ ✔ ✔ ✔
Subscription ✔Designer Wear
(selective) ✔ ✔ ✔ ✔Shipping (prepaid) ✔ ✔ ✔
Pricing Set by platform ✔ ✔ ✔ ✔ ✔
1
2
3
4
5
Comparative Analysis
User Research
Persona / Flows
Features / Backend
Prototype
๏ What information is on the providers page?
๏ Extensive analysis to other subscription websites, consignment platforms, and peer-to-peer platforms.
๏ What are features that are on the profile pages?
DESIGN PROCESS
1
2
3
4
5
Comparative Analysis
User Research
Persona / Flows
Features / Backend
Prototype
๏ User research consisted of conducting a screener survey, multiple interviews and user testing. We also conducted contextual inquiry studied how people perceived the brand, and how they interact with the clothes.
๏ We Conducted initial usability testing on the existing website through in-person and online platforms (UserTesting.com)
DESIGN PROCESS
๏ We conducted an extended study with 3 users and developed two distinct user journeys.This was to suggest retention for Closet Collective subscribers and create a more rounded experience.
1
2
3
4
5
Comparative Analysis
User Research
Persona / Flows
Features / Backend
Prototype
๏ Primary Persona: Rowan, the new user. She's cost conscious and likes to have stylist recommendations. She likes having nice items but dislikes shopping for them herself.
๏ Based on the new user, reoccurring user and the potential new market, we developed a sitemap to determine the point of entry.
DESIGN PROCESS
๏ After determining the different personas, it was important for us to develop user flows based on the clients KPI (key performance indicator) - which is the point of conversion. We based our primary personas flows based on the point of converting.
1
2
3
4
5
Comparative Analysis
User Research
Persona / Flows
Features / Backend
Prototype
๏ Based on the client’s needs, we broke down the features based on priority and difficulty to implement after a backend work flow analysis.
๏ First on the list was to convert the user- we developed a ‘style profile’ feature to give the new user a clear incentive to sign up.
DESIGN PROCESS
๏ After an analysis of Closet Collective’s backend workflow we proposed an implementation solution to optimize the backend work flow.
1
2
3
4
5
Comparative Analysis
User Research
Persona / Flows
Features / Backend
Prototype
๏ We also developed a prototype for the existing subscriber - this is to continue to engage and interact with the user beyond conversion.
DESIGN PROCESS
๏ We developed a prototype for the new user flow, beginning from the email prompt and ending with completing the style profile, checkout process and notification.
LAUNCH PROTOTYPE
LAUNCH PROTOTYPE
