CLIENT
FibraMask
DELIVERABLE
Branding
UX Design
UI Design
DATE
April 2020
In light of the COVID-19 pandemic, we partnered with a Portuguese tailoring company to produce a better face mask.
The idea behind it was to create a product that would be accessible to everybody, no matter the location, age or lifestyle.
The Everyone, Everyday Mask.
The Brief
Design a responsive e-commerce website with a seamless shopping experience that highlights the unique selling propositions of the product.
User Research
Our user interviews, however, indicated that the product would mostly appeal to young and adult professionals ages between 24-49 years, most of which are women.
We decided to keep the design focus on the product differentiators, while also highlighting style, comfort and reusability.
Information Architecture
Mobile Exploration
We started the design process with outlining the information architecture. The goal was to create a product-focused user experience on both, mobile and desktop.
Desktop Exploration
Moving from UX → UI
UX is never done. But with tight deadlines approaching, we knew it was time to move on.
Colors
Green has strong associations to health, nature, freshness and safety. All of which are values strongly aligned with the brand.
Blue was also tested throughout, but showed a strong association to the medical field. As a producer of non-medical masks, it was important for us to differentiate.
Typography
Paralucent combines beautifully sharp corners and curves. It comes in two versions, one for headers and UI elements, and another optimized for body copy.
Putting It All Together
Built on top of a 4px soft grid, the design provides calm through visual rhythm, clear structure and hierarchy.
In Numbers
3 weeks
Start to finish
€15,410
Total sales
434
Unique customers
4.23%
Conversion rate
10.42%
Returning customers
Numbers based on first 60 days after launch.
Summary
Creating an e-commerce brand for single product came with a number of interesting challenges.
Due to the fact that the project was time-sensitive, collecting all necessary data from user research and competitor analysis became a race against the time. To make it work, we had to find balance and work with some assumptions about the customers.
Hence, it was even more important to launch quickly and verify our design decisions using user-data sources such as Hotjar, Facebook Ads and Google Analytics.
We knew we had to put a strong emphasis on social proof and customer feedback. It was also important for us to clearly communicate that FibraMask is a non-medical face mask brand, powered by technology.
Analysing user interactions also showed that there is a fine line between presenting the users with all the information available and not discouraging them from making the purchase.
Overall, we are excited to have launched the project so quickly and contributed to making this pandemic a little less stressful. Overwhelmingly positive customer reviews confirm the success of this project.
Ready to tackle e-commerce?
Contact
Email hey@sunstory.com
Twitter @sunstorydesign
Dribbble @sunstorydesign
© Sunstory Design 2021
Made with ❤️ in Dubai, UAE.