Atelier Design System

Condé Nast International

The team + my role

UX researcher and designer | The cross-functional, agile team comprised 3 UI designers, 4 full-stack engineers, a scrum master, a product manager, as well as a UX researcher/designer. I facilitated design workshops, conducted audits, card sorts and competitor analysis, created wireframes and prototypes and conducted remote and in-person usability testing sessions.

The challenge

With so many brands, languages and cultures to cater to, we needed to understand how to define and build scalable components. The old company structure had focused on so much differentiation that there were 11 different headers for 1 brand, for example. We, therefore, needed to understand what aspects of the websites needed to be standardised and what aspects would need to remain differentiated.

The process

Design workshop
We had a lot of research that had gone into the creation of the first website but didn’t know if those ideas would work for other countries. I facilitated this workshop to share previous knowledge, to understand stakeholder requirements and agree metrics / what success would look like.

Create a new IA
The information architecture was the first big problem. We needed to find out whether decisions that we made for Vogue in Germany, would work for GQ in Japan, Architectural digest Italy, Glamour in the UK etc. I created the card sort using UserZoom and ran it in 6 countries for 2 brands.

Concept testing for new ad layouts
We knew, from the data for Vogue Germany, that the layouts that we created previously were optimised for viewability but sub-optimal for ad impressions / page views. We tested a variety of designs for articles, galleries and the homepage to come up with new ad layouts that met the success metric.

Functional wireframes for the components
Using the original design as a starter, we identified the components that we needed to create and, using an iterative process involving some further workshops and sketching, I created wireframes for articles, landing pages, galleries, the header and footer.

Accessibility via the sub-navigation component
Due to the dual limitation of time and prioritisation, we were unable to create accessible components from the start. As an advocate of fair access for all to our products, I convinced the team to discover how simple it would be to design for accessibility from the beginning. I worked with one of the UI designers using this new, non-existent component to define the process for creating deliverables for accessible components.

Iterative usability testing
I established “Litmus testing” from the learning we had in the delivery of Vogue Germany that reactive usability testing was inadequate. We were unable to carry out user research effectively when our process was ad-hoc. Creating a monthly usability testing cycle meant that we had a “usability lab” and users available to test anything and everything once a month at least.

Final design and live sites

By the end of 2018, we had migrated 6 websites to the new platform - Vogue Germany, Italy, Paris and GQ France, Mexico, Italy.