Mind maps and rapid sketching

I had a few ideas I wanted to quickly explore and see how they might be incorporated into the final design. A mind map helped me capture concepts, layouts and ideas to explore in more detail later. Because networking is such a complex domain, I also made notes to develop a deeper understanding of how certain principles could be presented more clearly.

Information architecture

I worked closely with the Aviat Networks technicians to develop an information architecture that made sense logically and matched how they approached installations and troubleshooting. We quickly found the IA was quite complex and that people sometimes had difficulty finding the right screen. By implementing predictive search (shown further down the page) we were able to give technicians a faster way to find what they needed.

Wireframes

Wireframes were created and shared with the wider group to get feedback and deepen our collective understanding of the user journey. The beauty of this low-fidelity approach is you can collaborate with the developers and work agile without getting caught up and wasting time on the smaller details ahead of time. While the developers are coding up the basic structure and framework you can start providing them with final visuals screen by screen. A continuous design and development loop.

Minimal sign-in screen

Technicians connect to network devices via an IP address using a standard web browser. They’re presented with a clutter-free interface to enter their admin credentials and start configuring the device.

Custom performance dashboard

Choose the individual widgets you’d like to see and drag and drop them to arrange the performance dashboard layout to suit your workflow. Widgets can easily be toggled on or off depending on what you need access to.

Network ports dashboard

Get an overview of all your network ports, how well they’re performing and whether they have any alarms or connection issues. Icons, text and colour work together to make it easy to tell the state of each port at a glance, so you know exactly where to start troubleshooting.

Configure network ports

From the Interfaces screen, technicians can see the status of each port and its port type — a great way to troubleshoot performance issues and spot any incorrect settings or alarms that could be affecting network traffic.

GPS-enabled wifi routers

Wifi routers with built-in GPS allow technicians to locate networking devices via latitude and longitude coordinates. They can also check weather conditions in the surrounding area, which can sometimes have a major impact on radio signal quality.

Creating a new VLAN

The dashboard lets technicians quickly create a VLAN (Virtual Local Area Network), assign network ports and configure settings to get their network up and running as fast as possible. If items can’t be configured due to networking constraints, clear feedback is provided along with alternative solutions.

Built-in hardware sensors

Monitor the performance of built-in hardware components including temperature, hard drive capacity, CPU usage, available memory and fan speeds.

Quality of Service (QoS)

Configure and weight different types of network traffic to make sure it’s optimised for the technician’s needs. Higher-priority traffic types take precedence to improve overall network performance.

Predictive search

Technicians can search the entire dashboard by clicking the search button in the toolbar or using shortcut keys. Results are sorted by navigation section or by text appearing on the relevant pages.

Expired sessions

For security reasons the interface automatically logs out inactive sessions after a period of inactivity. Technicians can also manually lock the device if they need to step away while a process is running.

Responsive toolbar

The dashboard is fully responsive and adapts to various screen sizes. The toolbar shows and hides elements based on available screen width — a great way to keep the most important controls visible at all times.

Simple loading animation

A simple loading sequence designed for when the page is loading, giving users clear feedback that something is happening. The 48-frame sequence was created to show activity when exact timeframes couldn’t be calculated.

Final design

Here’s a quick mockup of how the final design looks on a desktop browser.