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.
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:
During discovery, a number of core problems and key goals were identified and agreed on.
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.
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:
The results of this research, which I will summarise below, informed my design decisions throughout the process.
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.
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 also provided me with user research data, which gave the following insights into their core customers.
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.
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.
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.
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:
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.
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.
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:
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.
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.
In terms of actual data, post migration and redesign Balance Me saw:
No design project is complete without a good old retrospective. Here are some of the things I learned.
What went well, what should I do more of?
What didn’t work, what should I avoid repeating?
What could have gone better, what could I improve?
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.
