top of page

Business Internet

Project Summary

Enhance the client facing portal to provide Spectrum Enterprise clients with Business Internet features, including the ability to restart network equipment.

Role

Lead Product Designer

Team

Product designer: Andrew
Content designer: Jen
Researcher : Katie
Product manager: Rebecca
Product owner: Ben
Dev team: Thuy & Shushant
Accessibility architect: MD

Tools

Figma

Jira

Chalk

Webex

Zeplin

Duration

6 Months / 3 Time Zones

Problem Statement

As an IT professional that manages my company’s network
I want to be able to self-troubleshoot when my network is showing connection issues
So that I can avoid having to call tech support for something I can do myself.

Solution

A new feature within a telecom enterprise client portal where organizations can self-troubleshoot internet issues by remotely restarting their internet equipment.

User Flow

After exploring the scope and requirements , I created a user flow to identify gaps with the requirements which focused on

  • Inventory detail

  • Add equipment name

  • Equipment Restart

  • Troubleshoot equipment

  • Creating “happy paths”

Digging In

Because self-serve troubleshooting was new to our client portal, we needed to understand not only the user flow but also what happened within our tools and systems. After kickoff with product, we got to work connecting with different areas within our organization.​

First task was to create the inventory pages with list and card view. Working with our accessibility architect, I designed the list view to be accessible to all users, including those who use screen readers. The impact of the approach I take is to design is when you design for the edge cases, you’re designing for everyone.
Inventory Page
List View

  • Use the Base Sortable Table component from our design system

  • Add a chevron to view detail

  • Ensure the chevron was sticky and add an aria label

  • Add a hidden column aria header label for chevron column

Card view

  • Display Account Number

  • Service type

  • View Details link

I focused on creating a holistic journey for the user to complete all task for recognizing if a piece of equipment is online or offline, creating a nickname, restarting or troubleshooting the equipment. I wanted the user to find all their internet needs in one space and clearly and quickly identify what actions they can take.
Detail Page

The first design iteration presented all information on one card under service. We wanted the user to associate equipment with services.

Click on the Edit icon

Text cursor appears and Check mark is blue

Once Nickname is typed, check mark turns green. Click the greek check mark and...

Voilà! your new nickname is added and all is right in the world

Of course, sometimes you make a mistake, and thats ok because I built in easy to spot and resolve error states.

Testing

I created a prototype and one of the UX researches conducted an unmoderated usability test with 5 users. Here’s what we learned: Time date stamp needed to be associated with individual equipment.

Iterating

Results from the usability test showed some failures and guided me to make updates to enhance usability to the details page. Because we didn’t have to have the equipment attached to individual services, I was able to put each equipment and corresponding details on its own card.

Network status

Equipment  Status

Device Detials Status

Add Nickname

where to troubleshoot when they don’t have equipment that can be restarted remotely

This allowed users easily identify:

Adding nicknames to equipment

One of my favorite parts of this project was finding away to add a nickname to the equipment. This helps the user identify equipment when they have more than one. For example, a large building with multiple modems and routers.

The acceptance or rejection icons were initially on the left of the editable field. As the accessibility architect and I worked together, we realized screen readers needed it to be on the right. They also made sense for signed users to have the icons come after the field they edited, in the same way we read from right to left.

Restarting Equipment

The last part of this project was designing a flow for users to remotely restart their internet equipment if they were having connection issues. This started with some cross-functional collaboration.

Exploration

Technical subject matter experts (SMEs): Technical support team members showed us exactly what happens on their screens when they manually remote restarted equipment. This helped us understand our clients might be without internet access for 2 to 10 minutes when they restart their equipment.

Content designers: Small business and residential divisions within our organization already had this function, and content designers walked us through the screens they co-designed with their product design peers. This left us questioning the best word for this process: restart, reset or reboot. They used restart and reboot interchangeably, but that confused us even more

​

We went back to the SMEs and asked them exactly what word they use with the clients who call for this troubleshooting step. He told us they used the word reset.

Solidifying the Label: After research and discovery, we decided to go with the word restart, as it most aligned to what was happening - the piece of equipment was turning on and off.

Restarting Equipment 

One of the more challenging aspect of the project was the Restart Equipment flow.  It was a combination of working with Product owners and developers and discovering what could be done.

Start by clicking the Restart Equipment button 

Are you sure?

Progress screen

Good Solution

Better Solution

Working with the developer helped me realize that a user can restart multiple pieces of equipment at once, so a better solution would be to add the equipment information into the modal. That way, users can keep track of the status of their restarts.

If for some reason a piece of equipment was unable to be remotely restarted, we added manual restart instructions using the CTA Troubleshoot Equipment. This allowed the user to self-service networking issues independently.

Outcome

A remote restart feature that will put our clients in control and save them time and effort.

Next Steps

  • Adding a speed test

  • Usability research and testing

  • Edge case for restarting the same equipment multiple times

  • Updating the time/date stamp in a more scannable manner

Other project I can talk about:

  • Billing

  • Planned Maintenance Notifications

  • Design systems

  • SASE​

    ​

    ​

bottom of page