The Beauty and The Taste website redesign — UX case study

Introduction:

Our client Claudio’s business was very new, we had learned:

• The company was only founded in February 2019.
• It was an e-commerce boutique which sold hand-picked wines.
• Claudio believes good storytelling sells their wines which is also the company’s concept.

Brief:

• To create a smoother journey for the users of the website, which would lead them to purchase.
• Ease of navigation for its users and identify any blockers that may arise. Most importantly we needed to reduce Claudio’s bounce rate.

(We did not have a look at right away at his analytics, as we did not want that to hinder our assumptions without testing ourselves with users).

Research overview

• Website analysis of the current setup,
• User testing
• The first batch of user interviews.

What do we understand?

The layout seems to be pretty clean with nice use of white space, the icons are clear and we understand what they represent. However, where does the ‘Regions page’ take us?

• Continuing with the website analysis: There are 2 pages called ‘The Taste’. The first, on the left which has some fantastic information (taste card), key specifics about the wine: the year it was produced (Vintage), with important information such as ‘Producer and also the Region’.
• The second page also has the same named tabs but the information is different, (we’re on the regions section) Here ‘The Taste’ has specific wines from the regions, having 2 pages with same named tabs could be confusing for the user.

Based on our analysis and assumptions, we needed to understand what users thought about the concept Claudio was so passionate about. What were our user’s first impressions?

• We needed to measure the ease of navigation throughout the website by asking our users to successfully purchase a bottle of wine and feel confident with their choice.

The first scenario:
To purchase wine that would impress a business contact.

The results even surprised us, we did not expect the below:

Key insights based on 10 user tests

Our User Tests key Quotes…

“Why is there so much text to read?”

“Why no photos of grapes or wines?”

Persona

Claudio had given us 5 personas which ranged from a newbie, right through to a wine enthusiast with an array of similar personality traits. We gathered the research from our users together with the wants and needs into a single user, thus creating a persona.

Problem statement

• John needs a fine wine to impress his boss because he is coming over
  for dinner.
• John also wants to be able to talk about the wine with his boss.

What we understood from the experience mapping:

• The initial visit to the website wasn’t so good John is confused with the whole concept, 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.

However, some of the users that did manage to add a wine to the basket sailed through pretty easily, right through to the checkout. What we wanted to do was bring the first section of the experience to match the later.

Clients analytics

The chart above is based upon the Google Analytics we received from our client:

• There was a 56% drop-off within the first click onto the website.
• 38% of those that landed on the product page.
• 36% that landed on the homepage.

We had to find a way to reduce this amount and tackle the issues that were found through our own user testing and gathered from insights from the analytics.

We were coming up to the ideation phase of the project, below we created the ‘how might we statements’ to understand the problems we were trying to solve without getting into specific solutions.

How might we…

• Weave the story into a purchase decision?
• Make it easier for the customer to navigate through the site?
• Clearly, show the USPs?

Design Studio

As we were now in the development phase of the project, it was the perfect opportunity to set up a design studio for the areas we wanted to focus on with the full team and our client Claudio.

After a short presentation with what we’ve been doing for the past week,
we were able to focus on the concept and passion Claudio felt so strongly about and the important USP’s that weren’t being shown. We collaboratively sketched ideas with time-boxing and came up with ideas to address the problems.

We were able to focus on the areas that were causing the most confusion with our users, also the initial section of the research overview of the website analysis: The Beauty and The Taste Tabs.

Home page sketching and wireframing

Low-fi wireframes

The Beauty and Taste tabs on the homepage weren’t being understood clearly by our users, the tabs made most feel uncomfortable, “where do these lead to?” or “what information would be available once clicked?”

Mid-fi wireframes

Through the ideation process, by giving these sections their own space our users now felt intrigued and they clearly understood what type of information would be available to them. No surprises!

Product page wireframing

Most users felt the current setup had too much content to read, some users did say during testings they liked it was there but didn’t want to read it, we also found this during our website analysis. Big chunks of text were hard to read and take specifics from, our users wanted interesting facts and key information that would subject them to find out more and educate which would end with a purchase.

We placed target information such as the region, an independent critic rating and also flavors of the wine to be used together with easy to understand icons which created a neat and visual way of showcasing the information. The feature used was expandable tabs that users were in full control of, this feature tested really well!

Customisable Taste Profile

Another feature which was developed was our concept: Customisable Taste Profile — Get shown results based upon your unique wine taste and preferences. Our users felt this was a more intuitive way to browse and it was easily accessible to newbies, which guided the user and helped them make the right decision based on their individual requirements. We were hitting some of the main pain points discussed earlier and most of our users loved the concept!

Last section of the process… Deliver.

User Flows

We redesigned user flows to ensure all paths lead to checkout, the new steps allow users to use the existing concept which has been streamlined and adds features to the site assuring they’re in control every step of the way with guidance.

Link to the prototype: https://vimeo.com/336375595

The client took on our findings and is enjoying much better engagement. see the finished website here.

https://www.thebeautyandthetaste.co.uk/

Next Steps

1. Review and reduce the amount of content.
2. Review the filters on the product page.
3. Explore Customisable Taste Profile further.

Takeaways from this project

1. The website had a large drop off rate from the 1st click of the website, through user testing, synthesizing the analytics and creating the end solution we were able to reduce this by a significant amount as users were no longer confused with the concept and could successfully purchase wine and felt they’d learned something in the process…
2. The current business model had some great USP’s but they weren’t being showcased, we implemented these into the framework by content hierarchy into the final prototype, users were now keen to use the website and felt great doing so.
3. From the two and half week sprint, we ended up with a prototype that fits the clients and users needs basing upon user research, which can be further streamlined and implemented into the current website.