Cover image
Cover image

Olivia May

Olivia May is a luxury skincare brand. Our goal was to design a digital experience that communicates elegance and trust while making it easy for customers to explore, learn, and purchase. The result is a clean interface that makes product discovery effortless while staying true to the brand’s refined identity.

Olivia May is a luxury skincare brand. Our goal was to design a digital experience that communicates elegance and trust while making it easy for customers to explore, learn, and purchase. The result is a clean interface that makes product discovery effortless while staying true to the brand’s refined identity.

Olivia May is a luxury skincare brand. Our goal was to design a digital experience that communicates elegance and trust while making it easy for customers to explore, learn, and purchase. The result is a clean interface that makes product discovery effortless while staying true to the brand’s refined identity.

Service provided

Market research

Market research

Market research

App interface design

App interface design

App interface design

Website interface design

Style guide

Style guide

Style guide

Usability test

Usability test

Usability test

Challenge

Olivia Mai faces challenges in providing an intuitive and accessible online shopping experience for skincare products. Users struggle with navigating the site efficiently and lack clear guidance on product selection. There is a growing demand for seamless access across multiple platforms, while users also seek to experience the same ambiance online and in-store. 

Olivia Mai faces challenges in providing an intuitive and accessible online shopping experience for skincare products. Users struggle with navigating the site efficiently and lack clear guidance on product selection. There is a growing demand for seamless access across multiple platforms, while users also seek to experience the same ambiance online and in-store. 

The Goals

Two different flows were created both had common goals of ordering food or making a reservation. While the goals were similar the difference was in the app structure. A filter and search button located in two different places complimented by a tab navigation bar was used for A/B testing.

Clear product info

Clarify product information like ingredients, usage instructions and benefits so that the user will be able to make the right decision and buy the right product.

Optimize
Responsiveness

To ensure users have the same seamless experience across all platforms.

Brand consistency

Maintain brand consistency across all digital platforms.

Enhance engagement

Enhance user engagement to improve users overall experience.

The results

Color system and fonts with unique icon design to fit brand values

Color system and fonts with unique icon design to fit brand values

Color system and fonts with unique icon design to fit brand values

Responsive card designs to fit each interface mobile desktop and tablet

Responsive card designs to fit each interface mobile desktop and tablet

Responsive card designs to fit each interface mobile desktop and tablet

Key takeaways

From Wireframes to Inclusive Design

This design project progressed from completing our research and establishing an advanced sitemap to wireframes and visually appealing high-fidelity prototype. Emphasizing accessibility, adjustments commitment to inclusivity of the design. 

This design project progressed from  completing our research and establishing a advanced sitemap to wireframes and visually appealing high-fidelity prototype. Emphasizing accessibility, adjustments commitment to inclusivity of the design. 

Helping Users Choose with Confidence

The project merged aesthetics with an intuitive shopping experience by clarifying product information and steps to use products. We helped users confidently find the right skincare products while preserving the brand’s ambiance both online and in-store.

Create a free website with Framer, the website builder loved by startups, designers and agencies.