Increase conversion of a D2C e-shop

Team: 1x UX Designer, 1x UI Designer, 2x Product Owners

Role: Research & UX Design (part-time)

Tools: Maze, Miro, Figma, Clickup & Slack

Leverage UX research to improve conversion

The protein company - foodspring - with markets in six European countries selling protein products had its headquarter in Germany. Compared to its competitors it focussed on a broad customer base with a lifestyle-oriented approach. While most competitors mainly had a professional, scientific and bold approach, targeting athletes and people who took physical health seriously. While generating good sales numbers, it wasn't as satisfying as its competitors. To catch up with their competitors, the company decided to leverage UX research and UX design to improve conversion.

I worked for 9 months as a freelancer as a UX researcher and designer. I conducted UX review, user research, usability testing and UX research with the goal to increase conversion.

Review the current eshop (2 weeks)

With a complete UX review of the whole eshop and attributing pages, I evaluated the usability of the PDP, PLP, shopping cart, checkout pages, navigation and the product finder quiz. The user flow was rather “cluttered“ and sometimes confusing. Sometimes the same kind of pages lacked consistency.

Below some selected issues:

  • the PDP lacked clarity, it was difficult to immediately understand the purpose and benefits of the product,

  • the PLP lacked structure, making it hard to scan the page and get a good overview of the product categories,

  • the checkout process was lengthy and users needed to enter certain information twice,

  • the menu isn’t categoried properly and somewhat scattered, making it challenging for the user to understand.

Understand user needs (2 weeks)

I conducted interviews with 5 selected users who generally have an active life. The goal is to understand their problems and needs, and from that to derive how to give them an easier online shopping experience. Three personas each with their own unique needs emerged from the interviews:

  • The fitness newbies don’t yet know much about protein products and its benefits, therefore they want to know which products can best assist them in achieving their fitness goals, e.g. weight management, muscle gain, endurance, etc.

  • The casual fitness enthusiasts already consume protein products, they expect high-quality and effective products, while wishing for more guidance in choosing for the most suitable product.

  • The everyday athletes know exactly what they want and what they expect from protein products. They want to be able to compare ingredients and expects high-quality products.

While all three personas have their own needs, when I synthesized them into user jobs. I conclude with the following jobs to be done for all personas:

The user journey maps deep dive into the user jobs and helped me finding ideas for UX improvement.

User journey Map

An on-going cycle of wireframing, prototyping & testing

For each quarter the design team prioritized the JTBD based on the quarterly OKRs, so they fit to the companies goals and priority. In the time I worked with foodspring I researched and redesigned the following pages based on the user jobs. Other JTBD, such as tracking products and reorder products, didn’t make the cut due to time limitation.

1 - Checkout process

  • shopping cart

  • checkout pages

  • PDP (above-the-fold content)

2 - Research products

  • PDP (below-the-fold content)

  • product finder pages

3 - Compare products

  • PDP (product comparison component)

  • PLP

  • navigation

The design team, the two Product Owners, the UI Designer and me, we prioritized the jobs according to the quarterly OKRs. Increase conversion was the first priority. I started with the above-the-fold section of the PDP, as it contains the most vital information for making a buying decision. Below I’m taking the PDP as an example to illustrate my design cycle.

PDP - original

The original PDP was already performing, but it lacked crucial information for the user to understand the purpose of the product and how it can help them. The price information should be place above the variant selection and information about delivery and shipping cost should be included for transparency as well.

PDP - wireframes version 1

In the first version of the wireframe I redesigned the price information section, product variant selection and shipping and availability information, giving the user the opportunity to better understand the available variants and showing them more transparency about shipping cost and duration.

PDP - wireframes version 2

In the second version added short benefits below the product name, so even new users can quickly understand the benefits of the product and how it can contribute to their fitness goals. Showing the product availability info right next to the price for better visibility. Based on the wireframes, together with the UI Designer created the prototype (see below).

PDP - prototype

Usability testing

With the three adjusted prototypes from the UI designer, I conducted a remote usability test for the mobile PDP via Maze, with 3 different groups of 5 people each. Each group has a slightly different version of the PDP. My goal was to understand which section best helped the users make a buying decision. Their task was to first scan the PDP and then answer three qualitative questions.

Finding 1: Users want practical information about the products and how it can benefit them in their fitness routine and daily life,

Finding 2: Users are drawn to high-quality and high-resolution images, it helps them finally deciding for a product,

Finding 3: More transparency about the ingredients helps the user build trust for the product,

Finding 4: If there are variations to select from, users want to know about them, as that will influence their decision-making,

Finding 5: Emphasize on the discount, as users are more inclined to buy a product, if the price has been reduced.

After the usability testing and analyzing the findings, the team decided that improving the PDP according to the test findings might improve the conversion of the PDP. The product images should to be high quality, look friendly and approachable. Both product name and price are equally important information to the users. The product benefits should be clear, simple and easily-relatable to the users. A selection of informative user reviews can help the user making the final buying-decision.

The collaboration ended after 9 months, due to the fact that the parent company of foodspring suddenly decided to close down the brand and therefore the company. Many of the research and test findings along the way couldn’t be tested or implemented.