Viniant
A wine app that helps people find and buy the perfect wine. Cheers!
Embedded Files
My role
UX Designer from conception to delivery
Responsibilities
UX Research, Usability Testing, Wireframing, Prototyping, IA, UX Writing
Project duration
February - August 2021
CHALLENGE
For my very first UX Design project, which I carried out during my UX Design Course at corsoux.it, I decided to create an e-commerce mobile app for a wine shop focused on the customers' needs to offer a comprehensive user experience and drive customer engagement.
SOLUTION
Viniant is a native e-commerce mobile app that allows people to explore the world of wine and easily find and purchase the best wines for them, regardless of their level of wine expertise.
COMPETITOR ANALYSIS
As this was my first UX design project, I started off by having a look at similar products on the market.
I analyzed 3 direct competitors of my wine app (i.e. apps offering further functionalities in addition to searching and purchasing) and assessed their usability based on Jacob Nielsen’s heuristics. In a SWOT analysis, I identified the strengths and weaknesses that a new wine app could leverage.
KEY INSIGHTS
The main weakness I found was some level of inconsistency due to visual elements like unevenly cropped pictures, but also varying sale conditions across different merchants. I also found the redirection to external merchant websites to be detrimental to the user's flow. A potential opportunity I identified was including users with limited wine knowledge. For my further user research, I decided to assess the user value of extra features such as label scanning and social media functionalities.
Competitors
SWOT analysis of the Wine-Searcher app
Heuristic evaluation of the Delectable app
USER INTERVIEWS & SURVEY
In order to collect quantitative and qualitative data, I created an online survey and interview script. I recruited participants based on the diversity criterion of including as many age groups and levels of wine expertise as possible.
The survey questions were grouped into 4 sections - Demographics, General relation to wine, Using wine apps, and Buying wine through wine apps - with exclusion criteria placed at the end of each section -, and were answered by 48 wine consumers.
I then conducted 5 semi-structured interviews aimed at gathering general feedback as well as further exploring the main topics that had emerged from the survey.
KEY INSIGHTS
Participants were not overly bothered by being redirected to external vendors (this is an example of the importance of user research, since I initially assumed the opposite).
Although no / limited wine knowledge was prevalent, a fair amount of participants were wine connoisseurs to be catered to with expert content and advanced search filters.
Label scanning was popular, but not directly linked to buying wine. This functionality could therefore be strategic in attracting users and turn them into customers.
While ratings and reviews were highly appreciated, most participants did not feel the need for extensive social media functionalities like sharing or inviting friends.
A need for a streamlined, easy-to-use search emerged, but participants also named a wide range of search criteria they used/wished they could use. This was a challenging insight that I addressed in the prototyping and usability testing phase of the project.
Survey form
Result graphs
"My friends talk a lot about wine. I wish I could impress them with my wine choices."
"I like to keep track of my favourite wines on the go."
"I enjoy a good glass of wine, but who has the time to delve into all that wine science?"
Interview quotes
PERSONAS & USER JOURNEY MAPS
Based on my previous research insights, I condensed the users' wants, need and frustrations into 2 personas reflecting the main target groups I identified: people in their 30s with a limited wine knowledge, and people in their 40s with a more extensive wine knowledge. I also mapped their user journeys to stay focused on the intended users throughout the design process.
Persona 1
Persona 2
User Journey Map for Persona 1
MVP & LANDING PAGE TEST
After defining the features to be included in the Minimum Viable Product (I excluded external merchants), I created 2 landing page variants and submitted them to 22 users. Five-Second, First-Click and A/B tests were carried out online to gauge the landing page’s ability to convey the general purpose of the app and the impact of its elements.
KEY INSIGHTS
The working name ‘Whirero’ (from white, red, rosé) proved hard to remember. ‘Viniant’ - which combines ‘vino’ and ‘brilliant’ - performed significantly better in later testing.
The word ‘sommelier’ resonated with users and was included in the app tagline ‘Your digital sommelier’.
A light design was clearly favored over a more serious dark red and black version.
A/B test
UX WRITING
To find out what words users would most naturally use to describe (and look for) specific aspects/features, in an online Cloze Test I asked participants to fill in blank spaces with the most appropriate words that came to their minds.
I then created a style guide detailing the voice, tone, and writing rules for the app to ensure copy consistency.
KEY INSIGHTS
Most users stated their main goal is to 'discover/know' wine. Therefore the search screen of the app was called 'Discover'.
Cloze test
Style guide
CARD SORTING
Next, I prepared an online card sorting study with a hybrid design, where participants were shown predefined categories but could also add their own. 40 cards detailing various actions that users might carry out in the app were created and participants were asked to assign them to the most relevant category. The results shaped the interaction structure of the app.
KEY INSIGHTS
A majority preference could be established in 90% of the cases. In the remaining 10%, no decisive card/category combination emerged and I relied on subsequent usability testing to identify the best location.
The ‘Info center’ category (indicating an informational area about wine) was misinterpreted by the participants. So it was renamed ‘Learn’ in an iteration, with better results.
Card sorting study
SITEMAP
The app main navigation includes 5 areas:
Home page
with product recommendations
Discover page
with a search bar, search filters and recent searches
Scan page
for getting information about a wine by taking a picture of its label
Learn page
with news and articles related to wine
Settings page
with access to the account and app settings
Note: The Viniant app was designed to also offer customers after-sale assistance, e.g. through a support chatbot and order tracking features. However, this area was not part of my usability tests due to the technical limitations in simulating these features.
USER FLOW
In order to shape the interaction design of the app and determine the screens I needed to design, I drew the specific user flow of each persona and a general user flow for the app.
WIREFRAMES & PROTOTYPES
At this point, I started designing the actual interface of the app by sketching the screens on paper for quick adjustment. Then I moved on to low-fidelity and high-fidelity wireframes, with which I created interactive prototypes to be able to carry out usability tests.
VISUAL DESIGN
For the visual design of the app, I took into consideration all the insights from my previous research. Drawing inspiration from a moodboard I defined the app’s visual style and designed all of the app’s UI elements.
I chose shades of blue for a fresh, reassuring feel and complemented them with a vibrant red, which is the color most commonly associated with wine. I used orange as a negative semantic color to keep it apart from the accent red color.
The elegant sans-serif Raleway typeface is reminiscent of the classic style of wine labels and is complemented by Open Sans for better readability at small sizes.
Primary
Accent
Neutral
Semantic
The logo animation for the app splash screen
Cursors
Chips
Tooltip
Selection
Buttons
Input fields
Search fields
Icons
Typography
USABILITY TESTING
By submitting the prototypes to users for testing, I was able to gain valuable insights into the issues they encountered and create iterations in order to address those issues.
Participants were prompted to complete predetermined tasks within the prototypes in a think-aloud setting. I measured success rate and time to completion and gathered qualitative feedback.
One of the iterations that followed my usability tests
CHALLENGE: FILTERS
One of the main design challenges in this project was to shape the search filters as efficiently as possible.
Wine can be chosen based on a wide range of parameter sets, each of which comprises a large variety of further options (just think of the amount of countries or grape varieties there are). Therefore, a list view was not viable as it would have implied a huge amount of scrolling.
My first attempt at a solution was to have bottom sheet overlays open for each parameter, where users could search and scroll through the available options and select them. This approach, however, required a fair amount of clicking and was not successful in usability tests as participants found it rather cumbersome and confusing.
The second solution I came up with was to use horizontal sets of chips for each parameter, so that users could scroll through them without leaving the main filter screen. As scrolling chips proved to be an inefficient search method when a lot of options existed, secondary search fields were added to allow users to quickly reduce the number of options shown.
Another aspect I had to consider was whether to start showing search results right after the first filter was set (e.g. if a user filters for red wine, a list of red wines is presented and the user can then reopen the filter page to refine his/her search by setting additional filters) or to let users set all filters before showing any results. I eventually went for the latter because it ensured a smoother user experience in usability tests. Participants appreciated the ability to review and adjust their filter selection at the bottom of the page before moving on to the search result screen.
Wine can be chosen based on a wide range of parameter sets, each of which comprises a large variety of further options (just think of the amount of countries or grape varieties there are). Therefore, a list view was not viable as it would have implied a huge amount of scrolling.
My first attempt at a solution was to have bottom sheet overlays open for each parameter, where users could search and scroll through the available options and select them. This approach, however, required a fair amount of clicking and was not successful in usability tests as participants found it rather cumbersome and confusing.
The second solution I came up with was to use horizontal sets of chips for each parameter, so that users could scroll through them without leaving the main filter screen. As scrolling chips proved to be an inefficient search method when a lot of options existed, secondary search fields were added to allow users to quickly reduce the number of options shown.
Another aspect I had to consider was whether to start showing search results right after the first filter was set (e.g. if a user filters for red wine, a list of red wines is presented and the user can then reopen the filter page to refine his/her search by setting additional filters) or to let users set all filters before showing any results. I eventually went for the latter because it ensured a smoother user experience in usability tests. Participants appreciated the ability to review and adjust their filter selection at the bottom of the page before moving on to the search result screen.
Note: Filters were particularly important for users with limited wine knowledge who mainly used the app to find wines with certain characteristics. More wine savvy users tended to use the search bar to quickly get to specific wines instead.
(FINAL) PROTOTYPE
Click on the image below to open the (final) prototype of the Viniant app in Figma.
GOING FORWARD
Viniant is an e-commerce app, so it would be vital to measure the viability of this hypothetical project against the resources and objectives of a real business.
For the time being, I enjoyed enormously designing this product by focusing purely on the user experience.
WHAT I LEARNED
This first project taught me how important it was to keep the user front and center and double check my assumptions to overcome my own bias and achieve a useful and usable user interface. Tests and iterations proved extremely important to cater for users' needs.
Although there is always room for improvement, I gained a lot of valuable insight into UX Design, from a general point of view and a more practical one, like the importance of keeping my Figma files and resources tidy :)
More projects:
Green
Your Way
DIY Hub
Google Sites
Report abuse