A mobile application about wine learning
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.
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:
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:
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.
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.
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.
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.
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.
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:
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:
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
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:
The tasks were:
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.”
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:
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.
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.
Suggestions for Improvment:
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:
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: