A mobile application about wine learning

Project Role UX Designer
Team Solo Class Project
Duration 4 weeks, 80 hours total
Tools Figma, Optimal Sort, Marvel, Miro
Project Background

As someone who is interested in learning about wine but has a limited knowledge, I found Bianca Bosker’s Cork Dork to be a refreshingly approachable read about the world of wine. Following Bianca’s journey from complete novice to a sommelier, I was inspired by how she overcame her intimidations and became confident in her learnings. 

While this book was a good place to start learning about wine, it occurred to me that there were not a lot of wine learning tools targeted towards beginners. This gave me the idea to explore how to make wine learning engaging and accessible for beginners.

My Assumptions

Before jumping into research, I outlined my assumptions about this project. Calling out these assumptions helped remind me that they were just that, and consequently helped to ensure that I was not basing decisions solely on these assumptions:

Research

During this phase, I wanted to understand not only users habits around wine, but I also wanted to understand how they approach learning in general. I felt that this information would be helpful in the ideation phase and would allow me to best explore different solutions. Below is my research process:

Research Goals

I had selected these as my goals because I felt that they would help me uncover if my theorized pain point was valid, what users wanted to learn about wine, and how users approached learning in a general sense. These goals would ultimately help me understand whether my assumptions were valid or not.

Methodologies

I first conducted competitive analysis to see if there were competitors who offered a similar product, and if so, to understand what they did well and what functionalities could be improved upon. I then conducted market research to understand overall general wine drinking trends, demographic trends, wine sales and current wine learning tools. Then I hosted remote user interviews with 5 participants, all wine drinkers, and asked them a series of open-ended questions which tied back to my research goals. Afterwards, I created an affinity map to help uncover themes from this data. Next, I created a feature in-depth analysis to learn about how other companies, utilizing different mediums like podcasts and videos, approached wine learning.

After I conducted user interviews, I was overwhelmed by the varying habits that my participants had around wine. Using many post-it notes, I created an Affinity Map to understand the underlying themes from these interviews.

This Affinity Map proved helpful because it highlighted more similarities among my participant's wine habits than I had initially realized. I kept this on my wall and referenced it often during my research and ideation phase to ensure that I was making design decisions based on my research. 

Key Research Findings

DEFINING THE PROBLEM

Once I had synthesized my research, I created several problem statements to help lead into the Ideation phase. I referenced my Affinity Map during this exercise to ensure I was creating these statements based on real pain points users had. I selected the Problem Statement below because I felt that it captured frustrations users had, but it was broad enough to allow me to explore various solutions.

Wine drinkers need a reliable and easily accessible source of information so that they can learn more about wine. 

Empathy Map

I then built an empathy map to gain a better understanding of, and to start to build empathy, for my potential users.
 
Using points from the research I had outlined in my Affinity Map, I described how my users would think/feel, what they would say/do, and what they would hear and see around them.

Persona

This persona was based on my research findings and was built with the intention of further establishing empathy for my potential users.

While designing this persona, I highlighted only relevant information and disregarded details, like job title and relationship status, which had little to do with the personas needs and pain points.

ORGANIZING CONTENT

Building a Site Map

Once I had an idea of my user's needs, I built a Site Map to outline the content which would be in this application and how it would be structured. To validate my Site Map, I created a hybrid card sort via Optimal Workshop and had 6 people participate. Below are the key takeaways:

  • The various ‘Topics’ could be grouped along with ‘Daily Lesson’ to create a larger category, possibly titled ‘Learn.’
  • ‘Content Type’ and ‘Topics’ could be grouped together under a larger category.
  • Confusion around the ‘About’ category: some users felt that meant 'About Wine' rather than 'About the App'.
  • Confusion under which category and what purpose ‘Infographics’ would serve.
  • ‘Audio,’ ‘Video,’ and ‘Articles’ could be grouped under a ‘Resources’ category.

Learning Moment: This process ultimately helped me understand how users would expect to see the navigation function, but in retrospect, I realize that I made a blunder by conducting the card sort after I had created my initial site map. On future projects, I will first conduct card sorting and have those results shape the site map.

Below are two versions of the Site Map. The first was based on my assumptions, and the second version reflects changes which came about after my card sort and usability testing:

DEFINING THE FLOW

Developing a User Flow

To think through the flow of the application, I created a User Flow of paths to complete 3 major functionalities of the app. I later revised this flow after usability testing had revealed that some participants felt that there were too many steps involved to reach the ‘Bordeaux’ page. More on this later!

User Flow: Complete the Daily Lesson, find the ‘Bordeaux’ page using the search bar and without the search bar

DESIGNING THE PRODUCT

Creating Lo-Fi Wireframes

I first completed the Crazy 8’s exercise to explore different layouts of the content. I hand sketched the main pages, referencing my affinity map often to keep what users wanted to learn, and what their priorities were top of mind. I also kept my problem statement in mind and aimed to create designs which were accessible and engaging. All of this helped determine the content and the layout of the pages.

While I was iterating on sketches, I felt that I had two versions of the apps navigation which were strong:

VA: Hamburger menu on the top left, a Search Tool on the top right, and a ‘Daily Lesson’ button on the bottom nav

VB: The Search Tool replaces the 'Daily Lesson' button on the bottom nav

I felt VA worked well because the hamburger menu would provide users another way to access different pages. By having the search tool on the top, I was able to include a ‘Daily Lesson’ CTA on the bottom nav which highlighted this important feature.

On the other hand, I felt VB worked well because it was simple, but also provided users with an overview of all of the available actions. I felt that a ‘Daily Lesson’ CTA may not be necessary on the bottom nav menu because it would be highlighted elsewhere in the application.

The only thing to do was to conduct A/B testing during my usability tests to see which version users found most usable.

Lo-Fi Usability Testing

I created a prototype using Marvel and recruited 4 participants within my targeted demographic for a usability test.

The goals were to:

  1. Test navigation VA and VB
  2. Test the overall ease of use of the design
  3. Define areas of uncertainty and/or confusion
  4. Validate the user flow

The tasks were:

  • A/B Testing Navigation: Use the search tool to learn more about wine from the Bordeaux region of France.
  • Navigate to the ‘Bordeaux’ page without using the search bar.
  • Complete the Daily Lesson and Comprehension Check.
A/B Testing Results

The usability test revealed that most participants felt that VA of the navigation worked best: they said it “felt familiar” and was what they are “used to in other apps.” They also felt that the hamburger menu was not necessary because they would be able to navigate to all of the pages using the search tool and bottom navigation.

Usability Test Participant: “I’m used to how other apps and websites have the search on the top right: it’s easy and accessible.”

Steps Following Lo-Fi Usability Testing

Learning Moment: I had a good learning moment when one user voiced that they felt that they had to go through too many steps to find the ‘Bordeaux’ page without using the search bar:

“I feel like I need to go through a lot of steps.”

I revisited my user flow and considered ways to simplify the flow, but for this purpose, I determined that all of the pages were necessary. 

Considering the nature of wine knowledge and the vast amount of content, all of the prompts were necessary to ensure that users found the information they were looking for. As it was a mobile application, it would be best to have the prompts broken out on individual pages rather than have users complete the prompts all on one long screen because this would allow users to digest the information easily and would be easier to develop since the answers to each prompts influenced the following prompt. 

With that, I did add a ‘View Topics’ and ‘View Resources’ CTA on the Home screen so users would have a way to access those categories without having to go to the Learn page. 

Building Mid-Fi Wireframes

Then I created Mid-Fi wireframes in Figma which reflected the suggestions from my usability testing. Below are a few main screens:

UI Kit

When creating the UI for this application, I selected components which tied back to my problem statement and conveyed that this was a fun and engaging application. 

When designing the logo, I wanted a design which echoed wine, but I was cognizant of the fact that a very detailed logo would lose its perceived meaning when scaled down for a mobile application. This logo here subtly emulates the shape of a decanter, but is not too detailed to the point that it would lose its meaning when scaled down. The main rose color was chosen because it was vibrant and energetic and also had good readability against a light background. It was also reminiscent of wine but not as overly used as a deep red which was a commonly used color among competitors. Lato was chosen as the primary font for its high readability, even on smaller mobile screens.

TESTING THE PRODUCT
Hi-Fi Usability Testing

One I chose the UI components and built the Hi-Fi wireframes, I then built a prototype in Figma and recruited 5 participants within my targeted demographic for another usability test. The task and goals were the same as the Lo-Fi usability test, but the results revealed different insights. Once I was done with testing, I created another Affinity Map to help me understand the data. Below are the key takeaways.

Pain Points:

Suggestions for Improvment:

Priority Revisions

After analyzing the feedback I received from the participants, I made the below key revisions to my designs:

Based on my user testing, I designed three options for the Home page which incorporated information from the ‘Let’s Explore’ page and would consequently remove one step from the flow. Due to the nature of this project, I did not have the opportunity to test these designs, but if I had the time, I would have conducted additional usability testing.

I also revised the 'Bordeaux' page based on the suggestions to trim the text and add visuals. Below is the final version:

Lessons Learned

I really enjoyed the concept of this project so it was a lot of fun to work on overall. As with any project, there were a few key learning moments: