Balm Labs

was conceived as a wellness brand that provides solutions and community to an overlooked demographic.

Their initial product, ClearBalm, is a CBD and plant-based skincare solution for adult acne. I signed on and hired a team to help Balm plan and launch their inaugural website as a hybrid shop and editorial experience. The website's purpose was to introduce ClearBalm and Balm Labs' commitment to solving skincare problems for adults experiencing perimenopause to the world.

Homepage Homepage Homepage

Mobile homepage

While they were still developing ClearBalm, I conducted a discovery and research phase to help the team focus on e-commerce strategy, best practices, and how their needs would intersect with their users.

To facilitate our goal of cross-referencing editorial content with products and vice-versa, I started to develop requirements with the Balm team that we refined. I started sketching out wireframes with the other designer. This formed the foundation of an ‘atomic’ design system used throughout the site and allowed us to begin getting development involved in building out tools and templates in the CMS.

Balm Strategy

Discovery

Wireframes

Wireframes

From there on, we fleshed out the visual design. The site’s design, and design system, are rooted in type. We selected Maison Neue as the ‘workhorse’ typeface used for the interface and shopping experience. We paired that with the serif Saint Colombe to give a subtle distinction between product and editorial. Knowing we were focused on a wide age range of users, we strived for a highly scannable and easily read experience.

Typography

Typography

Typography

Typography

Typography

Typography

Color

Color

Icons

Icons

Hero Modules

Cover modules

Product Page Product Page Article Page

Product page mobile

Shopping Cart Navigation Utility Pages

Cart, navigation and account

Article Page Article Page Article Page

Article page mobile