Vogue.de Redesign
Condé Nast International
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.
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.
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.
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.
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