Designing an atomic design system to recharge B2B web experience of the iconic brand
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.
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.
I lead the team of two junior designers while working with a 30+ people global design team across three continents.
Sketch, InVision, Zeplin, Abstract
Jul 2018-Oct 2018
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.
stakeholder workshops
pages analyzed
microsites audited
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.
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.
templates
modules
components
To streamline the production process, my team developed two Sketch libraries – for mobile and desktop views.
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.
user flows
pages total
responsive breakpoints
The user flows selected for production covered different templates, multiple user journeys, and as many types of content as possible.
Not all existing pages had all the necessary content in place. We developed a system to highlight gaps for easy identification later.
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.
reduction in development time
reduction in the number of pages
cognitive walkthroughs
Designing business application platform for the cannabis industry raising $3M investment.
User Interviews ∙ Prototyping ∙ Product strategy ∙ UI design ∙ Stakeholder workshops
