Juniper Paragon Automation-as-a-Service
Leading Lights 2023 award winner for “Most innovative cloud product or service”
The communications industry's most prestigious honor!
Paragon Automation-as-a-Service product, is a product which allows technicians to onboard network devices and automate their usage. The cloud-based service also uses AI to help network operators monitor and problem troubleshoot network data and reduce the time it takes to introduce services.
PRODUCT DESCRIPTION
Field technicians who onboard devices at data centers and customer sites needed a method to simplify and streamline their work, make it less prone to errors., and easier to remediate issues. Currently, issues with the onboarding process included poorly defined and difficult to follow network plans, lack of insight into current or potential issues, and no knowledge of any available updates and compliancy issues. Field technicians also needed to be experts in CLI coding in order to configure and troubleshot the devices.
This was to be a mobile product that would be coded and demoed during a Juniper customer event in partnership with Aston Martin, so it had an aggressive timeline.
PROBLEM TO SOLVE
Provide technicians with a service that will allow them to easily onboard network devices and automate every aspect of their usage. This should be accomplished by providing technicians with a guided experience for device field installations, configuration, updates, and compliance audits. They should be able to quickly and easily configure and problem troubleshoot any issues throughout, without needing to know any CLI code. The cloud-based service also uses AI to help network operators make sense of network data and dramatically cut the service introduction time.
Time line | 5 months for iterative design work and preparing for presentation, which was coded and working on all mobile platforms. Additional functionality was added in later.
SOLUTION
I was asked to create an onboarding feature which would “wow” technicians. My first proposal was to introduce augmented reality (AR) to allow technicians to visually “see “ where on the specific cables needed to be plugged in on the devices, as well as provide real time monitoring and troubleshooting during installation. However, I was told that there was going to be a demo of this product at a customer event in 5 months, so there would not be enough time to implement anything with AR. That was when I decided to pivot and create the next best solution, which incorporates displaying the installation instructions and live feedback while showing the actual device image on the technician’s mobile device.
MY RESPONSIBILITIES
Product Designer
3 Product Managers
Visual Designer
Engineering team
TEAM
TOOLS
Miro
Figjam
Figma
Team members were located across 4 time zones.
This was my first mobile design and there was no design system in place for mobile, but it was created at the same time as the design iterations began.
CHALLENGES
PHASE 1 - RESEARCH
I worked with a UX Researcher who conducted some initial interviews with field technicians to discover their current pain points. I also worked with 3 product managers who were able to provide me with some sample use cases. Finally, I toured one of Juniper’s data center labs with a lab technician and was able to observe him while he worked and ask questions, including which errors were relevant to field technicians, NOC engineers, and across both personas.
This is the inside of one of Juniper’s data center labs. I found that some cabling was very orderly, whereas some was quite chaotic and looked difficult to troubleshoot. I was most surprised that the environment was so loud that I needed to wear ear plugs.
Based on the research, I created a view of the possible errors based on whether they affected field technicians (installation technicians), NOC engineers, or both. This helped with creating the various workflows.
PHASE 2- BRAINSTORM & WORKFLOWS
I led several brainstorming sessions with stakeholders. Results were used to create process flows.
I used Miro and Figjam to communicate some early ideas and create flowcharts of various workflows. This initial workflow was based on implementing AR, which we unfortunately did not have the time to implement.
PHASE 3 - CONCEPTUAL DESIGN
I used Figma to create wireframes for quick feedback from stakeholders. There was an aggressive schedule since the product needed to be code complete within 5 months, so it could be demoed during a customer event. There would not be enough time to create all possible workflows or add all requested functionality, so I was requested only to cover two workflows and some basic functionality for the customer demo. The remaining workflows and functionality were designed after the customer demo.
Below is showing some early concepts for data orientation and visualization, labels, and header layout options. These were discussed with stakeholders and other UX members before I made a final decision. Some of the questions I wanted to discuss with my team are shown in red text. Since this was a stealth project, I was not allowed to gather customer feedback.
PHASE 4 - HIGH FIDELITY DESIGN
Customer Demos and Presentation
I used Figma to create designs for the two use cases used during the customer demo and presentation. The demo was actually coded and used sample data that simulated the onboarding of a device. The customers were excited by the product, and thought it would greatly enhance the onboarding process. I later completed the flowcharts and designs for all the other workflows and additional functionality.
These are some of the screens for the “Happy Path” use case, so the device is in the inventory and planned and there are no onboarding errors. Let me know if you have any questions or would like me walk you through the additional use cases.
