Back to works

Building an award-winning e-commerce experience for health-conscious shoppers

Nutriversum is a major food supplement company. Their products are designed to support various health goals, regardless of gender or age.

Laptop mockup showing Nutriversum's website, where you can see the page of a popular food supplement
Client
Nutriversum
Industry
FMCG
Service
UI/UX Design
Team Setup
1 Researcher + 1 Designer
Timeline
5 months

Goal

By 2022, Nutriversum changed its branding and needed a new website to match. We made sure to improve the mobile version because many users shop on their phones.

Challenge

Following the most common e-commerce patterns doesn’t equate to creating the best possible user experience. In other words, researching dominant companies’ websites doesn’t necessarily reveal the best practices. As a result, the challenge was to select which patterns to use and which to skip, while keeping up with the tight timeline.

Outcome

The final design won the High Quality Prize in the E-commerce category at the Hungarian Market Association’s annual award ceremony (Websites of the Year 2023).

This award is given to Hungarian websites that serve as good examples in the market due to their design, user experience, content quality, and responsiveness. But more importantly, the feedback from customers has been very positive regarding their new experience.

4
Rounds of tests
25
Test participants
1
E-commerce award
Project timeline
Timeline of the 5-month project, where desktop and mobile redesigns were continuously tested
1 /
How we started

Workshops we facilitated

Within the 3 weeks of the discovery, the goal was to understand the business requirements, the current state of the e-commerce, and the experience as it was.

To understand the business requirements:

  1. We organized a project kick-off meeting to better understand the client's perspective.
  2. We analyzed the new brandbook to see what the  branding change covers.

To understand the current state of the e-commerce:

  1. We conducted a comprehensive competitor analysis, which not only helped us identify the competitors but also served as a source of inspiration.

To understand the “AS IS” experience:

  1. We crafted an assumptive user journey for an assumptive user persona to demonstrate the high-level steps that a customer currently might go through.
  2. We tested the website with real (potential) users, and collected their feedback and reactions.

The tests helped us understand not only the strengths and weaknesses of the design but also the first impressions that people formed about it.

A user persona focusing on motivations and frustrations
2 /
Redesign

Our step-by-step process

The goal of the redesign was to reconsider both the content, the structure, the overall user experience, as well as the SEO, and the look and feel of the product.

Steps towards the new content, structure and overall experience:

  1. We did a content inventory  to see the whole picture of the current product, considering  which pieces of the content to keep.
  2. We crafted a journey map to demonstrate the high-level steps that the customers might go through in the future.
  3. We revamped the Information Architecture (IA) by organizing and structuring the content in a way that supports usability and findability.
  4. We defined the flows that a user would ideally go through  on the redesigned website.

Steps towards the new look and feel:
We crafted multiple visual collages (moodboards) that include  visual elements representing possible directions to the brand’s new identity.

We chose a clean and friendly design that is more fun than serious, with pastel colors. We also set the style for the images.To get the best possible outcome, we did multiple rounds of testing with clickable prototypes.

Furthermore, we had regular check-ins with the developers and the  SEO expert, and kept on collecting the stakeholders’ ideas.

The moodboard uses pale colors and well-lit images to convey the high-end feel of the brand
One of the 5 different moodboards
Mockup food supplements exploring ways to display them visually
Imagery collage
3 /
Outcome

Our deliverables

  1. Research documentation.
  2. Prototypes we used for testing.
  3. Final, annotated screen-flows for desktop and mobile.
  4. UI Kit with foundational elements, components and guidelines to maintain a unified website.

We delivered a design that supports people because clear navigation, adequate information, and a smooth purchasing experience ensure that they can spend their money wisely.

Visit Nutriversum’s website

The final website uses pale colors, an intuitive interface and easy navigation
Similar success stories
Now available for hire
Let's talk
Schedule a call
Drop a message