NOKIA DIGITAL TWIN
NOKIA DIGITAL TWIN
NOKIA DIGITAL TWIN
A digital twin for end-to-end network operations
Role
Designer
Team
2 designers, 5 developers
Timeline
12 weeks
Tools
Figma
PROBLEM
PROBLEM
PROBLEM
Engineers need a way to manage, monitor, and test network changes without risking outages to their customers.
SOLUTION
SOLUTION
SOLUTION
Digital twin: a virtual replica of networks, updated with real-time data to enable end-to-end network operations without risking live networks
A digital twin works by creating a lab package containing a virtual replica of the devices in a network. This way, engineers can build, manage, monitor, and test networks on this virtual replica rather than the real one.
How did I add value?
As a UX design intern, I was the lead designer for all four modules of digital twin, and now am designing new modules for release #2 (stay tuned!).
🗺️
Network topology
Build and configure devices in networks
📋
Network node inventory
View inventory of devices in networks
⚙️
Network node configuration
Configure nodes in networks
🔎
NTA
Run and monitor tests on networks
⚠️
This case study could be a long one so I’ll be mostly focusing on the testing module, NTA. If you'd like the full case study, please contact me!
CONTEXT
CONTEXT
CONTEXT
V1 of digital twin was built by only developers.
The UI was not intuitive and didn't reflect the brand and design of Nokia products. There was also a lack of features that failed to meet users' needs.
CHALLENGE
CHALLENGE
CHALLENGE
💡
How can we scale digital twin to support network engineers with intuitive, end-to-end network operations?
PROCESS
PROCESS
PROCESS
The project followed the double diamond design process focused on the later stages of the design processes, exploring solutions and then developing and delivering them in alignment with business and technical requirements.
Some highlights!
🎨
Design jams w/ PMs → I learned how to build stronger buy-in
⚙️
UI redesign w/ design system → I learned when to work within the limits of existing components, colours, fonts, and when to thoughtfully push their limits.
💻
Design handoffs w/ devs → I learned how to create clear, consistent documentation for my designs
DESIGN DEEP DIVE #1
DESIGN DEEP DIVE #1
DESIGN DEEP DIVE #1
How can we support scaling digital twin?
I re-designed 2 core components to support scaling digital twin while working within the … to reduce dev efforts.
Modules
Modules are the building blocks that enable engineers to build, manage, test, and monitor their virtual networks. The team wanted to scale digital twin from 2 to 4 modules in V2.
⚠️
Poor visibility and discoverability
In V1, modules were hidden in a dropdown menu, leading to poor visibility and discoverability.
✅
In V2, I introduced a tab menu to improve visibility and discoverability, and reduce number of clicks required to navigate between modules.
Lab package panel
The lab package panel is an inventory of all the lab packages. The team wanted to scale the functionality of lab packages and the lab package panel.
⚠️
Limited functionality + poor navigation
In V1, lab package related actions were on opposite ends of the module, and lab package panel was one long, unstructured list, leading to poor usability.
✅
In V2, I organized all lab package related actions into the panel. I also grouped lab packages to create clearer hierarchy, and added a search to improve discovery of lab packages.
I added more functionality to lab packages at both an individual and group level, creating a clearer, more intuitive workflow. I also used typography, colour, and icons to create clearer hierarchy between primary and secondary lab package actions and info.
Here's some examples of explorations I took to get to the current lab package panel!
DESIGN DEEP DIVE #2
DESIGN DEEP DIVE #2
DESIGN DEEP DIVE #2
How might we design intuitive network testing workflows?
🧠
The mental model
The NTA (Network Testing Automation) page was designed around the network testing mental model. This starts with selecting a lab package and test plan, then running and monitoring the test and results.
🏛️
The architecture
The NTA page follows this linear mental model through a three‑panel architecture, creating a clear and intuitive workflow for engineers.
1)
Lab package panel
Select lab package
2)
Test plan panel
Select + run test plans
2)
Test results panel
Monitor ongoing and previous test results
Although the current version looks simple, it took a lot of iterations to get here…
Iteration 1
✅
Low dev efforts
❌
Limited data displayed in a table → poor scalability
❌
Test details and results displayed in the same table → unclear, difficult to understand results
Iteration 2
✅
Introduced results panel to display test results
❌
Run test was hidden in the panel →unclear where or what action to take
❌
Lots of unused space in the panel →what additional data could we add to support network engineers?
Iteration 3
✅
Re-organized data so that all the pre-run test data is in the table and all the post-run test data is in the panel → clear and intuitive workflow.
✅
Worked with devs to surface more useful post-run test data in the panel (success!). We were able to break down the test results into phases → richer context and results
REFLECTION
REFLECTION
REFLECTION
What did I learn?
⚙️
Owning the end-to-end design
As the lead designer, I learned to take full ownership of the end-to-end design, from advocating for users and design decisions, to delivering user-centred solutions that solve real technical challenges.
🚧
Communicating design ideation and explorations
I learned how to clearly organize and present my design explorations—both synchronously and asynchronously—by providing clear context, design rationale and recommendations. This helped me jam more and have buy-in with devs and PMs!
NOKIA DIGITAL TWIN
A digital twin for end-to-end network operations
Role
Designer
Team
2 designers, 5 developers
Timeline
12 weeks
Tools
Figma
PROBLEM
Engineers need a way to manage, monitor, and test network changes without risking outages to their customers.
SOLUTION
Digital twin: a virtual replica of networks, updated with real-time data to enable end-to-end network operations without risking live networks
A digital twin works by creating a lab package containing a virtual replica of the devices in a network. This way, engineers can build, manage, monitor, and test networks on this virtual replica rather than the real one.
How did I add value?
As a UX design intern, I was the lead designer for all four modules of digital twin, and now am designing new modules for release #2 (stay tuned!).
🗺️
Network topology
Build and configure devices in networks
📋
Network node inventory
View inventory of devices in networks
⚙️
Network node configuration
Configure nodes in networks
🔎
NTA
Run and monitor tests on networks
⚠️
This case study could be a long one so I’ll be mostly focusing on the testing module, NTA. If you'd like the full case study, please contact me!
CONTEXT
V1 of digital twin was built by only developers.
The UI was not intuitive and didn't reflect the brand and design of Nokia products. There was also a lack of features that failed to meet users' needs.
CHALLENGE
💡
How can we scale digital twin to support network engineers with intuitive, end-to-end network operations?
PROCESS
The project followed the double diamond design process focused on the later stages of the design processes, exploring solutions and then developing and delivering them in alignment with business and technical requirements.
Some highlights!
🎨
Design jams w/ PMs → I learned how to build stronger buy-in
⚙️
UI redesign w/ design system → I learned when to work within the limits of existing components, colours, fonts, and when to thoughtfully push their limits.
💻
Design handoffs w/ devs → I learned how to create clear, consistent documentation for my designs
DESIGN DEEP DIVE #1
How can we support scaling digital twin?
I re-designed 2 core components to support scaling digital twin while working within the … to reduce dev efforts.
Modules
Modules are the … and enable engineers to build, manage, test, and monitor their virtual networks. The team wanted to scale digital twin from 2 to 4 modules in V2.
⚠️
Poor visibility and discoverability
In V1, modules were hidden in a dropdown menu, leading to poor visibility and discoverability.
✅
In V2, I introduced a tab menu to improve visibility and discoverability, and reduce number of clicks required to navigate between modules.
Lab package panel
The lab package panel is an inventory of all the lab packages. The team wanted to scale the functionality of lab packages and the lab package panel.
⚠️
Limited functionality + poor navigation
In V1, lab package related actions were on opposite ends of the module, and lab package panel was one long, unstructured list, leading to poor usability.
✅
In V2, I organized all lab package related actions into the panel. I also grouped lab packages to create clearer hierarchy, and added a search to improve discovery of lab packages.
I added more functionality to lab packages at both an individual and group level, creating a clearer, more intuitive workflow. I also used typography, colour, and icons to create clearer hierarchy between primary and secondary lab package actions and info.
Here's some examples of explorations I took to get to the current lab package panel!
DESIGN DEEP DIVE #2
How might we design intuitive network testing workflows?
🧠
The mental model
The NTA (Network Testing Automation) page was designed around the network testing mental model. This starts with selecting a lab package and test plan, then running and monitoring the test and results.
🏛️
The architecture
The NTA page follows this linear mental model through a three‑panel architecture, creating a clear and intuitive workflow for engineers.
1)
Lab package panel
Select lab package
2)
Test plan panel
Select + run test plans
2)
Test results panel
Monitor ongoing and previous test results
Although the current version looks simple, it took a lot of iterations to get here…
Iteration 1
✅
Low dev efforts
❌
Limited data displayed in a table → poor scalability
❌
Test details and results data displayed in the same table → unclear, difficult to understand
Iteration 2
✅
Introduced results panel to display test results data
❌
Run test was hidden in the panel →unclear where or what action to take
❌
Lots of unused space in the panel →what additional data could we add to support network engineers?
Iteration 3
✅
Re-organized data so that all the pre-run test data is in the table and all the post-run test data is in the panel → clear and intuitive workflow.
✅
Worked with devs to surface more useful post-run test data in the panel (success!). We were able to break down the test results into phases → richer context and results
REFLECTION
What did I learn?
⚙️
Owning the end-to-end design
As the lead designer, I learned to take full ownership of the end-to-end design, from advocating for users and design decisions, to delivering user-centred solutions that solve real technical challenges.
🚧
Communicating design ideation and explorations
I learned how to clearly organize and present my design explorations—both synchronously and asynchronously—by providing clear context, design rationale and recommendations. This helped me jam more and have buy-in with devs and PMs!
Thank you for visiting ⋆˙⟡.˚
I'm always happy to chat — please connect so I can get to know you!