mybacs - Understanding pains & needs
Client
The start-up mybacs sells specially cultivated bacteria as food supplements to customers who lead a health-conscious lifestyle. Regular intake is intended to strengthen the microbiome in the intestine and improve general well-being. The products are sold exclusively in a subscription model via the company's own webshop.
Role
Senior Product Designer for FactorProduct
Project management
Information architecture
User research
Wireframing
Web design
Team
Kira Bofinger (CD mybacs)
Martin Quade (Technical PM)
studi94 (External IT agency)
The goal of the relaunch was to improve the user experience and conversion rate of the shop through user-centered UX design.
Research
Based on customer workshops, user interviews and analysis of data from the existing webshop, the user journey was created and user problems and requirements were identified to enable an informed design process.
By clearly identifying the users' jobs and needs, these could be matched with the information offered on the current website. This resulted in possible discrepancies between user expectations and information:
The content has to be simplified, the basic topic of bacteria and gut health has to be explained sufficiently. The user guidance must be clearer and the checkout process more transparent. The subscription topic amplifies various fears and should be addressed accordingly.
Wireframing
The content and information architecture was optimised by constantly aligning the wireframe with the visualised jobs and needs of the target group.
The mobile checkout was the thing we knew we wanted to focus on to drive the conversion up:
-
Fast checkout (minimal clicks)
-
Live feedback
-
Transparency over the costs at anytime
-
Easy Login
For the mobile checkout we first tried a one-page checkout because we wanted as little clicks as possible. We quickly realised the transparency was suffering and the user had no real overview over his input.
We optimized the process and developed a 3-step guided checkout with maximal overview and transparency.
Together with the creative team of mybacs, the colours and design language were revised.
Execution
In the final version, the mobile checkout follows the combination of minimum clicks, maximum transparency for the user. The user is guided through the purchase process in just two steps. An overview of the costs is always visible at the bottom of the screen. Inline validation ensures the necessary user feedback: values in form fields are already checked during input and reported back to the user.
For mybacs, a design system was realised with the Invision DSM tool, which served as the default for the entire front-end programming. This ensured maximum consistency and efficiency in the brand presence even after the handover.
Implementation
"Factor product helped us bring a complex product into a simple and clear user journey. This not only meets the digital requirements in e-commerce of the start-up scene, but also offers our customers real added value."
Feedback
- Kira Bofinger, Creative Director mybacs