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

Who Are Balance Me?

Balance Me was created in 2005 by sisters, Rebecca and Clare. Long term stresses and fast paced living had taken its toll on their health and skin, and in wanting to do something about it Balance Me was born. Since then, it has become an award winning skin care brand with a mission to deliver natural, eco-friendly products that restore balance and wellbeing to their customers lives. Their products are available in many well known high-street retailers and online.

Balance Me founders Rebecca and Clare.

Project Overview

Having experienced a period of significant growth, Rebecca and Clare decided it was time for a brand refresh (2019). Their current online store was also in need of a re-platform and redesign. My responsibilities on the project were the UX/UI design, and leading the front end engineering team.

Some of Balance Me's achievements leading up to the 2019 re-launch were:

  • 65+ Awards
  • A reach of 5 Million+
  • A community of 110K+
  • Over 75K Reviews
The Balance Me website pre-2019.

Problems & Goals

During discovery, a number of core problems and key goals were identified and agreed on.

The core problems to solve were:

  • The current site was one dimensional and not particularly immersive
  • There were not many options for users to explore how Balance Me could help address their needs
  • The poor UX did not encourage repeat customer value
  • Content management was inefficient and inflexible

The key goals were:

  • Drive revenue growth through customer acquisition and retention
  • Deliver an online presence worthy of their current standing in the industry - a high-end, accessible natural skin care brand
  • Storytelling - Effectively communicate the brand story, brand promises and product stories to their existing and new audience

The Design Process - Design Thinking

In order to deliver the project to the highest standard I needed a flexible yet structured process that would keep me focused on the needs of the consumer. Design Thinking is a methodology and way of approaching problem solving by prioritising the consumer’s needs through iteration and innovation. It comprises of three key areas: Understand, Explore and Materialise.

The Design Thinking process.
I broke down each stage of the Design Thinking process into a series of deliverables.

1. Understand

Discovery

Arguably the most important phase of the project, getting to know Balance Me and their client base was paramount to the success of the project. The research methods I used during discovery were:

  • Client context research
  • User research
  • Competitor and comparative analysis
  • Current UX/UI design trends and best practices

The results of this research, which I will summarise below, informed my design decisions throughout the process.

Understanding Balance Me

My research into the client enabled me to build up the following picture of Balance Me's benefits, differentiators, and tone-of-voice/personality. It was important that any solutions we proposed were in alignment.

Competitor Analysis

I also undertook some basic competitor analysis (purely anecdotal but still very useful), which confirmed that whilst Balance Me’s core messaging and values were good, their current online store was lagging behind in terms of core features and up-to-date functionalities.

Balance Me Users

Balance Me also provided me with user research data, which gave the following insights into their core customers.

3 life stages / 25 to 55+

Interested in:

  • clear and simple skin routines
  • Solving skin concerns

Key life stages:

  • Teen years
  • Pregnancy
  • First signs of ageing
  • Menopause

Needs:

  • Detailed information on product benefits and routines
  • Hypoallergenic, natural, organic, vegan and sustainable
  • Time poor and on a budget

Frustrations:

  • At times unclear UX and text-heavy content
  • Lack of promo code functionality

Understanding The Landscape

In addition to the above, I also carried out a detailed UX/UI trends analysis to help understand the current ecommerce landscape. This helped in my decision making regarding certain features and functionalities. For example, how best to display filters on the Product Listing Page.

2. Explore

The next stage involved mapping out the customer journey and information architecture. The site was being developed on an ecommerce SaaS platform called BigCommerce, which standardised a lot of the structure and flow of the site. But trying to understand users feelings and pain points along the key touch points was still an important part of the process.

In-depth user research was unfortunately out-of-scope so I had to use what had already been provided and also make some assumptions. However, I was still able to build up a good picture of how users might interact with the key touch points and outline opportunities for improvement. One such example was on the Product Detail Page. It currently contained very little information on how that particular product could fit into a daily skin care routine. The opportunity here was to give customers clear instructions on skin care routines, which in turn would help increase sales through cross-selling.

With the customer journey mapping and IA completed, I started sketching out the core customer journey and key functionalities. Sketches like this are a great way to avoid wasting time in a design tool and trying to be too perfect too soon. The goal here was not fidelity, but to gain an initial feel for the general layout and features. Once I was happy with my sketches I created a low-fidelity wireframe prototype, which was tested internally by us and by the client, in order to identify any potential layout or functional issues early on. At this stage nothing of note was highlighted (more on this later) and I moved into the final 'materialise' phase.

3. Materialise

Component Style Board

Using the new Balance Me brand guidelines as my main reference, I first created a mood board of sorts containing a number of key elements and components that could feature on the site. The purpose of this component mood board was to help bring the client along on the journey with me - staying within time and budget was important, so I wanted to make sure that the vision I had in my head was communicated with the client as soon, and as frequently as possible. Seeing, and iterating on, many of the core components this early meant that when it came time to work on many of the pages the client already had a good idea of what they would look like. This part of the process really helped streamline the delivery of the designs.

Design System And CSS Helper Library

With the component style board signed-off, I focused my attention on building a design system to document the core styles and components, and to help maintain consistency. It included elements such as:

  • Colour palette
  • Font families
  • Typography
  • Icons
  • Buttons and inputs
  • Content controls (pagination, tabs, accordions)
  • Navigation components (menus, filters, breadcrumbs and so on)
  • Information components (tables, badges, notifications, modals and so on)

In addition to this, I built a living style guide and comprehensive CSS helper library for our front end developers and for the client to use in custom rich content blocks.

With this solid style foundation established and signed-off, I moved on to designing high-fidelity prototypes. Below are a few examples that outline some of the problems and solutions I worked on along the way.

Home Page

Problems to solve:

  • Dated look-and-feel
  • Limited scope for guided customer journeys and storytelling
  • Poor content hierarchy

Solutions:

  • Cleaner, fresher and more inspirational design
  • A number of rich content blocks available on the page
  • A mixture of guided customer journeys, storytelling elements, and product recommendations

Megamenu

Problems to solve:

  • No indication which menu items have a dropdown, or which main nav item is currently the active one
  • Only a single layout option

Solutions:

  • Improvement of visual cues to aid the UX
  • Overlay greys out the page content to help the user focus on the menu
  • More flexible layout options

Product Listing Page

Problems to solve:

  • Page does not look like a product listing page - uninspiring
  • Prices are unclear, large heart and basket icons, why?
  • Product images are small
  • No filters!

Solutions:

  • A cleaner, more modern look featuring larger imagery and clear product information
  • Optional promo banner in the product list itself
  • Filters, which can be used by opening the filters tab

Product Detail Page

Problems to solve:

  • As per the rest of the site, the design is outdated
  • Everything is crowded into the top section of the page, making it hard to focus on any one thing in particular
  • Too many similar buttons also detract from the main CTA

Solutions:

  • Improved hierarchy of information, plus elements/sections are given room to breathe
  • Updated visual design in line with the cleaner, more modern look throughout
  • The main CTA is given the prominence it needs

Rich Content Storytelling Solution

One particular pain point for the client on their previous site was the inflexible CMS. It stopped them from being able to tell immersive and rich stories. I devised and documented two ways to give the client the level of flexibility they desired.

  1. Leveraging BigCommerce’s Page Builder feature, including using the Widgets API to create custom widgets specific to the clients needs such as a Megamenu widget and a custom Card widget (which I implemented)
  2. Creating a custom block system that allowed the client to enter any custom HTML and output it in a chosen region within a page template (which I briefed my front end team on)- this included the creation of the CSS helper library mentioned earlier

Close-To-Live Implementation And Testing

Once the designs were signed off, the frontend team and I implemented the designs directly on a live staging instance. This meant we were able to QA the site quickly with the client in a close-to-live environment. In doing so a number of issues were identified, such as:

  • Inconsistent or impractical image ratios in a number of instances
  • Adjusting responsive text sizes (smaller on mobile)
  • The full-screen home page hero needed rethinking

Static designs can look great, but it's not always possible to consider every scenario, screen size and device, and so being able to quickly iterate on and solve issues on a staging environment is crucial when entering the final stages of a project.

Take the full-screen home page hero on the designs for example. On the designs it looked lovely, but it quickly became apparent that the client would find it hard to source imagery that would work well in that format. I also hadn't considered that we would need to engineer a solution to automatically change the colour of every element in the header from white to black if the background image became too light (this was before using CSS filters was an option).

In the end we agreed with the client that although it looked good, it would be better to go with a more simple slideshow that didn't impact the entire header.

4. Summary

The Outcome

Without a doubt the new website has been a huge success. I have continued working with Balance Me since the relaunch, iterating and improving upon the strong foundation that was built.

The Impact

  • Balance Me now have a beautifully redesigned online store worthy of their award winning status.
  • The new site enables them to communicate their brand story, brand promises and product stories to existing and new customers.
  • Their customers are happier and making more new and repeat purchases.

In terms of actual data, post migration and redesign Balance Me saw:

Retrospective

No design project is complete without a good old retrospective. Here are some of the things I learned.

The Good 🙂

What went well, what should I do more of?

  • Identifying the business and customer needs
  • The overall design process/design thinking
  • The open and collaborative client relationship
  • Team work/problem solving (i.e. rich content solutions)

The Bad 🙁

What didn’t work, what should I avoid repeating?

  • Designing things without first considering if it will be practical to maintain or build (i.e. full-screen hero slideshow)
  • Trying to be too helpful, leading to an over complex solution (i.e. two rich text content solutions)

The Ugly 🫤

What could have gone better, what could I improve?

  • Better communication and testing around certain elements (see the bad)

Overall I learned a great deal during the project. It was a big success and I am proud to have been a part of it.