Overview




The 128T Platform enables Network Administrators to visualize and diagnose problems within their entire network, which may span multiple continents.


As Designer of the Company, I was responsible for managing the user experience of the product and ensuring the entire company had a unified global brand vision across all touchpoints, including marketing materials and our Salesforce community. The design system I implemented improved workflow efficiencies and gained clients’ confidence. The system scaled as the company grew from 40 employees when I started to currently 116 employees across the United States, Germany, and Japan.


128 Technology was acquired by Juniper Networks for $450MM at the end of Q4 2020

My Role & Responsibilities

UXD & Strategy Lead, UX Design, Stakeholder Management, Vendor Management, Design Operations, Visual Design, Prototyping 

Team

Product: 1 Lead Designer (me), 1 User Researcher, 2 Product Managers, 10 Developers  

Marketing: 1 Lead Designer (me), CMO, 8+ design & engineering vendors, 2 translators

User Personas

Primary: Network Administrator, Network Engineer
Secondary: CIO (Chief Information Officer) / CTO, Network Architect




Objectives & Challenges






Objectives







    • Ensure a unified global design vision
    • Convert lifelong CLI (command line interface) users to use web-based user interfaces to configure, monitor, and troubleshoot their global network
    • Gain paying customers and convince them to trust us with the security of their entire network 























Challenges






          • Network administrators notoriously dislike GUIs (graphical user interfaces) and many have exclusively used the CLI for 10+ years
          • Broad and unorganized product vision, small team size
          • Enhanced need to ensure web accessibility given our user base (largely male with a higher chance of colorblindness)
















128 Technology Design System








In order for our growing team to hit the ground running, I designed and documented a design language that was easily communicable to engineers and empowered them to also participate in the design process if we could not allocate UX resources to a project.

I was also responsible for defining the UXD tool stack and delivery process, which ultimately sped up the design to delivery process by 50%.

Design Tools & Process

Design Tools & Process

Design Component Library & Standards

Style Guides






128T Networking Platform









The 128T Platform is a web application that enables Network Administrators to visualize and diagnose problems within their entire network, which may span multiple continents.












Personas

As the UX Lead, it was crucial that I lead our team in gaining a deep understanding of and empathy for our users. Synthesizing the insights gained from user interviews, I created personas that our cross-functional team—spanning design, product, engineering, and senior management—used as a tool to communicate and prioritize use cases.

 

Network Engineer

Primary Persona

Network Engineers are responsible for initial network installation and configuration, testing, and maintenance on new server hardware and software infrastructures, network security, identification, diagnosis and resolution of network problems.

The Network Engineer works closely with the Architect to ensure the network is properly configured. She delegates everyday tasks and troubleshooting to her team of Network Administrators. At a managerial level, Network Engineers are also responsible for reporting SLO (service level objective) performance to the CTO.

Network Administrator

Primary Persona

Network Administrators share some responsibilities with Network Engineers, but focus more on the day-to-day responsibilities onsite. They spend most of their time troubleshooting errors, and they also perform upgrades, maintain inventory of equipment, and work with the Helpdesk to communicate system status to clients.

Network Architect

Secondary Persona

CTO / CIO

Secondary Persona

The CTO / CIO (Chief Information Officer) is responsible for making major technical purchasing decisions and monitoring the costs associated with running the company’s technical infrastructure. Involved at 10,000 feet, this persona expects Network performance reports from his Technical Team Leads and monitors the bandwidth utilization and costs on a monthly, quarterly, and annual basis in addition to whenever asked by the CFO or CEO.

User Scenario: Troubleshooting the Network






An outage is affecting online banking transactions for thousands of US-based Chase Bank customers and management demands that the Infrastructure team quickly find a solution. Given many customers have called and threatened to move to another bank, the issue is escalated to Tina, the Director of Network Engineering. It is her responsibility to make sure the issue is resolved ASAP.

In the Server Room, Sam notices two cables are unplugged, and physically reconnects them. The 128T Router recognizes that the peering connections are now intact, and automatically sends an email to the entire Network Administration team to inform them the issue has been resolved. News of the fast resolution quickly moves up the chain of command and management is at ease.

Chase Bank is back to business as usual.

Network Administrator Plugs in Cable

Data Visualization

I tackled many complex use cases requiring an advanced understanding of both the technical details and data visualization in D3.

Tree Map: Service Policy and Tenant Hierarchy

Customers can visualize their service hierarchy, security policies, and level of service access. Customers can assign service policies to groups (eg., Finance department) via drag and drop.

In this example, the customer has chosen to deny access to all Finance-related services to the Corporate Engineering subtenant (or group). 

Network Topology 

After the initial network configuration, the client’s network is overlaid on a world map. The Topology diagram identifies router relationships and link and device status in this multilayered data visualization.

The map additionally can be filtered by peering link status (as indicated by the lines). This feature allows users to troubleshoot faster from an interactive Topology map that shows connectivity and dependencies.

Sankey Diagram: Bandwidth Usage






Allows Network Engineers to monitor the Quality of Service (QOS) by various metrics over a user-specified time period. Specifically, this visualization shows QOS by bandwidth usage over the past month. The goal is to make sure most of the bandwidth is being allocated to the highest priority (priority 0) services and that a service isn’t using more bandwidth than expected. 

Bubble Packing Diagram: Service Group Visualization




Results






  • We reduced the time identify network issuessuch as the “link down” scenario from the previous sectionfrom on average 4 hours to less than 1 hour
  • As of Q1 2020, 128 Technology has gained many clients and strategic partners, including SoftBank and Amazon Web Services
  • The 128 Technology platform has won multiple prestigious industry awards in the US and Japan (see below)

 

75

Reduction in Time to Identify Network Issues





Awards

















More Work

















Salesforce Community