The Beauty and The Taste Case Study
E-commerce website design – UX UI Designer
The Beauty and The Taste
Introduction
About
The Beauty and The Taste is a start-up fine wine boutique based in Bow – London, United Kingdom. The company was founded in 2019, selling researched and hand-picked wines mainly through their blog. The umbrella company of The Storytailers Ltd, as their first project, the concept behind the company – good storytelling sells their wines.
Responsibilities
– Quantitative & qualitative research
– UX research
– Visual design
– Interactive prototyping
– User testing
My contribution
My role in this project was as a UX designer working in collaboration with another three UX designers and managing stakeholder relationships with Claudio our stakeholder. My work consisted of leading user research, data synthesis, and collaborating with the UI / visual design inc wireframing.
Team size
– x4 UX Designers
– x1 stakeholders
Step 1 Discover
Starting with a discussion with the other UX designer and stakeholders to better understand feature requirements, gather existing stakeholder knowledge, expectations and create a roadmap on plans and priorities for a product, its direction and collaborative milestones.
The problem
Google Analytics showed a massive 56% drop off rate within the first month of launching from the first click on the homepage and 26% from the online shop.
The goal
A new experience to boost the company’s revenue and reduce the drop off customers.
To create a new and fully functional eCommerce website with a newly designed information hierarchy and features that can provide fulfilling user journeys with more than 1 user flow leading to purchases.
Heuristic evaluation of the current website
The Beauty and The Taste already had an eCommerce site that wasn’t performing very well, we decided to conduct a heuristic evaluation to test whether their website was user friendly. This would help us define assumptions that we could user test in the next steps.
Key findings and assumptions
– Two pages called The Beauty and ‘The Taste’ could lead to confusion, the first: Product page has some valuable information as does the second page, Regions.
– The navbar and user flow don’t seem intuitive to make purchases.
– Business goals didn’t match user goals.
– Users could feel overwhelmed with the amount of text on the website.
– Visually this didn’t look like a website that sold wine, this could hinder the purchase decision.
User testing
Affinity mapping
• 6 of 10 felt the whole concept from the storytelling to the purchase was not clear.
• 5 of 10 were looking to be hand-held throughout the buying process, they expected to be guided.
• 7 of 10 felt the website did not look like a shop that sold wine.
• 10 of 10 felt there was too much text on the current website.
Step 2 Define
Persona
Our stakeholder gave us 5 personas, from the newbie to the expert. We focused on 1 persona, as it works for all.
John
35-55 years old
Works – Professional
Location: London
Alex’s quote
“During my aunt’s funeral who was buddist, I was an emotional wreck, I like to see the actual products and know it will be delivered on time, I feel a human connection is important during my purchases for funeral services,”
About Alex
Relies on personal service.
Likes actual product images
Easily frustrated when the product doesn’t match the initial images shown.
Problem Statement
– John needs a fine wine to impress his boss because he is coming over for dinner.
User journey
– John feels the website isn’t as expected and he felt it did not look like a wine selling boutique.
– There is no easy way to purchase a bottle of wine, find out more about a specific wine and buy more than one.
– Product page itself has too much text in its sections, John felt overwhelmed with the amount of text, there wasn’t a beginning, middle and an end and John is confused.
Hypothesis
We believe that by guiding John through the experience, he will understand key facts and differences between fine wines and ultimately choose the right product for him.
Step 3 Develop
Proposed user flow
The new and improved user flow has 4 ways which all successfully lead John to purchase, easily and efficiently.
Design workshop
– Define the home and product page
– Communicate USP’s
– Ease of navigation through the website
Design workshop results
Collaboratively we sketched ideas with time-boxing and came up with ideas to address the problems, these were then tested, iterated and implemented through each section of the lo-fi, mid-fi and hi-fi prototypes with Sketch and InVision.
Wireframes & validation: Lo – mid – hi fidelity (homepage)
Lo – fidelity wireframes
Mid – fidelity wireframes
Mid – fidelity wireframes
• 7 of 7 Users found it frustrating to guess what was inside these two sections, they felt overwhelmed with the whole experience.
– Aesthetically the page wasn’t revealing much that this was a website that sold hand-picked wines from around the world.
– The beauty tab has been iterated to its own section. We can now search the region, find interesting facts and buy wine easily.
– Search by taste profile is a new concept, users can select buttons of their choice based on their unique taste preference and a selection is shown.
- 100%
HI – fidelity wireframes
HI – fidelity wireframes
• By clicking into Beauty card enabled users to learn where the wine is produced, 6 of 7 felt they had gathered interesting bite-sized facts which would lead them to purchases.
7 of 7 users were no longer confused about the ‘Search By Taste concept’ they felt the interactive and personalised feature was fun to explore!
– Showing what users wanted and needed, helped with multiple purchases of wines that matched their specific tastes.
Wireframes & validation: Lo – mid – hi fidelity (taste profile)
Lo – fidelity wireframes
Mid – fidelity wireframes
• 4 of 5 users felt there weren’t enough options to refine their choices and needed more taste profiles.
• 3 of 5 Users felt connected, they could interact with the module as it would show results based on their unique preferences easily and quickly.
- 100%
Hi – fidelity wireframes
• 4 of 5 users expected to be able to go back on desktop, we added breadcrumbs to the top of the page, it was important to have as a navigation element to support wayfinding, making users aware of their current location within the hierarchical structure of the design.
• Having just 3 variations of flavours wasn’t providing 4 of 5 users with enough choice based on their specific taste profile, including 3 more flavours ensured we had covered most taste profiles users associated with wine.
• 3 of 5 users would only pick some wines based on the acidity levels, by including a slider button users may set a value by moving an indicator horizontally to match the level of acidity required to purchase their selected wines.
• 5 of 5 users would use this concept and relate to the available options.
Wireframes & validation: Existing – Lo – mid – hi fidelity (product page)
Current website
Lo fidelity
Mid fidelity
Mid fidelity
Mid fidelity
• 3 of 5 users did say during testings they liked it was there but didn’t want to read it, the same was also found during the heuristic evaluation.
– Big chunks of text were hard to read and take specifics from.
– Users wanted interesting facts and key information that would subject them to find out more and educate which would end with a purchase.
• The feature now had expandable tabs that users were in full control of, this feature tested really well and 4 of 5 users did not feel overwhelmed with the amount of information anymore and learned something during their experience.
- 100%
Hi fidelity
Hi fidelity
Hi fidelity
Hi fidelity
Design system
Colour palette
– Having too many colours may confuse the user or bring their attention to less important areas.
– The design started in black and white as it was easier to concentrate on layout, element spacing, usability, readability and accessibility.
– The green brand colour was applied when the highlight was needed to show the added value that couldn’t be shown in black and white.
Fonts
Buttons
Input Fields
Scenario
John needs a fine wine to impress his boss because he is coming over for dinner. He also wants to be able to talk about the wine and share some nice facts about his choice.
Step 4 Deliver – final version
What I learned
• I learned from the initial client meeting, we understood that communication is key to understanding the direction to be followed.
• I learned working collaboratively, we were able to define and refine our goals to work efficiently throughout ideation.
• I learned how to balance business goals and users’ needs, and the importance of user testing throughout the design process.
Challenges and adapting
The biggest challenge was to reduce the large drop off rate from the 1st click. It was through user testing, synthesizing analytics and creating low, mid and hi-fidelity prototypes, we were able to reduce the bounce rate significantly.
The current business model had some great USPs, but they weren’t being showcased. By implementing these points into the framework and developing a content hierarchy within the final prototype, the user experience was improved greatly.
What I would do differently next time
The amount of text on the homepage was excessive, but we were expected to maintain all of it in our redesign. Next time I would allocate more time on the roadmap to considerably reduce text if that were the problem whilst redesigning without losing valuable information.
