UX Design
E-commmerce redesign - Coronation Berlin
Project Brief
Scope: Product Strategy, UX-Strategy, UI-Design, Redesign, Styleguide
Timeframe: 2 weeks to redesign Coronations website based on research, findings and the UX/UI process.
Coronation Berlin is an eCommerce store, selling actions ports gear with a focus on kiteboarding. In addition to their online presence they also have a physical store in Berlin.
The first question that came to our head was: ‘What kind of people do we have to picture when thinking of someone who is chasing an extreme thrill, someone who voluntarily enjoys being at the mercy of the wind?’ We have to think about people that are seeking stimulation and excitement. The thrill-seekers, people who search for arousal, and are risk-takers — a personality dimension that has been described as The Type T personality.
Persona
To start off, we created a provisional persona of a potential Coronation customer, based on the data that was provided by Coronation Berlin which were complemented by our survey results. *Coronation represents the stakeholder.
Our stakeholder has 13 years of eCommerce experience, therefore they do have a good picture of their regular customer, which again, was reassured by our survey results. Both, the stakeholder's data and our survey results confirmed our first assumption. Our typical user who is shopping at Coronation Berlin has most attributes of the Type T personality, which has played a key role whilst creating the persona.
Our persona was something that we came back to throughout the project to guide our design decisions and priorities.
Problem Statement and Pain Points
In order to formulate a problem statement, we conducted an in-depth interview with our stakeholders to clarify what their main pain points are. Once we identified the stakeholder's biggest pain points, we interviewed 5 of Coronations customers to identify their pain points. As a conclusion, we came up with 2 problem statements:
Stakeholders pain points:
Very high e-Mail volume regarding sizing questions.
High return rate, which leads to costs for the company.
Customers pain points:
The user finds it hard to navigate the current website.
Inconsistency makes the website feel untrustworthy.
- Problem Statement — Coronation needs to communicate all necessary product information so that the email volume can be decreased because otherwise, tasks that need to be prioritized will not be fulfilled.
- Problem Statement — Kiteboarders need to be able to find their wished product within a few clicks because otherwise, the customer leaves the website frustrated.
Guerrilla Usability Testing
We were able to identify the main pain points from each perspective as seen above. To validate the fact that users find it hard to navigate through the website, the next step in our process was guerrilla usability testing. We formulated the tasks in a way so that the testers did not need to be kiteboarders themselves, such as:
- You are new to kitesurfing and you want to buy a completely new set-up: Where do you find information about sizing and how do you find out what is needed in a full set-up?
- You want to buy a new Kite. The model that you are looking for is ‘Core Nexus 2018/19’ in the size 12m²: What do you do?
- You want to find out about special deals: What do you do and where do you start?
To execute the guerilla usability test, we followed Nick Babich’s 7 steps:
- Approach a person
- Introduce yourself and ask if they would like to participate in product testing
- If they agree, get basic information about them
- Give them a few scenarios to do
- Observe their interaction
- Ask about their experience
- Thank and reward them for participation
We tested the tasks with five individuals. The result was clear — each user had difficulties to navigate through the website and fulfill the given tasks. All five ended up using the search bar to find the requested information. This meant to us that the customer's pain points, mentioned during the interview phase, were validated.
Finding Opportunity
We went deeper into the UX-Research to find further opportunity and validation of our findings so far. We created a survey which was posted in various kiteboarding groups that were relevant to the project. Once we found out that most people buy new gear less than once a year or a maximum of 1–2 times per year, it became clear that the website needs to be trustworthy and the checkout process as transparent as possible.
The results also showed that the usability of the website has to be easy and on point. We uncovered here that redesigning the navigation and information architecture of Coronation’s website is necessary. In regard future feature prioritization, we asked our users directly. The users could pick 3 out of 8 options. The most relevant answers are the following:
- 69.3% said reviews about the product
- 42% said Q&A on each product
- 33% said a kite & board calculator to find the user-specific size
- 21.6% said a live chat
These results revealed that the implementation of those features could not only make the users happier but also decrease the email volume for the stakeholder significantly.
Simplifying the Information Architecture
Planning the redesign & look and feel of the website, our focus was to simplify and make the website as usable as possible. Throughout the planning process, we continuously focused on building an intuitive structure consisting of the functionalities with the highest impact. Firstly we laid out the 1st and 2nd level of the current information architecture, as seen below in picture 1. With the feedback and help of our users, we regrouped certain products and removed unnecessary categories as seen in picture 2.
Ideating the Solution
Once the new information architecture was layed out on post-it notes, it was time to start sketching. We came up with several potential solutions to each of the pain points and we made some rough UI sketches. We did some preliminary validation on the Lo-Fi UI sketches and used the feedback to refine our sketches and narrow down our solutions for the Hi-Fi mockups.
Prototyping and Validation
In Figma we created Hi-Fi mockups of our proposed solutions and we used Principle to create a clickable prototype. We tested the prototype with 5 new individuals. Insights from the validation test led us to reiterate on a couple of the screens. Below you can see the Hi-Fi mockups of our final solutions including the results of the user testing before and after implementing our design solutions.
Stakeholders Pain Points:
- Very high e-Mail volume regarding sizing questions.
- High return rate, which leads to excess costs for the company.
Design Solution:
- Removing the ‘Ask a question’ button and replacing it with a product-specific Q&A section in order to decrease the e-Mail volume.
- Making the ‘Review’ section more discoverable to make the decision process easier which could decrease the high return rate.
- Implementing the new feature ‘Kite & Board Calculator’ so that the user is able to calculate the correct kite and board size according to the individuals' size, weight and general wind speed in their area.
Customers Pain Points:
- The user finds it hard to navigate the current website.
- Inconsistency makes the website feel untrustworthy.
Design Solution:
- Implementing a new information architecture and redesigning the menu bar of the website (as seen in picture 1).
- Removing the logo of product pictures, keeping all products aligned, redesign of the ‘Sale’ symbol (as seen in picture 2).
Styleguide
Takeaways
Coronation Berlin is currently the 4th biggest kiteboarding eCommerce store in the DACH (German speaking) region. The stakeholder has a lot of experience with kiteboarding and their expertise is what gains their customers' trust. Sometimes it takes only a small change such as removing a feature, toning down the color or keeping a consistent design that can make a big difference. We are certain that making these changes could poise Coronation Berlin to be the European leader in Kiteboarding eCommerce.
