Balance Me

Restoring balance, with an award winning, eco friendly skin care brand.

Visit project
E-commerce
B2C Website
UI/UX Design
Design System
Front-end Engineering
CMS Components

Project Overview

Balance Me is an award winning skin care brand, with a strong mission to deliver natural, eco friendly products that restore balance and wellbeing to their customers lives.

When Balance Me approached our team, they first wanted to re-platform their old site to BigCommerce, implementing a design refresh sympathetic to their old branding and packaging. Then, shortly after, we undertook a full site re-design based on a new brand language devised by their branding agency.

Balance Me had ambitious plans to create a site full of engaging content for their customers, so a lot of focus was given to developing designs and components that would help them tell their brand story in as rich and detailed a way as possible. Alongside our technical team I helped develop custom CMS block solutions, a BigCommerce app for linking products to blog posts and vice versa (now available as a stand-alone app called Blinker on the BigCommerce Marketplace), and I personally engineered a number of custom BigCommerce Page Builder widgets (such as a Meganav widget) to give the Balance Me team as much flexibility with their content as possible. In addition to this I wrote a number of help centre articles on how to manage content on the site and use the various custom apps and widgets.

The Process

I led the design and front end development process throughout, liaising frequently with the Balance Me team and their branding agency in order to fully understand the values and history behind the brand. The multi-phased approach of design re-fresh leading into a design update based on the new branding was a challenge, but one that I relished. I enjoy working with brands, understanding what makes them tick, and helping them produce visual designs that are sympathetic to their history and vision.

1. Establishing a Design Language

I held a number of design discovery workshops and produced a comprehensive design and UX trends discovery document. I created style tiles, and a design system and style guide.

The original style tile, created to establish a digital design language
Development of the design system and style guide

2. Managing Rich Content

As stated previously, the ability to manage rich content across the site was a prerequisite. To this end I developed an online style dictionary and CSS helper class library - these CSS classes could be used anywhere on the site that accepted HTML, and allowed for a huge amount of flexibility with only a little knowledge of HTML and CSS.

We also developed a way to pull custom content into any area of the site, by defining custom block regions. And in a similar vein, we created a number of custom widgets that worked with BigCommerce's new drag-and-drop design tool, Page Builder, when it was released mid-project.

Online style dictionary, including CSS helper class library
One of the Page Builder widgets - The 'Hotspot' widget

3. The Customer Journey

Finally, I produced comprehensive high-fidelity responsive UI designs of the user journey.

Early concept design showing a transparent header on a full-screen image
Meganav (managed using a custom Page Builder widget), and mobile navigation
The minicart uses the same component on all screen sizes for consistency
Home page
Product listing page
Filtering on product attributes
Product detail page

Summary

Balance Me has seen significant growth in the post migration period since we partnered with them, and I've loved seeing how their brand style has evolved over time. I have continued to be closely involved with maintaining the project, iterating on visual aspects of the site, improving the UX, designing new features and so on. It has been an absolute pleasure to work with the team at Balance Me.