Shaping better
Oral Habits
Shaping the experience for the customers
of a toothbrush subscription service.
UX
Customer Journey
Visual identity
Introduction
Habits Oralcare offers a subscription service that delivers toothbrushes with personalized delivery options. The company needed an intuitive digital experience to help customers easily select their preferred products and set delivery frequencies.
Visit live site
The Problem
Although a proof of concept for the subscription service had been tested, the user experience had to be crafted in a seamless way to reach and attract first-time customers. To support growth and customer retention the company required an enhanced and intuitive interface that would simplify the decision-making process and provide a seamless journey for their users.
Project
Visual identity
User Experience
Web Design
My role
Prototyping
User test
Design
Tools
Miro
Figma
GIMP
Timeline
2024
20 Weeks
Design Process
The project began with research to understand the needs of the companys target audience. With a mobile-first approach, I focused on developing an intuitive and user-friendly interface through sketching and prototyping. Iterative evaluations helped refine the design, resulting in a seamless user experience that simplified the product selection for the users.
01 Research
02 Sketching
03 Prototyping
04 Iteration
Design System
I started by creating a design system using an 8pt grid and typography based on the "Major Third" scale, ensuring a smooth and scalable visual hierarchy. As the project progressed I added new components to the system which helped maintaining consistency across the interface. This approach helped create a seamless and scalable design, adaptable for future updates.
Information Architecture & User Flow
The information architecture consisted of three key sections: Information Pages for public content. Selection Journey for users to build their subscription choosing toothbrush preferences and delivery options. My Pages acessed only by subscribers to customize their subscriptions, access discounts and view past orders. In total this meant creating about 30+ different pages in total.
Key Feature - Selection Journey
I designed the product selection flow to guide users through choosing their toothbrush type, quantity and delivery frequency, followed by a checkout and confirmation page. I tested this process with a small group of users to ensure clarity and ease, based on their feedback I refined and simplified the experience.
Adaptive Design & Availability
A key focus of the project was ensuring the website’s accessibility and responsiveness across all devices, with a mobile-first approach. By implementing responsive design and adhering to WCAG guidelines I created an intuitive user experience that also adapts seamlessly to tablet and desktop screens.
Learning
One key takeaway from this project was the importance of user involvement throughout the design process. Due to limited budget and time, we had to make assumptions based on feedback from a small number of users. This may have led to missing out on valuable insights that could have improved the overall user experience.
Moving forward, I'll recognize the value of more extensive user testing to ensure a design that truly meets the needs of the target audience.