Nokia NSP UX/UI

Using user-centred design to improve the way industries manage networks around the world.

Nokia’s Network Services Platform (NSP) is an end-to-end network management service portfolio with a myriad of applications. They range from configuring to reporting, designed for users from network operators to network architects. NSP is the product our R&D team in ION (IP and Optical Networking) business unit has been working on.

I joined the ION UX team in 2015, just as Alcatel-Lucent and Nokia announced their merger. The UX team in Ottawa has been engaged in bringing user centered design forward into improving the modern network management software. We define, design, and deliver in the product development process, alongside many other parts of the R&D team.

How do we transform a legacy software into a modern enterprise web suite?

Nokia NSP is an evolution from Alcatel-Lucent’s SAM (Service Aware Manager), an all-in-one powerful Java network management tool that proved quite difficult to use. At 2015, the ION team had been moving away from its Java application into newer web apps, because the Java application had lots of usability challenges, and the features were getting overwhelming. Along with other sales and strategic considerations, the feature sets in the original SAM were slowly being migrated to a web suite, in addition to new functions that arose from new networking technologies.

Service Sup Screenshot
FM screenshot

Internal Core Framework Design System

To cope with the growing number of web applications and the challenge to maintain consistency in the user experience, the team needed a design system that powers the core framework. The core components were designed based on UX best practices, development needs, design reviews, and user testing feedback. I made sure to have strong design rationales for each piece, and that the components come together to create a common look and feel. More specifically, the design leverage Material Design language, Atomic Design methodology, and a healthy dose of iterative design process. They were then implemented by the dev team using React, SmartClient, and other dev toolkits.

Most of the works I had done are internal, and non-disclosable, as they are the pieces that end up making the actual outward-facing products. But my work in the design system can be seen in some of the released web apps, as individual components. For example, the screenshots below from a few of the applications using components such as data table, navigation, search and filter, side panels, plotters, settings, etc.

(Image source: NSP youtube channel)

Design Leadership

As part of an initiative to drive consistency across different business units in Nokia, I designed and coded an internal website that evangelizes our process, main tenets, and design resources like our core components. I was also involved in regular developer community meetings to handle core component design requirements and changes. The goal for the design leadership was to shift the UX maturity level in the organization.

UX Writing & Information Design

As another part to drive consistency among our products, I had written style guides on data visualization and GUI copy-writing, with fellow UX designers and technical writers.

design-system-site

My role as the design system framework guy

To design, maintain, and improve the internal core framework UI components was my main responsibility. This role lends itself to much collaboration with other UX designers, product line managers, developers, team managers, marketing associates, and technical writers. I got to interact with people across all the different domain applications, different dev teams, and even business units. I also got the opportunities to create workflows and visuals for some of the applications, and designed some internal websites.

One of the most important things as a design framework person is to support designers and developers who are new to the framework and design language, for that purpose, I made a Sketch symbol library and a Sketch stickersheet with all the component symbols and some usage guidelines. On top of that, I designed and contributed code to a React UI showcase website that contains live demo, code examples, and detailed usage guidelines with all of the React components.

Stickersheet intro
Stickersheet all symbols