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.
Role: I led a team of 4 product designers and developed a comprehensive scope, orchestrated weekly meetings, and facilitated a collaborative environment.
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.
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
- user's palate profile
- other user's ratings
- type of grape
- critic reviews
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:
- 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
- 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
- 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.
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.
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.
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.
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.
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 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
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.
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 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.
Key usability changes from wireframe to HiFi:
- 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.
- 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.
- 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.
Key usability changes from wireframe to HiFi:
- 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
- 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.
- 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
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".