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 product designers 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

 
 
 

STYLE GUIDE

 

Creating a memorable experience

While working on wireframes, we also started on style tiles. This was an organic process and the style evolved as we progressed each week.

Our team created light version that had imagery focused on illustration and a dark version that had imagery focused on photos. Keeping with the brand's feeling of vibrant and refreshing, we decided to go with the lighter version before we started our high fidelity mockups.

FInal Styleguide

FInal Styleguide

 
styleguide_early2.png
 
 
 
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.

 
 
 
 

SIGN IN

SIGN IN: WIREFRAME

SIGN IN: WIREFRAME

 

Sign In Screens: Allowing users to explore the app

In the original home screen, there was only an "Explore" option. It was important to our client, as well as our users, to have multiple sign in and sign up options. In our first usability test, 5/6 users told our team that they would be annoyed if they were forced to sign up to use the app, so we created other options.

Features on the home screen:

  • Sign Up with Facebook
  • Create Account
  • Sign In
  • Explore No
 
SIGN IN: FINAL HIGH FIDELITY SCREENS

SIGN IN: FINAL HIGH FIDELITY SCREENS

 
 
 

ONBOARDING

 

A/B Testing

In our second usability test, we tested V1 and V6, more users preferred V6 and the swiping motion reflected the rest of the app along with helping users learn how to swipe.

 
ONBOARDING: Wireframe

ONBOARDING: Wireframe

 
 

Initial HiFis

In our first few HiFi's, I explored a vector illustration look. However, looking back at our persona, Laura, she wants to impress her friends. She's looking for a wine that will let her friends know that she has good taste. Through a team critique, we decided that the illustrations were fun but the style was too young for a wine app that should be more sophisticated. We went with the stylistic choice of photos that matched with the rest of the app.

 
ONBOARDING: HIFI EXPLORATIOn

ONBOARDING: HIFI EXPLORATIOn

 

Onboarding Final Screens: Listening to our users

One of the questions we constantly had throughout our 3 usability tests was "Who is Brit?". After the 3rd usability test, we decided to introduce Britney of Brit's Wine during the palate quiz as a great way for users to begin to understand the sommelier who would be matching them to their wine.

Although this was not initially planned out, it's important to be flexible enough to deviate from initial designs to continually innovate throughout this process.

 
 
 
 

MY WINES

 

Key usability changes from wireframe to HiFi:

  1. This section originally confused all 6 users in the first usability test because there were wines listed here in the same visual style as Discovery. We changed the visuals and architecture of the app.
    In the third usability test, all users understood the function of this page.
  2. Originally referred to as "My Profile", this was changed to "My Wines".
    → We realized that implementing a profile and peer review system of wines was for V2.0 of the app.
  3. In the third usability test, users understood that 'search' option functioned only in "My Wines" and was different than the search on the bottom navigation.
 
mywines_1.png
 
 
 

DISCOVERY

 

Key usability changes from wireframe to HiFi:

  1. Tags and images are main decision factors to help users figure out whether they want to buy the wine.
     Tags are featured most prominently
    → Images are larger and zoomed onto the label
  2. Users are looking for different information (food pairing, taste, region, etc).
    → From wireframe to HiFi, in the detailed Discovery screen, we added separate tag categories with longer descriptions.
  3. Users did not try to swipe the cards, instead chose to top on the "pass, buy, like" buttons.
    → We made buttons more prominent, introduced cards underneath so that when users moved the card, they can see the next card underneath
 
 
 
 

EXPLORE THE PROTOTYPE

 

Before

 

After

 
 
 
 

RESULTS

Our client was very satisfied with our delivery and it is currently being implemented. We also provided future recommendations for V2.0 of her app.

  • Overall: In all user tests, users expressed interest in learning more about other user's reviews of wine. We suggest implementing a 5 star rating system.
  • Sign in: Consider keeping the Explore option when using the first app for the first time gives freedom to users. A good UX will invite them to sign in.
  • Discovery: For a better user experience users should always be able to undo. We suggest adding the iPhone feature of  "shake to undo".