2016 – 2017

Vitafy

UX/UIResearchCRO
A smartphone on the table displaying the Vitafy website.
A smartphone on the table displaying the Vitafy website.

Frictionless shopping

As one of two UX designers at Vitafy, I worked on creating a seamless online shopping experience for fitness and nutrition enthusiasts. Since the design team had just been formed, we started by laying the foundations for an efficient collaboration and delivery through formalizing our processes.

Team

Product Owner, 2x Frontend Developer, 2x UX Designer

A smartphone and laptop displaying the Vitafy website, homepage.
A smartphone and laptop displaying the Vitafy website, homepage.

Journey mapping and prioritization

To gain a deeper understanding of our user base, we ran an extensive research project. Asides from conducting interviews, we analyzed usage data and secondary research, such as the benchmarking reports by the Baymard Institute. The outcomes were visualized in the form of user journey maps and user personas supporting interdepartmental communication.
We combined the identified user pains with fall offs in conversion, and prioritized the list of issues based on their potential impact on user experience, business performance and development capacity. As a result we created a product roadmap which was revised monthly.

A typical user journey of a Vitafy customer.
A typical user journey of a Vitafy customer.
Multiple user personae created for internal communication at Vitafy.
Multiple user personae created for internal communication at Vitafy.

User flow and interface design

From here we redesigned the whole web shop section by section. I led multiple projects, incl. the main navigation, home page, newsletter sign up, product details pages as well as the cart. Each project covered a discovery phase, prototyping and usability testing as well as designing and handing over the final implementation.
Most design changes underwent a/b testing to assure a significant performance uplift. The usage of tracking software like Google Analytics, Inspectlet and Optimizely supported our evaluation process.

Mannequin hand holding a smartphone displaying a Vitafy blog post.
Mannequin hand holding a smartphone displaying a Vitafy blog post.
3 smartphones displaying the product catalogue and details pages.
3 smartphones displaying the product catalogue and details pages.
A laptop showing a Vitafy blog post with 2 smartphones in the background.
A laptop showing a Vitafy blog post with 2 smartphones in the background.

Design system setup

Along the way, I also drove the establishment of a design system – not only to assure visual consistency but to further improve the website’s performance. Revising the shop on a component basis allowed us to improve the usability and accessibility of each element.

An extract of the design system implemented for Vitafy.
An extract of the design system implemented for Vitafy.

Explore more

Like what you see?

All rights reserved © 2023