Overview
Virgin Wines, a popular online wine retailer headquartered in Norwich, United Kingdom, has recently undergone a rebranding initiative and is continually refining various aspects of their website. Teaming up with a group of five talented designers, our objective was to enhance their online presence and elevate the user experience, contributing to their ongoing evolution and growth.
MY ROLE
UX Research
UI Design
(Team of 6)
DESIGN PROCESS
Discovery
Ideation
UI design
Test and iterate
Pitch Concept
TIMELINE
7 weeks
TOOLS
Miro
Figma
Challenge
The client aimed to enrich their About Us and Events website pages, as well as improve checkout process retention, all while staying true to their brand guidelines. Our mission as a team was to enhance the user experience in these specific areas.
Solution
While remaining faithful to their guidelines, we adopted an iterative design process to yield tangible outcomes, which included attention to detail, content organization, and hierarchy.
2. Research
Together as a team, we engaged in various UX research methods to broadly understand the scope of the problem. My responsibilities included conducting heuristic analysis, statistical research, competitor analysis, and familiarizing myself with the core brand guidelines.
Insights from heuristic analysis
Insights from statistical research
Insights from Competitor research
The current design lacks:
Clear page headings.
Interactive and engaging designs.
Hierarchy and content organization.
Attention to detail
Stats revealed:
Substantial users navigated to “help” while on the About Us page, indicating users may be uncertain about their objectives.
85% of individuals dropped out at the second step of checkout process.
The need to add more interactive features.
I found:
Design consistency across pages.
Subtle motion animations (good attention to detail).
Great content layout.
2. Ideation
In response to our research findings, we initiated the process of generating solutions, distributing tasks among the team. My primary focus was on designing the mobile versions of the About Us, Events, and Checkout pages. Consequently, I started putting together a moodboard for inspiration and began sketching ideas.
Considering a wine pouring animation, rethinking content organization, and incorporating bold words reflecting company values, as proposed by a team member.
Some of my design ideas in detail
Experimenting with hierarchy and content organization, prioritizing "Events Near Me" at the top of the events page for easy accessibility.
Revamping the "What to Expect" section on the events page from its initial static format, incorporating a more dynamic flow design and interactive tap feature for users to explore additional details.
3. UI design
While staying true to the brand guidelines, I developed wireframes as the foundation for my designs, providing a framework for the final product.
Before
Before
Final outcomes
About us page
After
Events page
After
Before
After
Before
A quick little fun interactive design where users are able to tap each informative circle to reveal more information!
The Idea behind this design was to reduce the amount of text on the screen making it minimal and simplistic.
Before
After
Interaction design
After
4. Test and iterate
As I wasn't directly involved in the testing phase, my contribution to this part of the project was minimal. However, after the testing was conducted, we documented areas for improvement.
5. Pitching our design suggestions
Finally, the day arrived to present our ideas to the CEO and the Virgin Wines team. Although I was incredibly nervous stepping into the room, I conveyed my ideas and had a enjoyable experience.
