PORTFOLIO
2015
Cynthia Yip
UX / UI DESIGNER
C Y N T H I 4 Y I P. C O M
Quote I Live By
USABILITY IS ABOUT PEOPLE AND
HOW THEY UNDERSTAND AND USE THINGS, NOT ABOUT TECHNOLOGY. - STEVE KRUG -
2
Contents
6
4
8
10
12
4
ABOUT ME
Passionate visual designer, photographer and now I advocate for the users to create the best products. What do I do outside of UX?
14
WIIMOVE!
Creating an app that will motivate people to exercise more while engaging them in popular games like Pokémon and Legend of Zelda which will make their workouts feel more gratifying.
6
C R E AT I V E P R O C E S S
I strive to create user-centered designs through researching, strategizing, designing and iterating along with various tools.
20
AMPER MUSIC
Freelance project focusing on on-boarding process strategies and design process.
8
K I C K S TA R T E R
Designing a new content strategy around funding options to satisfy the goals of Kickstarter’s business while strengthening the trust and relationship between project creators and backers.
26
CO N TAC T
Let’s keep in touch!
3
Cynthia Yip A visual designer, photographer, UX/UI designer, coffee addict and avid cosplayer.
IMAGE
Chrysler Building photographed by Cynthia Yip
4
ABOUT I find enormous value in designing beautiful products with the user in mind. I strive to create user-centered designs through researching, strategizing, designing and iterating. My experience in designing multiple platforms and unbiased approach to the UX process bridges the gap between good experiences and improving the lives of its users.
A N AT I V E N E W YO R K E R L I V I N G
I AM GUIDED BY THE PURSUIT
I N M A N H AT TA N
OF ELEGANT SOLUTIONS
I graduated with a B.A. in Corporate Communications, worked for 5 years in sales and logistics and studied digital and graphic design at Parsons. My experiences have made me realized I wanted to bridge my passion for communication and design together.
At General Assembly, I thrive on opportunities to solve complex problems from what movitates the users to what they aim to achieve. My UX philosophy is centered around content strategy and a deep empathy for the user. My strong eye for visual design positions me to form these research-driven designs into beautiful, fulfilling experiences.
My Tools SKETCH3
OMNIGRAFFLE
INVISION
HYPE
AXURE
I L LU S T R ATO R
5
PROCESS Great designs are born from a solid process and it begins with an empathetic and unbiased exploration into the discovery of a single problem – uncover its roots and innovation will follow.
6
My Creative Process
7
KICKSTARTER Designing a new content strategy around funding options to satisfy the goals of Kickstarter’s business while strengthening the trust and relationship between project creators and backers.
TEAM MEMBERS
2
TIMEFRAME (WEEKS)
2
P L AT FO R M : D E S K TO P
C A SE STUDY & PROTOT YPE https://medium.com/@cynthiayip/b8d2a232c201
8
THE PROBLEM Kickstarter is home to thousands of creative projects where a project’s success comes from backers who pledges a certain amount of money to a project. Currently, projects are only funded if they reach their funding goal by a predetermined date. There is no option for backers to continue supporting their favorite projects or project creators to keep their backers informed after the project reaches its deadline.
THE SOLUTION
MY ROLE
DELIVERABLES
Integrate a subscription reward option that will create a more engaging and trustworthy relationship between the project backers and creators — while increasing the revenue stream for Kickstarter.
I served as the UX and Interaction Designer. As the UX Designer I focused on interpreting data collected from interviews and contextual inquiries. As the Interaction Designer I studied user on-boarding process and created an interactive landing page with my team.
Brief User Flows Annotated Wireframes User Journey Interview Questions Usability Questions Usability Test Findings Clickable Prototype Feature Considerations
9
PLANNING My teammate and I created the project plan, proposal and a list of deliverables to keep us on track and to allocate responsibilities equally among us. The project plan was constantly updated to reflect our progress so that if one of us had troubles completing a task the other one could help.
Project Schedule
COMPETITOR RESEARCH We began our research by looking into Kickstarter’s competitors to understand how other crowdsourcing sites conduct their businesses. We conducted a Feature and Layout Analysis and Competitor User Flows to identify elements that are of advantage to our competitors’ business that we want to integrate into Kickstarter’s site.
F E AT U R E A N A LY S I S
Both Pozible and Patreon currently offers subscription-based rewards where funds are collected on a regular (weekly, monthly, annually) basis.
10
L AY O U T A N A LY S I S
Blue Apron and Dollarshave had a very clean and clear product page layout with plan comparisons. Kickstarter will use a similar layout to engage the backers to choose from.
USER FLOWS
We tasked users with locating a project for each crowdsourcing site, selecting their desired reward and then check out. We recorded our user’s step by step task into a user flow to understand the duration it takes them to complete it.
USER RESEARCH With our current findings, it lead to wonder — who are the users of these subscription and crowdsourcing sites? To access these users preferences, characteristics and attitudes towards using these types of sites we created a Survey to screen out primary users of subscription sites to conduct User Interviews with.
SURVEY
Of the 39 participants who took our survey, most of them told us that they are more likely to look into a project or subscription if it was shared by their friends because they are trustworthy
USER INTERVIEWS
We learned from backers that by establishing a trustworthy content, they are more convinced to look into the project and eventually back it.
TA K E AWAY From the user interviews, we created 3 Personas and 2 User Journeys for the creator and the backer to create a realistic representation of our key audience segments for reference.
PERSONAS
We went back to our data collected from our survey, interviews and usability tests and picked out key points to give to our 3 personas. They will be our reliable and realistic representation of our key audience segments for reference.
USER JOURNEY & SCENARIOS
We created a user journey for Betty the Backer and a user journey for Kevin the Creator to illustrate their flow as they accomplished their own tasks.
11
I D E AT I O N Our next step is to brainstorm ideas for features to be implemented into Kickstarter’s site design. We used the 4 List Methods to organize our data collected from our research and from there we identified key features through feature prioritization which we would use for our design studio.
4 LIST METHODS
We categorized the data we collected from research into pains, pleasures, contexts and behaviors to better visualize the features for Kickstarter’s site design.
DESIGN STUDIO
We both placed ourselves in the shoes of a creator and backer and sketched out features that we want and need on the 5 main pages: welcome, home, category project, project and payment/billing.
F E AT U R E P R I O R I T I Z AT I O N
Prioritizing the features by creating a backer and creator flow. This will help us narrow down the key features to focus on when designing the site.
DESIGN After more sketching and discussions, we finally decided on the layout for our 5 main pages: welcome, home, main project and payment/billing. Next, we transferred our sketches into Sketch3 to create wireframes and uploaded them into InVision for a clickable prototype.
WIREFRAMES
Our 4 main pages: welcome, home, project and payment/billing created using Sketch3.
12
T E S T, I T E R AT E , R E P E AT We came up with multiple designs for the project page and with the feedback we received from users during Usability Test and A/B Test, we continue to iterate our design until we perfected a design that delivered a good user experience.
USABILITY & A/B TESTING
As soon as we had our 1st prototype, we tested it with multiple users and synthesized our findings into iterations. We also conducted A/B Testing for specific areas of the design which helped us immediately identify the pain and pleasure points.
I T E R AT I O N S
We did 4 iterations and some significant changes include eliminating a pop up window, screen pop up at hover state, drop down menu to select between subscription and one-time rewards and alternatives of the word ‘subscription’.
LAUNCH PROTOTYPE
13
WIIMOVE! Designing a new platform for Nintendo by integrating popular games such as Pokémon, Legend of Zelda and Final Fantasy into a storyline and role-playing game which will engage existing fans and new users to the app.
TEAM MEMBERS
2
TIMEFRAME (WEEKS)
2
P L AT FO R M : A P P L E WATC H
C A SE STUDY & PROTOT YPE https://medium.com/@cynthiayip/abcfedead639
14
THE PROBLEM There has been a growing trend of people using fitness apps to lose weight. From familiar sports brands like Nike who have released their Nike+ FuelBand in 2012 to the fitness apps like Zombies, Run!, many companies are jumping in the bandwagon to create products that will motivate people to stay fit. However, most fitness products and apps fail to help people learn to enjoy exercising which can perpetuate problems associated with people gaining weight over time.
THE SOLUTION
MY ROLE
DELIVERABLES
Branching out from one of the world’s gaming giants, Nintendo, to create a gamification app which will motivate people to exercise more while engaging them in popular games like Pokémon and Legend of Zelda which will make their workouts feel more gratifying.
As a project manager, I created the project plan, led the research and persona design stage, designed the wireframes and synthesized our team’s research into deliverables.
Brief Technical Background Research Feature Analysis User Flows User Survey & Interviews Personas User Journey Affinity Map Wireframes Usability Test Findings Iterations Clickable Prototype
15
PLANNING As a project manager, it is important to keep my team on track by creating a project plan and schedule to keep each members of the team up to date with the project’s progress. Each member updates their progress on the project schedule for the team to see so that if one of us are delayed, we can help each other out.
Project Schedule
Double Diamond of Project Progress
COMPETITOR RESEARCH We began our research by conducting research on Health & Fitness and Game apps, Nintendo’s business and Technical Background Research on the Apple Watch which will lead us to our competitive analysis and user flows as well as enabling us to validate our proposed platform to create our gaming app that will motivate users to exercise.
H E A LT H & F I T N E S S AND GAME APPS
Many game of them failed to keep users engaged because companies became fixated on rewards rather than motivating the users. People are also trading their gym memberships to go running outside with the appeal being that it’s free
16
USER FLOWS
Out of the 4 apps, Nike Training had the most pages and clicks in order to complete the task. We will avoid this when designing our app.
F E AT U R E A N A LY S I S
The key features that we include for our app: Graphs & Statistics, GPS, Rewards/ Achievements and Connect with Friends to follow Nintendo’s brand personality, family friendly and accessible to all.
USER RESEARCH To understand who these users are, we decided to conduct a user survey to access their motivations, behaviors and attitudes when they are using a health & fitness and/or game consoles or apps. We also screened out participants to select ones that will help us identify their pain points and features that will improve on their experiences and fulfill their needs.
SURVEY
Users said the fact that they had to manually enter information during their workout routines made it a hassle and was time consuming. This further validated our choice of platform to use the Apple Watch.
USER INTERVIEWS
Most users favored the idea of having a GPS to track their workout locations real time and the ability to connect with their friends or family for more bonding time.
TA K E AWAY We took data from our research to pinpoint the Pain, Pleasure, Behavior and Context, also known as the 4 List Method, from our user interviews to extract key features that we could built our Personas and User Journey on.
PERSONAS
It was now time for us to create our 3 personas which best represented the main audiences of our Wii MOVE! app. Meet: Ingrid, Bobby and Gabriel.
USER JOURNEY & SCENARIOS
Based on the user journey, we want our user to have as much transparency as possible to do the things that they need to do on our app.
17
I D E AT I O N With our elaborated findings and 3 personas, we were ready to move onto the ideation stage. We analyzed our data with the 4 List Methods which lead to our Feature Prioritization to identify features that will be highlighted during our Design Studio.
4 LIST METHODS
We took data from our research to pinpoint the Pain, Pleasure, Behavior and Context, also known as the 4 List Method, from our user interviews to extract key features that we could built our personas on.
DESIGN STUDIO
During our Design Studio, we made sure to place ourselves in the shoes of our primary users through each screen from the short glances to the more detailed screens like the health & fitness statistics. We also followed the Apple Watch HIG as we created each screen.
F E AT U R E P R I O R I T I Z AT I O N
Prioritizing the features based on our research and 4 List Methods which gave us clarity on how we want to design each frame for our app.
DESIGN After more sketching and discussions, we were able to finalize our first set of layout designs. We translated our sketches into higher fidelity in Sketch3. The challenge for designing an Apple Watch app is the limited real estate to showcase the important features without crowding each frame.
WIREFRAMES
We designed the short and long glances while staying true to Apple Watch’s HIG. We also kept in mind the specific actions that the user would do while they are exercising and designed around it.
18
T E S T, I T E R AT E , R E P E AT We took our first set of wireframes and conducted our Usability Tests with our paper prototype and made iterations. What’s unique about this usability test is because the app is on an Apple Watch, the only way we could test it digitally was on the phone or desktop. Our challenge then was to find a way to let the user believe and feel as if they are using the real Apple Watch to test our product.
USABILITY TEST
We tested on people who owns an Apple Watch and people who has never used them. Our findings were extraordinary and we were able to iterate based on the feedbacks.
Our group iterated, collected feedback and continued to iterate until we finalized a design that was clear and understandable for existing Apple Watch users as well as the inexperienced users.
I T E R AT I O N S
We had 3 iterations and the significant changes include adding a real time map for users to monitor where members of their group are at during the challenge, animated characters to interact with the user more and adding signifiers when the user accomplishes a task.
LAUNCH PROTOTYPE
19
AMPER MUSIC Designing a new content strategy around the onboarding process that is brief and painless so it clears way for the product to shine through for the users.
TEAM MEMBERS
3
TIMEFRAME (WEEKS)
2.5
P L AT FO R M : D E S K TO P
C A SE STUDY & PROTOT YPE https://medium.com/@cynthiayip/6a403db6aeac
20
THE PROBLEM Often times when we visit websites that provides a subscription based service, we are immediately introduced to their products before we get a chance to understand what the business does. As a result, most onboarding processes fail to help first time users fully understand the company and product value. How can we make the user onboarding align to the business and user towards common goals, as both stands to benefit if the customer receives value from the subscription?
THE SOLUTION
MY ROLE
DELIVERABLES
Implementing a video at home page to introduce to the user what Amper Music does. Users also have an opportunity to try a demo before deciding on a subscription plan that fits their needs. Subscription plans will also offer transparency across all tiers for the users to compare the differences.
As a UX Designer for my team, I conducted survey, user interviews, usability testing, competitive and comparative analysis. During the design execution stage, I sketched, tested, created wireframes and a clickable prototype. I also prepared annotated wireframes.
Brief Research Feature Analysis User Flows User Survey & Interviews Personas User Journey Affinity Map Wireframes Usability Test Findings Iterations Clickable Prototype
21
PLANNING As a team, we prepared a project plan that highlights the tasks that will be done for each day to give our client a good idea of what wil be expected from us. We also created our own project schedule which each team member will update their own progress on their assigned responsibilities.
Project Schedule
Project Plan
COMPETITOR RESEARCH We started off by looking at various music companies but realized that our focus should be on subscription based sites which is relevant to Amper Music’s business model. We looked into Spotify, Amazon, Lynda.com, Sendible and Google Express. We conducted a Feature Analysis, User Flow and the Nielsen Heuristic Analysis on their onboarding process.
NIELSEN HEURISTIC A N A LY S I S Sites like Lynda.com and Sendible advertises for free trial but does not notify users that credit card info. is required. Amazon provides no customer service support number. However, all of these sites uses simple languages for users to understand.
22
USER FLOWS
Three of the five sites we looked at had a side by side plan comparison which provided transparency for users to understand. Most of the sites had a very simple checkout process which was not overwhelming.
F E AT U R E A N A LY S I S
Most sites provided a free trial across all tiers for users to try before deciding on a plan. They also have a demo to their products and a easy cancellation process. We will take these key features and implement them into our site design.
USER RESEARCH To identify the user’s behaviors, attitudes and key online subscription habits we conducted a Survey which we later used to screened out candidates that have used subscription sites extensively for a User Interview. Many participants have said they valued trust and price transparency when selecting a subscription site to use.
SURVEY
Users identified their pain points when using a subscription site. They were quoted to say that “asking for too much information” and “long set up process”. Our design will be around avoiding these pain points to be repeated on the site.
USER INTERVIEWS
The user interviews lead us to identifying key features to implement into the website: free trial across all tiers, quick and straight forward onboarding process, payment reminder option, clear price structure and FAQ and a cancellation option.
TA K E AWAY The initial research gave us a general understanding of online subscription habits. When we dug deeper through the survey and interviews, we uncovered many pain points that people experience when using other subscription businesses. With these key takeaways, we were able to develop our user scenarios and personas.
PERSONAS & USER SCENARIOS
Each persona represents the pain points and features that were identified during research stage. For example, Chloe’s painpoints include the inability to test out a product before purchasing it. The feature we will include is free trials across all tiers for a 2 weeks period.
23
I D E AT I O N The next step is to generate ideas about what solutions might be possible to define the product more clearly when the users land on the home page. Questions we asked ourselves as a team was whether the ideas are viable, feasible and desirable. During this process we conducted Affinity Mapping, Design Studio and Dot Voting.
AFFINITY MAPPING
Through our user interviews we collected extensive data on users pain, pleasure, context and behavior on subscription services. We organized these findings by affinity mapping to define key features for the design stage.
DOT VOTING
DESIGN STUDIO
With a thorough understanding of the challenge and its primary user base, we were able to move onto design studio to translate our findings into designs.
We each designed the home, sign up and billing page during design studio. To settle on a design style that will be applicable towards a higher fidelity, we asked participants who took our survey and user interviews to dot vote on the design they like with explanation.
DESIGN Once the designs proved intuitive to the users, we were ready to to built them into higher fidelity. These detailed wireframes and interactive mockups brought our designs to life and created a real time experience for our users during our next step: usability testing.
WIREFRAMES
The visual product should reflect the brand’s identity as well as the design specifications. The design process included choosing the right color schemes, typography and terms that speaks about the the value of the brand.
24
T E S T, I T E R AT E , R E P E AT With our wireframes transformed into a clickable prototype, we set out to find users to test our product. We provided our users with scenarios and recorded our observations through note taking and videos. It was critical for me to not leave any details out as any subtletes in behaviors during testing are essential to the overall experience. It allowed us to accurately assess user suggestions and perspectives to continue refining the design until the experience is seamless. USABILITY TEST
We tested on 6 users and provided them with scenarios so that we could observe their progress. Recording their interaction with the product proved to be extremely helpful when we went back to make iterations.
The biggest challenge was designing a clear pricing structure for the various subscription plans. We wanted the users to connect with the product which will lead them to choosing a subscription plan that best fitted their needs. Our iterations included the removal of individual plan pages which proved to be unnecessary for the users to read prior to choosing a plan.
I T E R AT I O N S
We learned from our iterations that the onboarding process is extremely challenging to design as we were trying to simplify it while making sure the product is translated to the user clearly. Another challenge was designing the subscription plans to make them as clear as possible for users to be able to tell the difference between each plan to make their decision.
LAUNCH PROTOTYPE
25
CONTACT Let’s keep in touch!
26
MEDIUM.COM
TWITTER.COM
/cynthiayip
/coffeeatthepark
WEBSITE
LINKEDIN.COM
www.cynthi4yip.com
/cynthiayip
Thank you for checking out my work and I look forward to hearing from you soon!
27