Page 1

PORTFOLIO

2017

Cynthia Yip

UX / UI DESIGNER

C Y N T H I AY 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

18

14

4

ABOUT ME

Passionate visual designer, photographer and now I advocate for the users to create products that solves . What do I do outside of UX?

14

PLENTI (AMERICAN EXPRESS)

Uplifting Plenti’s current web and mobile design to simplify the offer activation lifecycle to enable users to easily search for deals on their favorite brands and use them through the program to earn points towards future purchases.

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 with various tools.

18

WIIMOVE!

Designing a Apple Watch 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.

8

HUM (VERIZON)

Designing the HUM landing page to provide a simplified overview of the new product offering of Hum-X and the added feature of WiFi to target and motivate current Verizon customers to purchase.

24

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.

My experiences at Verizon and American Express have enabled me to 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


HUM Designing the HUM landing page to provide a simplified overview of the new product offering of Hum-X and rebranding of Hum to Hum+ to target and motivate current Verizon customers to purchase.

TEAM MEMBERS

5

TIMEFRAME (WEEKS)

3

P L AT FO R M : D E S K TO P & MOBILE

HUM’S WEBSITE https://www.hum.com/

8


THE PROBLEM Hum is the technology designed by Verizon to make your car smart, safer and now with Hum-X it provides WiFi to make you feel even more connected. Currently, Verizon’s website does not offer information on Hum’s rebranding to Hum+ and the new product offering of Hum-X. In order for users to learn about the product, they need to access the microsite, hum.com, for additional support/education before purchasing.

THE SOLUTION

MY ROLE

DELIVERABLES

Integrate Hum’s current microsite design features with Verizon’s brand guidelines to create a landing page that will enable users to seamlessly view and compare between products that will lead to a satisfying purchase.

As the UX Designer, I focused on interpreting data collected from research, stakeholders and user data. My most significant leadership roles were in the research, ideation and usability testing processes.

Brief User Flows Annotated Wireframes Personas Interview Questions Usability Questions Usability Test Findings Feature Considerations

9


S TA K E H O L D E R INTERVIEW From the initial stakeholder meeting, we were able to identify the key project goals and outline the project’s timeline in order to meet a 4 weeks deadline. Business goals: • Introduce new product offering of Hum-X and the added feature of WiFi to motivate purchase through Verizon.com. • Provide a simplified overview of Hum by communicating the overarching position and top features to those who are unaware or need additional support/education before purchasing. User Experience goals: • Design should integrate features from the microsite with Verizon’s brand message and values to appeal to current and new Hum customers. • Develop a compelling content strategy around purchasing options to meet the goals of Verizon’s business while establishing trust between the brand and car owners.

C O M PA R AT I V E L AY O U T A N A LY S I S To identify new design opportunities for Hum while aligning with Verizon’s brand, I took the the lead into conducting a comparative layout analysis of our 3 competitors website: Automatic, Vinli and Zubie. We took inspirations from Automatic’s direct and clean messaging strategy and Vinli’s visually engaging content particularly their effective storytelling of their app to breathe life into our site design.

10


Automatic

Vinli

Zubie

U N D E R S TA N D I N G OUR USERS Our primary design goal was to understand the hierarchy of information that the user looks for when they are researching for the best car diagnostic adapters. After conducting 15 user interviews, our team analyzed our user data by affinity mapping our findings into pain, pleasures, context and behaviors to identify similarities and trends. Many users were frustrated when they need to watch videos to learn about the product and favored the ability to compare similar products side by side. These findings emphasized a user need for us to design a comparison tool feature and a mobile-friendly responsive design.

11


PERSONAS Our affinity mapping has allowed us to gather key features and discover commonalities of our users which informed us the creation of our 3 personas. They are also an essential point-of-reference tool on the feature prioritization process which has helped us identify our “must have” features: • Ability to toggle between Hum+ and Hum-X to view and compare features without leaving the page. • Balance of visually appealing and informative content that educates the user of the benefits of the product without overwhelming their decision making process.

The Educator

The Information Seeker

The Perfectionist

DESIGN EVOLUTION Following a design studio with the team, we transformed our sketches into wireframes and created a web and mobile prototype to begin our usability tests. This quickly led us to discover design flaws such as confusion in accessing information between the two products on the same page and this allowed us to iterate early in low-fidelity. Our primary point of refinement was our decision to consolidate the 15 product features into an accordion style for both platforms which ultimately prioritized the content and increased user engagement.

12


FINAL DESIGN E A R LY I T E R AT I O N S

H U M+ & H U M -X

After 4 iterations based on feedbacks we received from usability tests, our team is proud to launch and feature Hum’s new landing page on Verizon’s website that is set in April 2017.

L A U N C H H U M AT V E R I Z O N

13


PLENTI Uplifting Plenti’s current web and mobile design to simplify the offer activation lifecycle to enable users to easily search for deals on their favorite brands and use them through the program to earn points towards future purchases.

TEAM MEMBERS

6

TIMEFRAME (MONTHS)

1

P L AT FO R M : M O B I L E

PLENTI’S WEBSITE https://www.plenti.com/

14


THE PROBLEM Plenti, an American Express’s rewards loyalty program, is home to over 800 brands where members activate and use offers to earn points towards their future purchases. However, due to the complex points system and naming conventions used in the program, many users are struggling to understand how to use Plenti and are lacking information that will allow their shopping experience to be painless.

THE SOLUTION

MY ROLE

DELIVERABLES

Redesign the entire offer lifecycle to allow users to search, navigate, save, use and earn points seamlessly. Discover new naming conventions for the program that users associates more to which will provide a more gratified user experience.

As the UX/UI Designer for my team, I conducted user interviews, usability testing, competitive and comparative analysis. During the design execution stage, I sketched, tested, created wireframes and a clickable prototype.

Research Feature Analysis User Flows User Interviews Personas User Journey Affinity Map Wireframes Usability Test Findings Iterations Clickable Prototype

15


USER RESEARCH Our primary user research goal was to understand how our users were navigating Plenti’s mobile app from finding and saving an offer to using and earning points. As a team, we took data collected from the initial 15 user interviews and identified all of the features of the offer lifecycle on sticky notes to map out our user journey. We identified common: • Pain Points: complex naming conventions and lack of personalization. • User Goals: ability to view nearby locations to use offers.

IDENTIFYING PERSONAS After synthesizing data from our user research and affinity mapping sessions, we were able to identify our main persona to represent Plenti’s key demographic. Her motivations, behaviors, and contexts will help guide our IA, content and design priorities.

16


D E S I G N I D E AT I O N & I T E R AT I O N S To create our MVP, our team conducted a design studio to focus on brainstorming different offer tile designs and featuring the location map in the offer details page. We created a paper prototype to begin user testing and card sorting with 12 users at early stage so we could easily iterate in low-fidelity before moving to higher fidelity. We discovered that users were not able to connect ‘activation’ as the same with ‘saving’ an offer. Many users understood that by tapping onto the heart it will save their offer for future use. When the location button was placed below the offer details page, many users failed to see it which informed us to prioritize the placement.

REFRESHED DESIGN In prioritizing our new IA structure for the offer lifecycle, we focused on a vibrant design that aligns with Plenti’s brand, new naming conventions based on results from our final usability tests and a geolocation map that accurately pinpoints nearby locations that users could shop at based on the offer they are looking at. Based on Plenti’s key metrics since the updated launch on both iOS and Android in Summer 2016, there was a significant 50% increase in members sign-up and a 60% increase in feature awareness and understanding of how to shop for offers and use Plenti points for savings at checkout.

LAUNCH PLENTI

17


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

18


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

19


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

20

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.

21


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.

22


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

23


CONTACT Let’s keep in touch!

24

MEDIUM.COM

TWITTER.COM

/cynthiayip

/coffeeatthepark

WEBSITE

LINKEDIN.COM

www.cynthiayip.com

/cynthiayip


Thank you for checking out my work and I look forward to hearing from you soon!

25


Cynthia Yip's UX/UI Portfolio 2017  

My experiences at Verizon and American Express have enabled me to thrive on opportunities to solve complex problems from what movitates the...

Read more
Read more
Similar to
Popular now
Just for you