nokia.com redesign

Designing an atomic design system to recharge B2B web experience of the iconic brand

The problem

Nokia.com B2B experience was disjointed and generic

With a web presence that had expanded to fourteen global sites and more than 18,000 pages, Nokia.com had become a disjointed, generic experience that was not able to adapt to the business needs. They needed help moving to segment-based marketing and a flexible design system.

The solution

Clean, modern design system recharging the iconic brand

We designed an atomic experience system that can evolve with marketing and business needs. The new website will guide the C-level and Tech Influencer audiences through the information-gathering and decision-making process, while emotionally connecting them to Nokia's technology.

Team

I lead the team of two junior designers while working with a 30+ people global design team across three continents.

Tools

Sketch, InVision, Zeplin, Abstract

Timeline

Jul 2018-Oct 2018

— Stakeholder
Stakeholder
workshops
Atomic design
system
Responsive
design
UI design

User research

To understand the challenge, the global design team reviewed dozens of Nokia background documents and segment personas. As a result, we decided to focus the website's redesign on key audiences – IT and Business decision-makers.

7+

stakeholder workshops

18,000

pages analyzed

14+

microsites audited

Understanding the technology buyer

The research suggested an evident symbiosis between IT and Business Decision Makers. They can be seen as purchase partners, working in sync to create a tech-decision duo.

Design system

A thorough analysis of multiple disparate microsite, site metrics and high-level content audits resulted in the new sitemap and recommendations for template pages. The new design system needed to support different types of challenging Nokia content. We worked closely with our content strategist to map the existing pages to new modules designed by the creative team.

15

templates

40+

modules

100+

components

Production

Working with the information architect and Product owner, we identified seven user flows (10+ screens each) that defined the scope of the challenge for my team. We wanted to stress test the design system, find content and functionality gaps. During the production process, we were also consolidating typographic styles, removing duplicate elements, and making sure that spacing is consistent and precise across all modules.

7

user flows

70+

pages total

2

responsive breakpoints

Scenario-based flows

The user flows selected for production covered different templates, multiple user journeys, and as many types of content as possible.

Bringing the system to life

Using our custom UI kits and module libraries, my team produced high-fidelity mockups of more than 70 pages in less than three months.

The results

Our flexible atomic system and editorial layout of templates allowed Nokia to reduce the number of pages significantly. The smaller number of pages will allow easier content governance. At the same time, swappable components allowed Mirum Agency (Budapest) to develop modules at a faster pace and migrate the content for a successful launch of the website in May 2019.

50%

reduction in development time

70%

reduction in the number of pages

14

web properties consolidated

See next

Oddysee web platform

Designing business application platform for the cannabis industry raising $3M investment

Stakeholder workshops | Product strategy | User Interviews | Prototyping | UI design

Read next case study ‣