Infinera enables network operators to scale bandwidth while increasing service innovation and simplifying optical network operations. Service and cloud operators, governments and enterprises across the globe rely on Infinera to create rich end-user experiences based on efficient, high-bandwidth optical networks. Infinera came to us to design and develop an application that visualizes the connections within different network types so that issues can be resolved quickly.
While we were onboarding, we knew this project had the potential to be very complex. Starting with the fact that we had intuitively integrate 2D and 3D views—for the record, this is not a normal design paradigm often seen in enterprise applications. On top of that, the user of this application would also have to have the ability to alter and modify the views so that they could monitor the flow of data throughout the system. We also noted, that in order for this project be a success, that we would have simplify the visual language to create an engaging experience from every product angle.
The user begins their journey with the notion of a worldwide geographical map. This map show’s the location of all of Infinera’s client hardware as well problem areas that need action. Since this is no simple map, there are a number of product functions that we tailored for the user we were designing for, that being a network operator. Since this application was to be used in an office environment as well as on-the-go via a laptop on-site, we designed the UI to be highly scalable for multiple platforms and resolutions. We also incorporated a design that could be integrated with multiple map sources.
Topology Visual Design
At some point during the user journey, they will need to have a topographical, three-dimensional view of the network for which they are providing assistance. This is no simple matter, so we explored a number of iterations in both wireframes and visual designs so that we could expertly display a number of parameters that are important to them.
Multilayer Visual Design
Before and After
We prototyped the various views in order to validate our assumptions and allow our client to refine the product definition. The main elements of the front-end stack were:
- AngularJS with Bootstrap, ngAnimate, ngMessages, ngAria and ngRoute
- GSAP/Timeline Max
- Font Awesome
Our team had to learn some of the complexities of setting up long distance optical networks to be able to design effective visualizations for an audience that is not deeply technical. The resulting prototype allowed us to explore 3D visualizations for complex networks all the while remaining accessible.