Willow springs Winery Rebrand
Willow springs Winery Rebrand
Willow Springs Winery is a local winery looking to increase their e-commerce presence and simplify the online experience for their consumers. Working alongside two other engineers, we aimed to help further solidify Willow Springs Winery’s online brand both visually and from a user experience perspective.
Company
Willow Springs Winery
Year
2022
Type
Visual Design
Interaction Design
Problem definition
Situation Impact Statement
Design a more cohesive e-commerce experience for their consumers while allowing flexibility for the business to launch new products & experiences
The original Willow Springs Winery website was created in 2010. It was designed without any intention of selling wines or event packages online. As the business grew, the employees found it difficult to keep up with updating their database with new wines and changing prices, and users found that the website was too cluttered. The lack of customizability of the website’s backend database increased the cognitive load and decreased the usability. The site did not prioritize important features of the user, causing frustration.
Exploring User Flow
To start the project, I had to get a better understanding of the current experience on both the consumers and the business’s side. I had meetings with the WSW team members who were responsible with the upkeep of the website as well as the website’s engineers to learn about the history and design decisions. I explored the site myself as a consumer and WSW team member, to further my understanding I watched FullStory sessions to conduct heuristic analysis. This allowed me to map the old user flow and pinpoints parts in the process that can be improved
Consumer User Flow
Retailer User Flow
Quantitative Metrics & Data
To further our understanding, quantitative data from the website was collected. This way we are able to make data driven decisions while also identifying patterns & trends from the users behaviour over time and pinpoint exactly which aspects of the websites are working well. Using Google Analytics, the bounce rate and task completion rate (i.e. how many users completed a purchase) were measured
63%
of users left after the second interaction
55%
Bounce Rate
93%
of users left the site without purchasing any wines
67%
of users left the first interaction
The high bounce rate and low task completion rate indicates that users are not finding what they are looking for on the site. To dive even deeper into some of the core issues with the site’s usability, qualitative methods such as user testing and heuristic evaluation was conducted.
qualitative metrics & Findings
To conduct the evaluation research, I recruited another PM and a developer. While an individual analyst can perform heuristic evaluation, the odds are great that this person will miss most of the usability or other human factors problems. Nielson reports that, averaged over six projects, only 35 percent of the interface usability problems were found by single evaluators. With a total of 3 evaluators, the usability of the site was evaluated over the 10 Usability Heuristics for User Interface Design. Given the high bounce rate of the site, it was important to conduct moderated user tests as well to get a more thorough understanding at which points of the process could be overwhelming. I recruited 5 individuals that had previously purchased from the Willow Springs Winery store. I decided to give them each a few scenarios with tasks to complete involving the website.
Based on the usability test and follow-up interviews, these were the most pressing issues that needed to be addressed.
Major Findings & insights
01
Visibility of System Status
This refers to the ability of users to understand what is happening within the system at any given moment. Given the high bounce, we need to explore this aspect of usability as it provides users with a sense of control and reduces confusion and frustration.
In our case, having no search or filter functionality can make it difficult for users to understand where they are in the process of browsing and purchasing products. The users are not confident in knowing if they have successfully added a product to their cart, or if their purchase has been completed.
02
Aesthetic and minimalist design
Aesthetic and minimalist design refers to the idea of designing user interfaces that are simple, uncluttered, and aesthetically pleasing.
The heuristic evaluation of the website revealed that there was a lack of consistency between product images. Images were taken with different backgrounds and promotions were highlighted using a huge variety of fonts and colors.
New users find it hard to understand the organization of products and categories, leading to confusion and a decreased sense of control over the purchasing process.
Defining objectives and key results
The issues with the site were narrowed down into OKRs that could allow our designers and developers to solve the issues. By boiling down our research into goals, it ensures that our later design decision are grounded in user research and can actually solve the problem.
Objective o1
Improving System Visibility
I started with low-fidelity prototypes with different options for search and filter functionalities. Three different prototypes were created that explored where the search and filter functions should be shown on the webpage. Another idea explored was how advanced should the search should be. For example: Basic vs Advanced vs Autofilled search functions.
Different options were tested amongst the team using contextual inquiry testing methods. Then, several customers of Willow Springs Winery was gathered and I guerrilla tested the several options that were prototyped. At the end, it was decided to implement three new functions to aid with the discoverability of the site. A filter option, sort by option, and a search function (with suggestions) by the header of the site.
Objective o2
Aesthetic and minimalist design
Since the website contains over 100 images that were taken and edited with no specific design in mind, there needs to be a more consistent and aesthetic way to display the products.
A main goal was to define a consistent colour palette for the site. We went through images, links, CTA buttons, headers, and backgrounds on the site and pulled the colours being used. After placing all the colours into one cohesive file, we had to work to define one singuluar palette
To make the adoption process as smooth as possible, we want to suggest colours that match closely to what exists today, but with some tweaks.
Using IBM’s Color Philosophy which suggests that certain colors evoke specific emotions. Following its philosophy there are three things to keep in mind when choose the final color palette.
Emotion
Context
Functionality
With these three design goals in mind, I wanted to design a palette to try and reflect sophistication and luxury, a mission of the Willow Springs Winery Brand. I also kept in mind the functionality of the website and chose colours that are easy to read, clear, and have good contrast, allowing for clear navigation and ease of use.
I created a few mockups of different colour palettes using our prototypes. Then I conducted A/B testing with 10 different users. I asked follow up questions such as which one they believed delivered a more luxurious aesthetic and to rate their overall satisfaction with each version. I also gathered metrics such as bounce rate and engagement.
Design Validation….Testing Again!
To verify the design solution proposed, the high fidelity prototype was tested again through 5 moderated user tests. The quantitative metrics were also gathered to verify the solution and to check if the key results were met.
Final Thoughts and Reflections
I think we’ve made strong first steps already into improving the user experience. It’s clear from the design validation that users are having a simpler time navigating the website. When I was first brought onto this project, I was overwhelmed by the website’s lack of functionality and poor design. It was hard for me to know what exactly to prioritize. However, by executing user research and gathering quantitative metrics that I could use to inform design choices was able to help me yield desired results.
I loved being able to work on projects like these, and will definitely be looking for more opportunities!