Overview
Postmedia required a modular, responsive, and accessible design framework to launch the flagship National Post web experience. We needed something that could scale and have reusable components for faster prototyping and time to market. With this product launch, the design and development team officially launched the Cheetah 🐆 design system.
The challenge
National Post and Financial Post are Postmedia's flagship brands with over 11 million users per month.
Before the platform redesign, users were being shuffled through slow-loading, inaccessible, desktop-first sites. This resulted in customer complaints, high-bounce rates and missed subscription and advertising revenue.
While Research found strong loyalty around the brand, numerous pain-points in the user journey lead to poor quality experiences. Newer audiences were bounced from poor mobile interfaces. Key growth entry points from search and social platforms suffered churn.
Postmedia's engineering team had made incredible gains around super-fast content delivery, and Product Design needed to craft experiences that delighted existing users and drew in new, hyper-mobile audiences.
The Process
01 Mood-boards: hooked on a feeling
Focusing on referencing the printed news paper, the product design team sought to tap the learnings and resources around Postmedia's award winning layout and graphic design team. These formed the perceptual language of the redesign.
We captured extensive photo and digital evidence and constructed mood-boards on Pinterest. We followed up with detailed interviews with editors and graphic designers around shared design craft and how might it translated into digital contexts.
02 What’s in a brand? Co-creation and affinity mapping
While we completed the design archeology, we sought a common language for the brand and components. We had colours, logos - guidelines, but no voice.
We used affinity mapping and co-creation techniques with internal stakeholders to gather consensus from the editorial and product teams. We gathered and catalogued a series of languages and principles around the themes.
Second, we used our findings to collect examples of the principles and language in other products and experiences. This was done with editorial and product partners to gather immediate feedback.
03 Leveraging research for discovery
The research team had collected and catalogued insights gathered from user surveys and interviews. Those were themed, clustered, and mapped against current and future user journeys.
This painted a rich picture, showing key flows and tasks to prioritize; where to enhance delight and minimize pain-points.
04 Design studio workshops
We used the Design Studio technique for rapid iteration approaches to break creative shackles and teardown and rebuild smaller more detailed areas. This helped keep the team motivated and to gather inclusive perspective from product and engineering partners.
We stayed nimble and gathered regular feedback from stakeholders, which we could fold into larger design components and research.
05 Ideation: Tactical design research
Matching design outcomes to the principles meant we were likely to create value for the customer. Tactical research helped to provide validation feedback.
During the ideation stage, we used a rapid solution testing model. We sought validation feedback loops to strengthen our decisions and ensure our solutions were inclusive and impactful. I always like to use this part of the process with the riskiest ideas. We can test from a user prototype and gain insights that helps prioritize or park the features and flows.
06 Review existing components for their behavioural and perceptual elements
Working with the newly established Cheetah 🐆 design system, we broke down systematically all the components of the core experience, and then pin-pointed where perceptual brand elements could be reintroduced.
We tested perceptual elements with our users to find the sweet-spot between local difference and global design system. We sought to balance new-elements by perceived effort verses value to the user.
Working with engineering, the brand team, and Lead Designer, I helped solidify the brand kit and tools to reuse utility pieces like typography when rapidly prototyping solutions to new iterations. Engineering helped define restraints around typeface selection to maintain performance benchmarks.
The Result
Responsive, fast, accessible experiences. New features to capture interests and removal of all unnecessary components. Introduced flexible and modular components for quick tests and prototypes. Expanding but not overwhelming the growing design system with components that referenced print news, but with a nod to the future.
Generating positive KPI around increased engagement:
- ✅ Moved from around 1 page per session to 1.89
- ⬇️ Lowering bounce rate by about 20%
- ♿️ 100% WCAG Level AA web experiences
- 📈 Increased expressed user satisfaction in surveys and post-launch interviews
The Team
| Roles | Team members |
|---|---|
| Design Lead: | Josh Franco |
| Designers: | Adriana D'Addario, Jen Fravica |
| Development Lead: | Andre Collin |
| Product Director | Vin Rao |
| Product Management: | Michael Do |
| Researcher: | Yvette Chen |
| Editorial Lead: | Erin Valois |