white label solution

Consumer Beauty Web Platform

Consumer Beauty Web Platform

A scalable, responsive, easily maintained web component library and content management system, tailored to the needs of consumer beauty retailers.

Atomic Beauty Cover

The Challenge

Prior to this project starting, six Coty brand sites had already been built using Beamly’s original platform. The scope of that project was focused on providing the brands with stable, responsive and accessible websites. The sites had been live for around a year, so we were able to revisit the project, analyse data collected in that time, and see what improvements could be made before onboarding further brands.

Our team’s goal was to improve the front and back-end experience for all the platform’s users - internal, brand teams and the end consumer, whilst also taking into account the business need to make the site creation process more efficient and for the platform to integrate seamlessly with Coty’s product management database and digital asset management system.

How might we create a single source of truth for all existing Beamly components?

How might we ensure quality and consistency across all Beamly products?

How might we improve productivity for designers and developers?

Business Needs

The Coty family of brands span a broad spectrum of catalogue size, brand maturity, creative asset availability and target demographic, so any solution would need to be flexible and easy to personalise to reflect the brand’s offering. The common features were that they all provide beauty and fragrance products, and are integrated with ChannelAdvisor, which directs consumers to purchase via sites such as Amazon and Walmart.

Max Factor and Rimmel sites
Rimmel and Max Factor sites on the original platform

User Needs

Our users were Coty brands, so through in-person interviews we collected feedback from brand managers, content editors, designers, developers and beauty experts to highlight pain points and define a clear strategy for addressing them. In addition, we had a wealth of data from a year's worth of fortnightly testing on end users in the brands' demographics, access to the feature request and bug report tickets that had been raised, and had identified opportunities through competitor analysis and insight gained from a Jobs to be Done exercise. 

During this discovery phase, we found that brands wanted unique and modern sites which reflect their creative direction, along with the ability to publish and edit their own content to support product launches and campaigns. To enable them to achieve this, designers and developers needed to have enough component variants available so that each site could have its own look and feel, and consistency in design and code for easier maintenance.

Our first step was to collect and review the various style guides, Google docs, the contents of Dropbox folders, Confluence pages and Sketch files. We then interviewed designers, developers and product managers to determine unmet needs, and see how a design system could improve their workflows.

Designers highlighted the inefficiency of designing common patterns from scratch with limited visibility on existing reusable components, and developers commented that it was time consuming to build and maintain different patterns for each site. Both found it difficult to know which of a project’s several Sketch files, inevitably all named ‘final’, they should be working from, and the lack of a shared language often led to confusion over breakpoints and functionality expectations.

"I don't want it to take a week to change one word on the site"

"I never know if I can reuse something from one of our other products"

"I never know if I can reuse something from one of our other products"


- Brand Manager           

"The sites look flat and boring, there's nothing to catch the user's eye"

"I should be able to update styles in one place, rather than every single instance"

"I should be able to update styles in one place, rather than every single instance"


- a designer at Beamly              

Component Redesign

Based on these findings, we created a list of priority components (the header and footer, for example) which all sites would need, followed by brand-specific requests. As a team, we defined, sketched out and user tested multiple variations of each component, suitable for varying sizes in product catalogue, target demographic, number of creative assets and amount of editorial content.

Components were tailored for consumer beauty retail. For example, we included multiple carousel styles suitable for product recommendations; colour styles for lip, face, eye and nail product swatches for quick product page mockups; and ‘how to apply’ templates suitable for different products and looks.

swatch-selector
Multiple versions of component to meet different brand needs, and a Sketch library with features tailored towards beauty brands.

Effective wireframing

Using wireframes for user testing and presenting journeys to clients had not been especially successful in the past. Clients found it difficult to visualise how these grey boxes would magically transform into their beautifully branded site. During in-person interviews users often complained that our low-fidelity prototypes didn’t match up to their expectations of a beauty site. To address this, we decided to create an in-house cosmetics brand, Atomic Beauty.

Beamly’s creative team was able to provide us with content they had produced for various clients, enabling us to both showcase the components in the best light, and provide guidance to brands on the types of assets required to achieve the same level of quality.

Component wireframing
Wireframing using in-house beauty brand styling, to avoid presenting uninspiring grey boxes to stakeholders and end users

Design system

Each component was designed upwards from small building blocks, based on Atomic Design principles. When working on a new site, designers are provided with a Sketch library of full components, smaller elements and usage guidelines, all included in the Beamly Design System. This gives designers a clear idea of where they can mix and match existing functionality, and helps identify brand requests which would require additional development work. The design process, prototyping and development can be sped up, whilst maintaining consistency.

(More: Design system case study)

Design System
Design System

Responsive animated assets

One of the issues with highlighted by both designers and brands was that the existing sites felt too static. Even if transitions and animations were included in the design phase, due to time constraints they were often left to the last minute and relegated to the backlog.

We understood that not all brands had an in-house design team available or the budget to include custom assets, so I worked with an interaction designer to create several families of responsive animated SVG icons and transitions between components, suitable for different tones of voice. These would be available out-of-the-box, so a refined product could be produced even on the tightest deadline.

Search icon simple
Search icon - regular
Search Detailed
Responsive icons providing visual feedback

Content Management

Due to the complex back-end setup of the previous CMS (Drupal), content editors found it frustrating that they were not able to make changes themselves, and any updates had to be raised as development tickets. After researching and comparing several options, the team chose ContentStack as the content management system. The intuitive interface is ideal for use by content editors with no coding experience, and as a headless CMS it was suitable for integration with the new React components and other Beamly products.

Contentstack
Content management system

Validation

Fortnightly user testing sessions on the previous versions of components meant that we had a lot of data to work from. We continued testing all new iterations through in-person interviews or remotely, via Validately. As expected, certain variants performed better across different demographics, so we are able to advise brands on which to opt for. The components have also been presented to key stakeholders to ensure they meet business requirements.

Versions of the hero component

Outcome

The end product was a library of reusable web components, available both as a Sketch and React component library. These libraries formed the basis of our design system, and has reduced the time taken to wireframe a site with ten page templates from one week to half a day.

The new components are being used to refresh the sites on the old platform, from which we will be able to gain like-for-like comparisons on KPIs such as page performance, usability and conversion.

Early feedback from content editors has been positive, and product owners and designers have reported that it’s much clearer which features we can offer brands without extra customisation.

Project Information

Client
Coty

Agency
Beamly

Date
2018

My Role

Product definition and strategy
Stakeholder interviews
User and competitor research
Low-fidelity wireframes and prototypes
High-fidelity designs and asset creation
Usability testing and validation
Regular stakeholder presentations
Design workflow management
Providing direction to the design team

Design Tools

Sketch, Abstract, Illustrator, Photoshop, Principle, InVision, Keyshape

Collaborators

Design & Research
Ellie Walford, Jussi Brightmore, Fernando Magan, Rita Fox

Engineering
Mark Salvin, Daniel Zaremba, Przemek Adamczewski, Kate Montgomery, Michael Nelson

Product & DeliverY
Eve Korthals Altes, Paul Gannaway, Adrien Padayachee

QA
Sam Burge, Shilpa Kerai

More Projects

Global eCommerce CheckoutOmnichannel Retail

Bespoke Handbag ServicePersonalisation

Virtual Makeup StudioAugmented Reality

iconfinder_Icon-3_3064816
iconfinder_Icon-8_3064836
iconfinder_Icon-6_3064817
iconfinder_Icon-2_3064815

© ZARA DREI 2019