Progressive enhancement from ios, android, tablet

Progressive enhancement from ios, android, tablet

 

OVERVIEW

Matchmaking Wines

About: Brit’s Wine a native iOS app. It gives reliable wine recommendations based on the user's unique palate profile.

Easy for All

Challenge: Our client had already launched her app, but was having trouble retaining customers. Our team aimed to figure out why this was happening and fix it.

Product Designer

Role: I led a team of 4 and developed a comprehensive scope, orchestrated weekly meetings, and facilitated a collaborative environment.

 
 

My Team

My teammates were an invaluable part of this experience, each playing a key role in the development and design of the 38 screens we delivered for Brit's Wine under tight deadlines in the span of 7 weeks.

F/ LEFT TO RIGHT: CATHERINE LAGMAN, BELÉN CEBALLOS, ME, SOOJUNG CHANG, MEGAN KENNEDY

F/ LEFT TO RIGHT: CATHERINE LAGMAN, BELÉN CEBALLOS, ME, SOOJUNG CHANG, MEGAN KENNEDY

 
 
 

RESEARCH

 

Analysis: Understanding the Wine Industry

It was important for our team to understand the wine industry and the initial pain points of the original app before we began generating ideas. First, we analyzed through an extensive competitive evaluation and comparative analysis of existing apps. We figured out there's a vast amount information to consider when buying wine:

  • wine scores
  • vintages
  • user's palate profile
  • other user's ratings
  • label
  • price
  • type of grape
  • region
  • critic reviews
 
competitive.png
comparative.png
 
 

Usability Test #1: Finding key pain points

Then we tested the existing app by listing out the main objectives we wanted to accomplish, and after we synthesized the information that we got from our usability testers. Main objectives & synthesis listed below:

  1. Interview Objective: understand the most important factors target users (millennials) considered before buying wine
    →price is most important, then expert's or friend's opinion, familiarity,  label,  mood, food pairing
  2. Interview Objective: understand difficulties while buying and discovering new wine
    →6/6 users were overwhelmed by the number of wine choices available at stores and online
  3. App Objective: map out main pain points and usability issues
     →Discovery screen: 4/6 users confused by wine jargon in the description section
     →Discovery screen: All 6/6 didn't understand what happened after they swiped left or right on a wine

     →Discovery screen: All 6/6 users were angry at the hidden price on wines
     →Home Screen: All 6/6 users could not tell what the wine app was about, they wondered who is Brit?
     

In our wireframes on the next page, we addressed all the main pain points as well as key interview and research findings.

 
IMG_5043.png
File_001.png
 
 

Persona and Taskflow: Understanding our target audience

We wanted the focus to be on our target audience, millennials, so we created a persona that drove the possible task flows we could create within the app. 

 
taskflow2.png
 
 

Information Architecture: Creating a logical structure to build upon

The task flow helped us understand how our persona, Laura, would go about trying to find a wine. Using the task flow, we sketched out the IA before going into low fidelity wireframes. 

 
IMG_5078.png
 
 
 

IDEATION

 

Design Sprint: Generating ideas quickly

Now that we had a solid understanding of the wine industry and a solid architectural base of the app, we started rapidly brainstorming our 6 main sections: home page, create account, palate profile quiz, discovery, my wines list, and search.

 
SOMm Select Screen

SOMm Select Screen

Discovery Screen

Discovery Screen

 

WIREFRAMES

 

Usability Test #2

After generating many sketches together with the team and founder, we turned our sketches into wireframes and tested them again to validate decisons we made.

 
 
 

STYLE GUIDE

 

Creating a memorable experience

While working on wireframes, we also started forming ideas on branding through style tiles. The original app lacked a strong visual language, so we developed the branding of the app.

FInal Styleguide, created by cat

FInal Styleguide, created by cat

 
 
 
hifi screens

hifi screens

 

CULTURE

 

Constructive Critique

From our design sprint, we created wireframes for each part of the app to figure possible layouts. For every meeting, it was important that we had a team critique to:

  • have everyone see an overview of all versions made
  • make a group decision to go with the most useful and usable version
  • enable changes to make the designs better

Team Collaboration: Thumbs up or down?

Along with weekly critiques and bi-weekly user testing, I decided to implement a thumbs up/thumbs down system, where the team voted by showing thumbs up/down/neutral, to get a quick visual of consensus and to make decisions faster.

 
 
 

HIGH FIDELITY SCREENS

 

Usability Test #3

With our 3rd usability test we implemented these main changes:

  • Ability to filter on Discovery and see how many items are on your shopping cart
  • Ability to tap on Discovery cards to see more details about a wine
  • Wine label, price, and tag descriptors are clearly shown
  • Introduction to Brit of Brit's Wine for better onboarding
  • Onboarding lets wine beginners, novices, to enthusiasts help tailor their palate profile
 
 
 

EXPLORE THE PROTOTYPE

 

Before

 

After

 
 
 
 

RESULTS

We achieved our main goals, delivered on time, and completed the scope. Users can now:

  • purchase wine easily
  • keep track of history of purchases
  • receive tailored recommendations of wine based on their palate profile
  • access information needed to make an informed choice to buy the win