top of page

Interface UX Designer

@Nokia  May 2023 - Dec 2023

3D_Ribbon_Logo_16x9.jpg

INTRO

In the summer of 2023, I had the opportunity to join Nokia’s NI (Network Infrastructure) UX team, designing for Nokia’s NSP (Network Services Platform) and its associated design system, core components, and design specifications.

Working within an AGILE environment, I completed 7 different backlog items assigned to me in the span of 3 design sprints.

Designing for NSP foundational core components and features, I worked within a cross-functional team to translate PLM requirements into user-centric design solutions in the form of highly detailed design specifications, prototypes, and narrated walkthroughs that was ready to be implemented.
 

I created a multitude of visual representations such as sketches, wireframes, and user flows to articulate and champion my design solutions in the context of business and user goals, and contributed to the maintenance of Nokia’s FreeForm Design System by laying out the groundwork for its eventual revamp.

 

Lastly, I also had the chance to help build interactive prototypes for the team in preparation for this year's SReXperts, a bi-annual product showcase event showcasing Nokia’s IP network solutions.

TYPE

B2B (Business to Business)

ROLE

Interface UX Designer

TEAM

NI (Network Infrastructure)

PLATFORM

NSP (Network Service Platform)

TIMELINE

2023 May - Dec

RESPONSIBILITIES

Core Component

Feature Tickets

Design Specification

PLM Requirement to Design

Nokia’s Freeform Design System

Wireframing

Prototyping

User Flows

bannerbg.png

Network Services Platform (NSP)

Complete suite of applications to help Network Providers with the management, orchestration, and control, of IP networks.

01 /

Designing for

Core Components

Core Components are reusable user interface elements seen within NSP. I had the opportunity to design a new bulk editing functionality for an existing "Schema-form" core component.

Core Components
Foundational "Lego Blocks" that are tailored and readily used by other designers and developers.

+

02/

Designing for
 

Feature Tickets

Using an assortment of components within the Nokia's FreeForm Design System, assembled it in a way to create user-centric designs that met the requirements of the PLM.

Feature Tickets
Assembling the "Lego Blocks" to create solutions that meet business goals and stakeholder requirements. 

The Process

The iterative process of translating initial PLM requirements into a final design solution illustrated by a detailed design specification that was ready to be handed off to developers and then shipped followed a similar procedure whether it was designing for a component or a feature.

NokiaProcessFlowChart.png
CoreComponentEndUsers.png
NewFeatureEndUsers.png
Frame 20086.png

↳ Design Spec indicating general behaviour, functionalities, user flow etc as a reference for both designers and dev team.

03/

Nokia's Freeform 

Design System 

FreeForm is currently being revamped in order to allow product teams to more easily create their own variants of components to meet their own individualized use cases.

FreeForm UX
Collection of reusable components, guided by clear standards and patterns, that can be assembled together to build any Nokia application.

Site Map

I was first tasked with conducting a competitive analysis into the construction of design systems from other organizations, and then to propose a revised information architecture with product teams in mind.

ComponentSiteMap.png
Foundations.png
Patterns.png

Figma Components

Each proposed section were then created on Figma as components in order to get a better idea of how it would be implemented into the work processes of designers.

The work is still ongoing and under review. Due to the sheer amount of sections, I did not get the chance to finish, and the workload has been passed on to the next co-op student. 

Figma Components
Each section of the proposed revamped FreeForm Design System drawn up on Figma as components.

Theme=InputComponents.png

Component Banner

Introductory Banner with component name, description, and illustration and theme depending on component type.

TEXT PROPERTY

ComponentName

Component Name

TEXT PROPERTY

ComponentDesc.

Component Description

INSTANCE SWAP

ComponentInstance

SlotComponent 🎰

VARIANT PROPERTY

ComponentType

Input/Green

04/

Prototyping w/

Variables

In preparation for SReXperts, a bi-annual product showcase event showcasing Nokia’s IP network solutions, many prototypes of NSP’s new functionalities had to be built. 

NokiaPrototype.png

SReXperts Event
With many of Nokia's telecommunication customers attending, SReXperts presents a great opportunity for usability testing, customer feedback and research.

Consider a prototype that can count the number of device rows selected by the user, as well as selected rows that has not been assigned to a network yet. 

Note : Interface above is a fictional interface with the sole purpose of demonstrating prototyping techniques and not used by Nokia in any way. 

Advanced Prototyping

Using variables, conditionals and expressions, I created high fidelity prototypes that dynamically adapts based on users inputs.

Variables 

↳Stored values that can be modified by conditionals + expressions. e.g. string, number, colour or boolean value

Variables.png

Expressions

↳Create dynamic prototypes by manipulating the values of variables with basic operation expressions.

Conditionals

↳Check if a condition is met before performing an action using an if/else conditional statement. 

Expressions.png
NetworkRow.png
NetworkRow2.png
CheckboxInteraction.png

Checkbox

RevisedCheckbox.png

Network A,B,C

729

1

( (2^3) * (3C1) + (2^6) * (3C2) + (2^9) * (3C3) + 1 )

( Yup, Just 1 . )

With the addition of variables, expressions and conditionals to Figma, complex interactions are able to be prototyped with far less frames and complexity.

frames

frame

Note : Prototypes I created at Nokia varied in complexity, some were quite straightforward while others were comparable to this example. 

Yes, I did the math :) 

After assigning networks to devices, clicking "view details" would allow users to see a summary of their assignments. 

Pushing the Envelope.

Going one step further, combining auto layout with variables, conditionals and expressions resulted in extraordinarily dynamic prototypes that adapts to users inputs. 

Note : Prototypes I created at Nokia varied in complexity, some were quite straightforward while others were comparable to this example. 

Variables 

↳Stored values that can be modified by conditionals + expressions. e.g. string, number, colour or boolean value

Group 159.png
Conditionals+Expressions.png

05/

Creating Robust

Figma Components

A portion of my work done at Nokia was devoted to helping the UX team transition from Marvel to Figma by creating flexible, customizable, and responsive Figma components. 

1667px-Figma-logo.svg.png

Figma Components
Figma Components would ensures visual and functional consistency across all of NSP.

01StyleProperties.png
02AutoLayoutPositioning.png
03Responsiveness.png
04VariantComponent.png

↳ Components can then be customized and re-used across design and design teams to help manage consistency.

Previous Project

Cineplex Redesign

Back to Top

Interface UX Designer @Nokia

Next Project

EdgePi@OSENSA Innovations

Let's Talk ! 

Shoot me a message to know more about me and my projects !

rocket_1f680.png
bottom of page