Type:
Website
Client:
The Melbourne Wine Store
Year:
2023
Role:
Individual UX Research, Design, UI, Prototyping, Usability Testing
Tools:
Figma & Plugins, Notion
Adobe Suite (Photoshop and Premiere)
The Melbourne Wine Store is a boutique wine store specialized in classic and boutique wine and spirits. In addition to their wide range of products, they host wine tasting events. Customers can also enjoy a glass while they browse and discover their new favourite wines.
A couple of years ago, they saw an opportunity to support the local community by allowing people to order products online. They built their own website but they are not pleased with the results. They have plenty of website visitors yet few completed purchases.
Through an improved e-commerce website, they want to showcase their products while maintaining their brand image: “boutique store” appeal and great customer service.
Research
Being a wine enthusiast myself, I was deeply interested in this project and began by conducting secondary research to understand wine consumer trends, as well as the impact of COVID-19 on e-commerce in the wine industry both during and after the pandemic.
Then I continued with conducting Heuristic Evaluation of the existing website to identify usability issues. After identifying the problems I wanted to see how competitors approached e-commerce. So, I conducted competitive analysis and additionally, comparative analysis to understand how to make the
e-commerce experience more personalized.
Finally, I conducted user interviews to understand the pain-points and challenges users experienced, and to validate my findings. By combining all of these research methods, I was able to generate insights and recommendations that helped improve the website's overall user experience.
Heuristic Evaluation
Competitive Analysis
Feature Inventory Findings:
Most competitors do not display customer reviews on product pages.
Navigation is organized by country rather than by brand.
Advanced filtering options are commonly offered.
None of the competitors include a rewards or loyalty program.
All competitors support a quick “Add to Cart” feature for faster shopping.
Comparative Analysis
User Interviews - Affinity Mapping
During the interviews, users expressed their initial impressions of the homepage design, noting that it didn't reflect the boutique wine store's brand image due to the multi-colored deals. Additionally, the length of the homepage was a common frustration, as users found it unnecessary to scroll down.
“I don't want to scroll down! This is too long."
"This is a boutique wine store, not a supermarket..."
Define
During the Define stage I created a persona that clearly outlined the target audience, their goals and needs, frustrations, and their relationship with wine. This allowed me to clearly define the problem statement and create my "how might we" statement, which guided my approach to the project.
From there, I developed the main user flows for the new website, including product discovery, personalized experiences through subscription, and most importantly, the check-out flow. These user flows will serve as the foundation for the redesign of the website, ensuring that the end result meets the needs and goals of the target audience.
Persona
Problem Statement
How Might We...
Jeremy needs a way to find new wines based on his taste and purchase them quickly because he doesn’t have enough time to visit the wine shop.
How might we help Jeremy to have a better and personalised online shopping experience when purchasing wine?
User Flows
Product Discovery
Personalized Experience
Check Out
Ideate
“I don’t want to scroll down!” This feedback kept resonating in my mind, and I was determined to create a new navigation system that would eliminate the need for scrolling. To explore how this system could work, I began by creating a site map to simplify the website's structure and explore how users could move between different screens. I then developed an information architecture diagram to categorize the products
While sketching, I thought of the screens as artwork that could slide in and out, up and down, creating a seamless user experience. Finally, I created grayscale wireframes to test the proportions and the new navigation system, ensuring that the design was both functional and visually appealing.
Site Map
Information Architecture
Wireframes
Prototype
As the new navigation system was a key element of the design, I developed a fully interactive prototype that allowed users to experience it in action. This was essential to ensure that users could fully understand and engage with the new system.
The prototype also featured a minimalistic visual design, with pastel tones for product backgrounds and greys for the overall website, to ensure that the focus remained on the products.
UI Design
Interactive Prototype
Product Discovery - Browse
Click to Play Video
Product Description Page
Click to Play Video
Site Navigation
Click to Play Video
Landing Page - About / Business Value
Click to Play Video
Check Out
Click to Play Video
Subscription - Wine Tasting At Home
Click to Play Video
Test
I conducted usability tests with various tasks centred around the new navigation system, locating products, filtering, and checkout flow. The goal was to evaluate the overall user experience and the design's usability.
Additionally, I tested the prototype with front-end developers to gain their perspective on the design and engage them in the process to make future collaborations easier. After conducting usability tests, I identified areas that needed improvement and iterated the design accordingly.
Usability Testing
Task Success
= coped at the first attempt
-
-
-
2
1
0
= coped but with difficulties
= couldn’t cope at all
👉
No. of Tasks
No. of Testings
Full Score
TOTAL
10
x
x
=
3
2
60
57 / 60
I was a bit nervous about the usability tests. Since I was proposing an unusual navigation system, I was uncertain if the users would be able to navigate through the site seamlessly and complete the tasks. Fortunately, all the tasks were completed successfully in less than 2 minutes. That was a relief!
Iterations - What can be improved?
Outcomes
Based on the feedback received from both business stakeholders and users, the outcomes of the project were positive. The new navigation system successfully eliminated the scrolling pain-point and made the user experience more intuitive.Users appreciated the minimalistic visual design and the several ways of locating a product.
Business Feedback
User Feedback
The business managers provided positive feedback regarding the new design of the website. They particularly appreciated the clean page layouts and the use of pastel colors and grey tones that helped to emphasize the products. Compared to other examples they have seen, they found the proposal much better. The new navigation system and the overall website improvements impressed them, and they expressed a strong desire to implement the design.
"Super clean and very easy to use! Love the design and I want to buy wine!"
"This so cool. Now I want to drink! It looks great!""
If you would like to know more about the project