Background

Improving the way design systems are consumed at Nokia, a leader in building critical networks around the world

Nokia is a telecommunications company that builds vital mobile, fixed, and cloud networks around the world. I have been a UX Design intern at Nokia since May 2022 under the Cloud and Network Services (CNS) business group. CNS deals with 5G, core, IoT, and cloud solution deployment to help companies embrace disruption and develop new business models. I work in the design system team, working to develop and maintain Nokia's design system, FreeForm UX. FreeForm helps to drive and deliver unified solutions across three different libraries with fully themed, tokenized, and accessible components. FreeForm is part of a larger initiative called Common Software Foundation (CSF), which aims to bring CNS applications together into a coherent software suite through modular and scalable software infrastructure.

Like the goal of many global design systems, FreeForm strives to increase the usage and consumption of its modular library across software teams as it reduces the cost of service and care for the company. However, scaling isn't as simple as it seems with an application suite as diverse and global as Nokia's.

Goal

Increase the usage and consumption of FreeForm at Nokia

OPPORTUNITY

Adoption of FreeForm reduces cost of service and care for teams

Challenge

How might we make it simpler for FreeForm to exponentially grow at scale and complexity with the company?

One way to tackle this is by providing designers and developers with the right tools and information to build great experiences in their respective teams around the globe. This is where the majority of my efforts have been focused on.

INTERNAL objective

Provide designers and developers with the right tools and information to build great experiences

In order to achieve this, our team focused our contribution in three main areas: the creation of new ways to consume FreeForm, the gradual improvement of what already exists, and the maintenance of elements that work well for our organization. Some of the tasks that we prioritized this year were: accessibility compliance, exploring new tools and processes, identifying and documenting common patterns, and expanding the capability of our components. We believe that making actionable progress in these three areas will help increase FreeForm's adoption and allow it to scale to the company's complex and changing needs.

Areas of focus

Create new ways to consume and scale FreeForm

Improve what currently exists

Maintain what already works well

solution

Creating new ways to consume and scale FreeForm

Tools are a vital medium for designers to get their work done. Part of my work included exploring and evaluating new tools to improve how FreeForm is consumed and scaled within application teams. I worked on three main projects in this domain: Evaluating a potential migration from Sketch to Figma, exploring how plugins could provide useful information to designers when prototyping, and testing new content management systems (CMS) for our design system.

A potential migration to Figma would have a significant impact to how FreeForm is consumed and the tools designers would need to use the design system. We formed a team consisting of stakeholders from application and UX teams to investigate the potential benefits, drawbacks, and obstacles we would face in moving over to Figma. I worked on researching and testing different configurations for a potential design system in Figma as well as finding out how feasible it was to migrate our current design system into Figma. To summarize, our overall findings were in favour of moving to Figma. The process of migration is currently ongoing with me serving the role of rebuilding our current design system in Figma. Unfortunately, I cannot speak about the other projects as they are currently ongoing.

In addition to exploring new ways of working, I worked with application designers to compile and create new pattern documentation to address recurring and common design problems. This consisted of identifying how solutions for these problems were implemented in the real world, conversing with designers on what factors they considered when creating such solutions, researching what patterns other companies use to solve the same problem, and making refinements to documentation based on feedback from designers. The objective of creating more pattern documentation wasn't to limit designers in what they could do, but rather show them how they could address common design problems when scale and complexity were introduced.

Improving what currently exists

A design system is constantly evolving and as such, parts of it are improved over time. I improved components and documentation after pain points or feature requests were identified. To accomplish this, I made several iterations to explore potential solutions as we wanted to maximize the benefit a change or addition would bring. I refined iterations based on feedback until we honed towards a clear solution that was consistent with FreeForm's principles. Once an approach was finalized, I updated documentation, created specs, and worked with developers to implement the solution. These improvements gave designers more flexibility when tackling complex problems without substantially adding more elements to the design system.

Maintaining what already works well

As with all systems, FreeForm needs to be maintained by our team to ensure it continues to function as intended. This largely consists of testing, testing, and more testing. I thoroughly tested various components for accessibility compliance, verifying the component is working as intended after improvements were made, or just for routine testing. This was followed by writing tickets and collaborating with developers to address issues if there were any. The constant maintenance of our design system ensures that designers are always using tried and tested solutions to solve the problems of today, and tomorrow.

process

Communication helps build great solutions

While I can't share the specifics of our processes, throughout my time here, communication has been a key factor in helping FreeFrom evolve. From consulting stakeholders during research phases, to working with developers to implement solutions based on detailed guidelines, communication kept everyone in sync with what they needed to do and what to expect from others.

I frequently communicated with managers, designers, developers, and other stakeholders when solving problems. I used tools such as JIRA to stay aligned with the rest of the product team, Abstract to gather feedback from designers, Microsoft Teams to sync with stakeholders, and good old PowerPoint to create and present insightful presentations to decision makers. My primary goal when communicating with stakeholders was to understand their goals, needs, and pain points. This gave me an idea of what shape or direction my work should take. For every task I set out to tackle, I always considered the bigger picture — how did it fit into helping the design system reach its goals? Was there an opportunity to provide more value if I expanded the scope of the task? What challenges might teams face if the solution was applied to complex problems? I believe asking questions in this manner helped guide my work to provide long-term value to the design system. Overall, frequently communicating with our stakeholders meant that I was creating solutions based on clear requirements that would be useful to them when using the design system to solve ambiguous and complex problems.

results

A design system set out to scale seamlessly for the complex problems of tomorrow

Focusing our efforts into three main areas helped move us closer to our goal of increasing the use of FreeForm. By making sure teams have the right tools and information available to consume the design system, the barrier to adoption is much lower than it was before. FreeForm continues to evolve and is better positioned than ever to solve the complex problems that arise as the company grows. The growing maturity of FreeForm benefits over 270 stakeholders spread across five locations globally, who use and consume the design system daily to achieve their goals.

My work was a mix of immediate and long-term impact. Solutions such as new pattern documentation or new component features had an immediate impact as they are being used to solve the problems of today. On the other hand, work such as a new CMS or migrating to Figma in the months to come will have a long-term impact as it will shape the way that stakeholders use and consume the design system. As this work is internal, I cannot share specific measures of my impact, but we have observed positive results from our combined efforts to evolve our design system. I continue to work on problems in our main areas of focus and hope to scale my impact in the months to come.

KEY TAKEAWAYS

While my internship is still ongoing, here are a few things I've taken away from this experience so far. Currently, I'm working on select skills to make a greater impact in any workplace and I'm grateful to be supported by my co-workers and supervisors at Nokia during this process.

  1. Be curious and ask a lot of questions

    I have practiced this in every new environment I work in, and this takeaway never fails to reap benefits for me. Nokia was the first company that I've worked at that already had established UX principles and processes. Because of this, there were a number of processes and systems I had to get acquainted with. Being curious and asking a lot of questions made this transition easier. I made an effort to understand not only the systems I used for work, but also the systems that I was contributing to. By doing this, I was able to learn of the different stakeholders involved, which made it easier to empathize with their needs. I also asked questions about the decision making process as I was curious about how decisions are made and the factors considered when making them in the context of a UX team in a global company.

  2. A design system is a lot more than just some files on Sketch

    My previous experience had me mostly working around design systems in Figma. This however, does not reflect the reality of an established and scalable design system. Things like design tokens, a comprehensive implementation and testing process, and thorough documentation are all elements that contribute to the success of a design system. This intricate web of components and their consumers made me think more about how my work fits in with everything, which leads to my next takeaway, always thinking about the bigger picture.

  3. Always think about the bigger picture

    While not exploring new tools and processes, part of my work revolved around writing documentation. Writing documentation sounds boring at first, but it is one of the main ways that stakeholders consume your design system. It is one thing to write a paragraph of text, and it is another to write guidelines that are consistent with common patterns, your design principles, and guidance that you have given to other components with similar behaviours. Thinking about the bigger picture is important as it showed me how the little details can affect a much larger entity. It encourages me to ponder on potential implications before taking action, allowing me to make well thought-out decisions.