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 reporting to configuring, 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 and to sell. 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 issues and the features were getting out of hand. 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

The core components are designed based on UX best practices, development needs, design reviews, and user testing feedback. I make 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 are then implemented by the dev team using React, SmartClient, and other dev toolkits.

Most of the works I've done are internal, and thus, non-disclosable, as they are the pieces for the actual outward-facing products. For example, the screenshots below from a few of our applications.

(Image source: NPS 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 am also involved in regular developer community meetings to handle core component design requirements and changes. The goal for the design leadership is to shift the UX maturity level in the organization.

UX Writing & Information Design

As another part to drive consistency among our products, I have written style guides on data visualization and GUI copy-writing, with fellow UX designers and technical writers. This is an area I am actively trying to be more practiced in.


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 design some internal websites.

One of the most important thing 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