E-Commerce

Every second person online has used ecommerce services in their life. Therefore building an online shop with an outstanding user experience opens a crucial market for businesses. For Vitafy I practiced user centric design in an agile startup environment to create a delightful shopping experience for food and fitness enthusiast.

Toolbox
User Research
Journey Mapping
UX Wireframing
UI Visualization
A phoner lying next to a MacBook showing the vitafy web shop
– Vitafy, your shop for healthy nutrition

Set up

Together with Núria, I formed the User Experience Design team at Vitafy, an e-commerce startup for healthy food and sport nutrition. After integrating our design process into the existing agile development structures, we started redesigning the whole online store. In so called epics, we temporarily focused our work on certain parts of the site. Both of us were responsible for all areas of the design process reaching from research to interface design.

Details

Typically, we started an epic through quantitative research using Google Analytics. The spotted anomalies were analyzed further through qualitative interviews, either face-to-face or remotely. Together with secondary research data, such as benchmarking reports by the Baymard Institute, the gained knowledge formed the base of our design work.

The collected data was fed into an excel as well as visualized in form of user journey maps and personas. Such visualizations supported the communication with board members and other departments tremendously. It further allowed us to prioritize the most critical issues based on user needs. In combination with business requirements and development capacities we so revised our product roadmap on a monthly basis

User persona sheets next to a user journey map
– User journey maps and personas

Besides testing the created wireframes and user flows, we evaluated the feasibility of our designs together with the developers. The agreed designs were finalized as high-fidelity mockups before being handed over to production. Over time we were able to establish a design system and improve the consistency of the website as well as its performance. Revising the shop on a component basis further allowed us to improve usability and accessibility of each entity.

A part of the vitafy design system
– Establishing a Design System

Each design had to undergo an a/b testing to assure the significance of its performance (the ultimate goal: conversion rate optimization). The usage of tracking software like Google Analytics, Inspectlet and Optimizely supported our evaluation process. The proof of success through data was crucial for communicating design decision to the company, especially the board.

A smartphone lying on a desk showing the vitafy web shop
– Vitafy, your shop for healthy nutrition

Closing Note

I deeply enjoyed working in an e-commerce environment as it allows you to quickly measure your impact and proof your designs through quantitative testing. Nevertheless, the interference of our design process and decision through the board members kept holding us back from realizing the user centered web shop we were imaging.