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 efficiently provide Coty’s beauty and fragrance brands with a web presence?

How might we optimise brand sites to increase engagement and conversion?

How might we empower brands to manage their own content?

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.

Rimmel and Max Factor sites on the original platform

User Needs

- Brand Manager           

- 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.

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.

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 accompanying 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

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.

Content Management

Due to the complex back-end setup of the sites' existing CMS, 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.

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 were also regularly presented to key stakeholders to ensure they meet business requirements.

Versions of the hero component

Outcome

The end product was a curated collection of easy to maintain, performant, reusable web components, available both as Sketch and React component libraries, forming the basis of the CCX design system. 

The time taken to wireframe a site with ten page templates was reduced from one week to half a day. Through improving communication, productivity and web standards, page build times were decreased by 75%, content publishing time by 50%, and load times by 65%. Early feedback from content editors highlighted the improvements in speed and ease of publishing new assets, and product owners and designers have reported that it’s much clearer which features can be offered to brands without extra customisation.