Designed a scalable design system and tools for 70k+ users—community portal, mapping patterns, and reward system
DISCLAIMER: The Nokia Design System is still unreleased so the content shown below is limited.
Timeline:
May 2023 - April 2024 (12 months)
Team:
1 Design Lead, 9 UX Designers, 13 Devs and QA
Tools:
Figma/Figjam, Supernova, Storybook, React, Microsoft Teams, Miro, Mural, GitLab
Internal Community Hub. Created an internal community hub for 70,000+ Nokia Design System users — designed the contribution model, rewards system, internal sandbox tool, and website
Mapping & Topology Pattern. Delivered a design pattern that standardized a unified visual vocabulary for mapping and topology interfaces used by 7+ Nokia product teams
Core Component Library. Helped migrate documentation of 10+ components from Figma to the design system website, designed various components in Figma, and created CSS code samples for 7 components
OVERVIEW
Background
During my internship at Nokia, I contributed to the internal launch of the revamped Nokia Design System (NDS). The design system was quite mature and most of the base components were already built. A lot of my work was related to maturing the design system into more than a Figma UI kit such as creating patterns and a contribution model for the design system.
As NDS is unreleased, only a brief preview is shown below. For more details, feel free to connect with me on LinkedIn!
The Nokia Design System is a design system catered toward telecommunications software, offering libraries for charts, topologies, and mapping. Widely adopted across Nokia, it supports various product teams to strive for a consistent design language across their softwares. The Nokia Design System is currently available for internal users within Nokia.
What did I work on?
Within my 1-year internship, I worked on 5 major projects. Some highlights are shown below:
Internal Community Hub & Contribution Model
After launching the Nokia Design System website for internal users, my team needed a way to gather product team feedback. I designed a companion site to showcase the NDS contribution model. This involved conducting a competitive analysis to understand how other design systems managed their feedback loops, user interviews to understand workflow needs, and post-launch usability testing for validation and iteration.
To drive engagement, I integrated a reward model into Nokia’s in-house platform, collaborating with the learning experience team and developers to build an API. I also led a workshop to create 3 new badge designs.
Additionally, I spearheaded the development of an in-house sandbox, allowing developers to experiment with NDS more effectively.
Mapping & Topology Patterns
As a telecommunications software company, Nokia's products often feature UI elements for geographical mapping and network topologies. Usage varied widely across teams, so my team aimed to unify these experiences for consistent branding and design precedence.
I led a 2-month long qualitative research project, collaborating with designers, developers, and PMs to analyze how Nokia products used topologies and mapping. This resulted in 2 new design patterns standardizing topology and mapping UI across Nokia’s line-of-business (LOB) product teams.
Additionally, I initiated an exploratory research project on 3D topology components to assess the potential for a novel 3D component library in our design system.
Rewards System
As part of the community portal and Nokia Design System's feedback loop with users, we were faced with an issue: Why would product designers or developers take time out of their day to contribute to the design system?
To understand this issue, we conducted scenario-based usability tests on the newly-launched community hub and asked follow-up questions afterward on what inclined users to contribute. With results showing favour in factors such as career empowerment and employee recognition, we decided to create a reward system with incentives that reflected these findings.
I collaborated closely with Nokia's learning experience designers to create recognition badges for NDS contributions and worked with a developer to build an API that automated badge issuance upon GitLab merge requests. These shareable badges, that could be shared on LinkedIn and Nokia’s awards portal, followed a tiered model, with higher levels earned through continued contributions. Our community hub also posted a "hall of fame" to celebrate top contributors. My team and I designed the badges through participatory workshops I facilitated.
Tier 1 Badge
Tier 2 Badge
Tier 3 Badge
Criteria: 1 Contribution
Criteria: 3 Contributions
Criteria: >3 Contributions
Core Component Library
When I joined, most components were built, so my first task was migrating component documentation to the new Nokia Design System (NDS) website. I also created code examples for seven components before the site's internal launch in June 2023, designed various components in Figma, and presented my work in monthly UX design sharing sessions.
Designing a Novel Platform
When I first explored design systems in this role, I knew the basics such as component libraries and design patterns but was unaware of the broader ecosystem, such as feedback loops. Designing the community portal was uncharted territory, so I my first step to understand how to chart a path forward was to understand user needs and precedence of similar tools via user interviews and competitive analysis.
Collaboration with Development
Effective collaboration between designers and developers is essential for success. To foster alignment and mutual respect, I focused on building strong, collaborative friendships with developers, ensuring clear communication and shared understanding. Additionally, I tailored my approach by using language familiar to developers, avoiding overly technical design terms and specifications.
Anatomy of a Design System
At the beginning of my internship, I thought a design system was simply a UI kit in Figma. This internship has taught me that is not only a component library. It consists of best practices, contribution and feedback loops, and . Most importantly, it is a unifying language between designers, developers, and consumers.
Telecommunications & Networks
Designing topology and mapping patterns for the Nokia Design System gave me deep insight into a niche domain. Working with unconventional mediums—whether a geographical map interface or an editing canvas for topologies—while upholding design principles was both a challenging and valuable experience.
Contribution Model
When starting this internship, I thought design systems only consisted of Figma UI kits and components. But I later learned that an integral part of a design system like any other product or service, was the feedback loop between the design system team and design system users.
Global Cross-Functional Teams
Working with a global cross-functional team made me hone my approach and skills in communication. I learned the power of storytelling and its impact in increasing buy-in from stakeholders and how to accommodate for language barriers along with using a vocabulary that designers, developers, and PMs can all understand.
Over the course of my one-year internship, I gained valuable knowledge and experience, but what truly made it meaningful were the friendships I built along the way. The connections I made with my colleagues added depth to my time at Nokia, making the experience even more rewarding.
2025
William Lee