Vogue Germany

 

Vogue.de Redesign

Condé Nast International

Vogue.de home.png

An outdated website

The Vogue.de website was described by users as “dated”, slow and had separate desktop and mobile experiences. The goal was to create a fast, responsive website with a focus on improving the ad “viewability”.

The team + my role

UX researcher and UX/UI designer | The cross-functional, agile team comprised 1 freelance UI designer, 4 full-stack engineers, a scrum master, a product manager, a UX researcher as well as a UX researcher/designer (me). I carried out desk research, facilitated workshops, designed and conducted various types of user research, created wireframes and prototypes, created the user interfaces and provided support to the engineering teams.

 

The challenge

With Facebook and Google dominating digital advertising, CNI needed to centralise its digital products and understand its users to stay competitive in a shrinking digital ads market.

 

The process and deliverables

Desk research
I started off with understanding what was working and what wasn’t within the CNI estate. We audited the 11 Vogue websites then carried out comparator and competitor analyses to identify what good looked like.

Screen Shot 2019-01-29 at 13.49.06.png

Documenting the content flow to publish the content on a Vogue site

Participatory design workshops
We knew what but needed to be able to understand why the sites had been designed the way they were. I facilitated design workshops with the editorial teams in Germany, Italy and Japan to understand the editorial perspective of the brand and essence of the sites. The output here was a shared and documented understanding of the choice in colours, fonts, technical limitations, commercial context, and user assumptions underlying the decisions that had been made by the autonomous teams.

Screen Shot 2019-01-29 at 13.43.47.png

Output from the design workshop I ran in Milan

User interviews
We also ran depth interviews focusing on the brand/ look-and-feel and usability testing of the Vogue sites in Germany, Italy, and Japan. We wanted to know whether user expectations of the brand were aligned with the assumptions made by the editorial teams and if there were similarities in the brand perception in different countries.

Rapid prototyping and guerilla testing
I facilitated design sprints with the team to come up with new concepts for the Vogue website. We tested 14 different HTML prototypes with users in the street and were able to get feedback that helped in the prioritisation of the features.

Wireframes
I created hi and lo fidelity wireframes in Sketch for the landing pages, articles, and galleries.

Screen Shot 2019-01-29 at 16.38.11.png

Lo fi wireframes showing the user journey for the new design

Usability testing
Several (Axure and Marvel) prototypes were tested with users in the UK to ensure that the designs were usable. I facilitated the lab sessions with a user researcher and was responsible for creating some of the high level reports as well as sharing findings with the team.

Screen Shot 2019-01-29 at 13.56.33.png

Stills from a usability interview conducted in the CNI offices in London

UI mockups
Once a freelance UI designer had chosen the typography and colours, I created high fidelity mockups in Sketch that were handed over to engineering in Zeplin.

Mockups of the UI on all the breakpoints