Overview
In 2016, Beamly created 6 websites for Coty beauty brands using a suite of components. After the sites had been live for a year, we had gathered enough information not only on the performance of the sites but also about how they were designed, built and used by brand teams. We were able to work out where the main pain points were for users and set out to improve the experience for back and front end users, while also meeting the business need of being able to create beautiful, responsive, accessible sites more efficiently.
The Goal
Build and manage beautiful Beamly brand sites with ease.
Research
Through feedback from Coty brand managers, designers, content editors we were able to highlight the goals that the platform needed to achieve.
The most overwhelming response we got was that the brands wanted beautiful, responsive sites that could be regularly updated with relevant content and current campaigns, while also looking unique and embracing their brand identity.
For this to happen, we needed components that were flexible enough to reflect the brand’s identity, but easy to maintain in a design library and in code. In order to do this, we researched different variations of core components such as headers, footers and navigation and user tested options, using feedback from this and also from previous brand requests to determine which variations we would support in the component library.
Wireframing
While conducting in-person user research, we found that low fidelity wireframes caused a lot of confusion and users paid more attention to why it didn’t look like a real website that they were used to, making it harder to gain valuable insights. This helped us to make the decision to create our design and code component library using a white label brand ‘Atomic Beauty’, so that rapid wireframing and prototyping was now a possibility and components could be tested while looking like they were part of a real website.
Design System
The design system follows Atomic Design principles, therefore each component is build upwards from smaller symbols. When new designers are onboarded, they can use the Sketch design library to rapidly prototype using the existing atoms, molecules or organisms, or they can take the smaller elements and create their own. The design system includes usage guidelines and suggested layouts to further support the design process for new designers.
The design system allows for consistency across the design team and is stored in Abstract. Abstract has provided version control and peace of mind when multiple designers are working on the same file, and allows developers to inspect the Sketch files without opening or editing them.
Iconography
One of the smaller details I worked on very closely was a responsive icon set. We noticed that a lot of icons don’t resize well and are always optimised for one device but not necessarily others, so I worked on creating a suite of responsive icons. Here are a few of my favourites.
My Role
~ User and competitor research
~ Planning & conducting user testing sessions
~ Low & high fidelity wireframing
~ Responsive icon creation
~ Collaborating to define acceptance criteria
~ Design reviewing
~ In browser collaboration with developers
~ Page layout design
~ Asset creation and optimisation
~ Creating style guides
~ Testing & logging bug tickets in JIRA
The Team
Design
Zara Drei - Product Design Lead
Fernando Megan - Interactions
Jussi Brightmore - UX
Rita Fox - UI Design
Sam Douglas - UI Design
Product & Delivery
Eve Korthals Altes
Paul Gannaway
Adrien Padayachee
& more.
Development
Mark Salvin
Daniel Zaremba
Kate Montgomery
Przemek Adamczewski
Michael Nelson
& more.
QA
Shilpa Kerai
Sam Burge
Rob Marsh