Condé Nast - Mobile First

Implementing a mobile-first approach to Condé Nast sites

Process

Client

Condé Nast

Category

Web Design

Role

2018

Goal‍

As Condé Nast US embraced a mobile-first approach to meet growing mobile engagement, we extended this strategy to Wired UK. Given Wired’s image-driven nature, we prioritized a clean layout with concise titles while addressing key objectives:

  • Boosting mobile traffic and optimizing user experience.
  • Enhancing the gallery experience for visual storytelling.
  • Prioritizing video content to align with evolving audience preferences.
  • Maintaining consistent engagement and improving content discovery.

Beyond Wired, our broader product goals focused on:

  • Unify all Condé Nast titles under a shared central framework.
  • Optimising content for seamless desktop and mobile experiences.
  • Strengthen brand loyalty and enhance user retention.
  • Implement a new CMS for more efficient content publishing.

By aligning these initiatives, we delivered a cohesive, high-quality experience across all brands while maintaining each title’s distinct identity.

Research‍

Our focus groups centered on four key areas:

  1. User motivations and behaviors of loyal UK audiences.
  2. Usability and experiential feedback on site navigation.
  3. Impact of devices and social media on user experience.
  4. Comparison with competitors in the digital space.

Findings showed that most users consumed content on the go, primarily via mobile and tablet. However, mobile traffic underperformed, prompting deeper investigation.

Loyal users valued Condé Nast for its journalistic quality, photography, and timely content but turned to competitors for a different experience. Their trust in editorial content reinforced the need to enhance mobile functionality, leading to targeted site improvements.

‍

I used Zeplin to bridge the gap between the designer and the developer. All the necessary information was available to the developers to make sure the designs were built to the correct specifications.

‍

‍ Process‍

I began the project with on-site brand sessions to align on objectives, audience, content needs, and brand identity. This collaboration helped identify goals and pain points early.

We then developed low- to high-fidelity prototypes to refine ideas, validate concepts, and minimize risk before handoff to development. Designs were shared via Zeplin, and we maintained continuous communication with developers to ensure a smooth build process.

‍

A series of card styles were created to their own specific needs and also to be reused throughout the sites. This gave editorial flexibility, and in doing so, the homepage became more curated and helped surface more stories that were published.

‍

Examples of how the components were used throughout the sites.

‍

Designs‍

My approach was simply to devise a visual language to support and facilitate the user through Conde’s sites content easily.

With the mobile-first approach, it gave me the restraint needed to keep the site clean, simple and easy to navigate and also to give maximum focus on the content.

Although the framework of all our Condé Nast sites is the same, each visual representation has allowed the brands to remain separate and true to their own individual style.

‍

I helped set up a design system using the Atomic design methadology which enabled the team to build the sites faster, and improve company collaboration. The design systems allowed everyone to share and speak one design language.

‍

Homepage‍

I developed a visual language to enhance user navigation across Condé Nast sites, ensuring a seamless content experience.

A mobile-first approach maintained a clean, intuitive design with a strong content focus. While all sites share the same framework, each brand retains its distinct visual identity.

Article

We developed a toolkit of 20+ modular elements, including pull quotes, drop caps, image styles, and media embeds, enabling editorial teams to create visually engaging layouts for both short- and long-form articles.

User research revealed a need for continuous story updates within articles. In response, we introduced a Top Stories module, providing a reverse-chronological feed to keep readers informed in real time.

To boost engagement and content discovery, we implemented a Recommended Content feature and infinite scrolling, ensuring seamless content exploration. This approach enhances user retention and optimizes browsing, particularly on mobile, where single-finger scrolling is most intuitive.

Lessons learnt

I have developed the ability to collaborate effectively with Content, Marketing, and Development teams. Recognizing that relationships with brand teams can fluctuate, I have focused on educating them about our processes and limitations, while actively involving them in our workflows. This inclusive approach fosters a sense of contribution, leading to increased trust and credibility. As trust builds, we gain greater flexibility to implement innovative features on our sites with reduced resistance from brand teams.

Additionally, I have adopted a content-first design philosophy to enhance user experience (UX). By prioritizing content during the design process, we ensure that it takes center stage, allowing us to consider its opportunities, constraints, and implications thoroughly. This methodology places content at the core of our projects, resulting in more user-centric and effective designs.

No items found.

Let’s make your brand stand out.

Get in touch.