Phone on a table, nex to a glass of coffee and a flower, displaying the Vitafy website.

Vitafy — Driving Conversion at an eCommerce

year

2016 - 2017

type of work

Research, UX/UI, CRO

premise

Vitafy is an e-commerce startup focused on selling healthy food and sport nutrition online. As one of Vitafy’s (two) UX designers, I took responsibility to create a delightful shopping experience for food and fitness enthusiast. My remit included various areas of the design process, reaching from primary research to final interface design.

Establishing a status quo

As the UX team was just forming itself, we started to establish our design processes and integrated those into the existing agile development structures. To gain a deeper knowledge of our customers, their jobs as well as pains, we ran an extensive research project. Asides from conducting qualitative interviews, either face-to-face or remotely, we analyzed quantitative data collected from the usage of our website. Together with data from secondary research, such as benchmarking reports by the Baymard Institute, this gained knowledge formed the base of our design work.

User personas representig the main user groups on the Vitafy webshop.
— User personas representig the main user groups on the Vitafy webshop.

Analyzing User Groups and User Flows

The gathered data were processed to identify different user groups and to separate their behavioral patterns. The outcomes were visualized in form of user journey maps and user personas to support internal, interdepartmental communication. Together with the board and other key stakeholders, we prioritized the most critical issues identified by our research. In combination with business requirements and development capacities we formed and revised our product roadmap on a monthly basis.

A typical user journey map of Vitafy’s shopping experience.
— A typical user journey map of Vitafy’s shopping experience.

Redesigning the User Interface

From here we started redesigning the whole webstore—section by section. Besides evaluating the feasibility of our design proposals in close coordination with the development team, we regularly tested final mockups and click-dummies with the help of remote user testing services. The agreed designs were polished and specified before being handed to production.

The product-details-page design viewed on a smartphone.
— The product-details-page design viewed on a smartphone.

Establishing a Design System

Over time we established a design system. This not only improved the website’s consistency, it furthermore crucially improved its performance. Revising the shop on a component basis also allowed us to improve the usability and accessibility of each entity.

Extract from Vitafy’s design system, in particular colors and buttons.
— Extract from Vitafy’s design system, in particular colors and buttons.

Quantifying Success

Each design change had to undergo an a/b testing to assure the significance of its performance uplift, driving the optimization of conversion. The usage of tracking software like Google Analytics, Inspectlet and Optimizely supported our evaluation process. The proof of success through data was crucial to successfully communicate design decisions to the company, especially the board.