Support Case Resolution for Network Engineers

Helping expert network engineers resolve and visualize their Cisco products on a smartphone

Hero photo for my Cisco mobile application case study, featuring three high-fidelity mockups of my mobile app design.
My high-fidelity mockups from the end of my internship.

Overview

In the summer of 2019, the Cisco CX Design Team was designing the Cisco CX Cloud Portal, an online web portal where IT engineers can onboard, debug, and glance over their Cisco products. With this project came lots of questions about a potential mobile application - what would it do? Would it look like the web app? With these questions in mind, my co-intern and I researched, designed, and prototyped a mobile application for the CX Cloud Portal.

Unknown Territory

I came into my internship knowing very little about network engineering - during my first week, my manager had to give me a crash course about how the Internet works! One week later with just a little more knowledge, my co-intern and I began conducting interviews with expert network engineers.

From interviews with network engineers who use Cisco products daily, we learned how they currently use enterprise mobile apps for their jobs as well as any expectations they would have for a CX Cloud Portal mobile app. Overall, they voiced concerns regarding:

🧭
Navigation
With less screen size and smaller buttons, it can be difficult to navigate through mobile apps.
🔒
Security
Phones might be connected to many networks rather than one VPN, creating implications for network security.
❗️
Margin of Error
It's a lot easier to accidentally press the wrong button on a phone than on a laptop. The stakes are even higher for one's job!

These insights revealed that the mobile app would be most successful if its interactions were in tandem with the web portal. As a result, we prioritized use cases that involved some web usage that could be augmented with the affordances of a mobile app.

Unknown Territory: Understanding Experts

A common use case that could be augmented by a mobile app was resolving customer support cases. I validated this with a storyboard based on several customer stories that came from our initial interviews.

In this storyboard, Ned (the Ned-work engineer), uses the mobile app to resolve and complete a support case from home. He efficiently completes a responsibility for his job, without having to open his work laptop or go to his office.

Ned’s story not only communicated the reasoning for my direction with stakeholders, but it also helped me build context and understand what affordances to prioritize in my designs.

Two frames of my storyboard of Ned the network engineer.
Two frames from my storyboard, showing how Ned's job can feel lighter-weight with a mobile app.

Known Territory: Designing for Experts

Now with a clearer understanding of network engineers (and the internet), I felt more confident in my abilities to design for expert users. I dove into low, mid, and high-fidelity designs by directly addressing the three user concerns from the beginning of the summer, all while keeping the context of Ned’s story in mind.

The following are some recordings of a high-fidelity prototype I presented at the end of my summer, told from Ned's POV.

A gif of my mobile application prototype, where tapping a push notification brings the user immediately to their chat.

🧭 Navigation

In my first prototyped interaction, a tap on a push notification brings Ned directly to the target screens he should interact with, thus decreasing the time spent navigating through his mobile app.

A gif of my mobile application prototype, where the user chats with a Cisco representative about a problematic product.

🔒 Security

I then prototyped an example of Ned's chat interactions with a Cisco representative. , Ned feels more trust in his mobile application, knowing that a real, authorized human is handling his Cisco products.

A gif of my mobile application prototype, where interactions with a map and filters narrow down a list of Cisco products.

❗️Margin of Error

With some Invision finesse, I prototyped a map-based filtration system to help Ned narrow down to just the products he needs to worry about, eliminating the chances that he'll tap on something he didn't mean to tap.

The Outcome

My co-intern and I presented a walkthrough of our prototypes at the end of the summer to the rest of the team. Afterwards...

1️⃣
I expanded my internship into the fall. This gave me time to iterate on my work and finalize documentation for hand-off.
2️⃣
The team hired two full-time UX designers to head the mobile application project my co-intern and I had started.
3️⃣
These mobile application designs were presented to the VP of CX, who gave them high praise.

Reflections

💼
Designing for Experts
Designing for experts means that I’ll never know as much as my user does. I should not fear expert users, but rather embrace them as opportunities to uncover and learn.
📱
Web to Mobile
Going from web to mobile is not simple. I need to consider what affordances do and don’t work for either environment and how they might work together to provide an optimal user experience.
First UX Internship
This being my first UX internship, I gained lots of methods and tools, from storyboarding to Sketch, to keep in my design toolkit.