Jesse Dean | Product Designer

Background

I joined PacketFabric as the Lead Designer when it was just a small team of 4 founders and 2 engineers. I led the UX and UI strategy for the team.

I was the sole designer on the founding team.

I feel fortunate having had the opportunity to be part of such an exhilarating journey, and working for a startup and having a multitude of responsibilities helped me grow tremendously.

Here are some key achievements:

Juggled many different hats. Working in an early-stage startup is both challenging and rewarding. I dedicated many hours helping to create the voice for the brand, created branding guidelines, designed a pattern library and took ownership of both the design and code for the company’s website.
Turned an idea into a product. The ability to transform an idea into something much more tangible is a process that is both exhilarating and rewarding. I worked closely with the founders to shape the product vision and strategy. Being able to see how much PacketFabric has grown as a team and a startup was truly amazing.
Being part of the pitch process. Another responsibility that I undertook was helping the founders build out pitch decks, which they would pitch to investors and potential customers. I was responsible for the design of slides, and editing pitch decks once the copy was finalized by the founders.

Discovery

The founders identified a significant problem within the telecommunications industry - there was no current solution for simple, cost-effective network deployment and maintenance. Typically, customers would rely on traditional telecommunications solutions, which can take weeks or months to provision for every new circuit and typically come with long-term and inflexible contracts.

PacketFabric’s founders decided to create a platform that would allow customers to instantaneously provision massively scalable network connectivity between any two or more points across its private backbone network. The goal was to eliminate the overhead and complexity of manual network procurement by delivering a 100 percent automated platform that can be controlled programmatically.

Team & role

Role

Lead (Founding) Designer,
Front-End Engineer

Team

Anna (SVP), Richard (CTO), Myself (Design), & 6 Engineers

Tools & Methods

Sketch, Invision, Axure, Research, UI design, Prototyping, Usability testing, Front-end development (CSS ownership), QA testing

Duration

3 yrs

The product vision

The vision was to revolutionize how companies provision and manage network connectivity, just as cloud computing changed how computing resources are consumed. PacketFabric’s automated Ethernet-based platform would deliver direct, secure and private connectivity at terabit-scale between any two or more points. The PacketFabric platform aimed to provide complete real-time control and visibility via a web UI and full-featured API.

The product vision

The vision was to revolutionize how companies provision and manage network connectivity, just as cloud computing changed how computing resources are consumed. PacketFabric’s automated Ethernet-based platform would deliver direct, secure and private connectivity at terabit-scale between any two or more points. The PacketFabric platform aimed to provide complete real-time control and visibility via a web UI and full-featured API.

Brainstorming

The primary users would consist of network engineers. I was able to coordinate interviews and discussions, collecting insights that helped inform on information architecture and aided in design during UI exploration.

Defining the MVP

Working with the founders, I conducted sketching sessions and had numerous discussions to map out the features to capture the MVP.

We identified the following key features:

Register company and invite users. Our customers would be companies, and employees within that company would be our users. Initially, a company administrator would register the company and then invite users to sign up.
Information visualization. A dashboard would display vital statistics at a glance.
A visible and manageable network. The companies network would afford users the ability to create ports and virtual connections. There would be separate pages to list both interfaces and virtual circuits, and from there the user could view port and virtual connection details.
User and network activity. Provide logging of activity for all company activities (port states, new users, billing etc …)
Admin privileges. Allow company administrators to manage company profile, add/manage users and groups, and post-MVP, manage billing.

Creating use cases

After defining the MVP, I worked alongside our CTO and SVP of Software Engineering on creating use cases to define feature scope, high-level goals and basic flows.

Creating use cases

After defining the MVP, I worked alongside our CTO and SVP of Software Engineering on creating use cases to define feature scope, high-level goals and basic flows.

Designing the architecture

When designing the architecture of our platform, I aimed to ensure that the experience allows users to focus on tasks, rather than finding their way around.

View larger image

Designing the architecture

When designing the architecture of our platform, I aimed to ensure that the experience allows users to focus on tasks, rather than finding their way around.

Developing task flows

Designed task flows for a set of features to help determine how many screens were needed, information required on the screen, the order in which they should appear, and the components that were needed.

Developing task flows

Designed task flows for a set of features to help determine how many screens were needed, information required on the screen, the order in which they should appear, and the components that were needed.

Creating a design system

Each component was designed upwards from small building blocks, based on Material Design principles. The design system provided a library of full components, smaller elements, usage guidelines and reusable code. It also provided downloadable brand assets for use by the marketing and sales team.

The design system provided engineers a clear idea of where they can mix and match existing functionality. The design system not only accelerated prototyping and development, but also ensured that the brand’s identity would remain consistent.

Designing the screens

My focus when designing the screens was to create a refreshing, minimalist and clean UI that conveyed trustworthiness and offered an intuitive and enjoyable experience for users.

Challenges and Compromises

Unfortunately, one of the main challenges was validating design solutions, due to the lack of resources and time that we had day to day. As with most startups, we were stretched quite thin. With this challenge, I often had to engage stakeholders to review and offer feedback for screen designs, and then reiterate the designs in order to be achievable within time and technical constraints, while still providing value to the users.

Designing the screens

My focus when designing the screens was to create a refreshing, minimalist and clean UI that conveyed trustworthiness and offered an intuitive and enjoyable experience for users.

Challenges and Compromises

Unfortunately, one of the main challenges was validating design solutions, due to the lack of resources and time that we had day to day. As with most startups, we were stretched quite thin. With this challenge, I often had to engage stakeholders to review and offer feedback for screen designs, and then reiterate the designs in order to be achievable within time and technical constraints, while still providing value to the users.

Usability testing

During the design process, a mid-fidelity prototype was built and was validated internally within the team. We utilized this prototype for testing purposes. We recruited 5 users (all of whom worked with companies that had already committed as customers upon launch of MVP).

Our goals when testing were to:

Test discoverability and usability for “Creating a port”, “Creating a virtual connection”, "Managing port and virtual connection details".
Test usability of interaction flows.
Learn user pain-points. Understand where user problems existed.

Final Designs

A sample of select screen designs.

Register Company

A company must be registered by an admin before any users can be sent an invite link to sign up.

Dashboard

The Dashboard displays a series of widgets that would provide network, billing and usage information.

Dashboard

The Dashboard displays a series of widgets that would provide network, billing and usage information.

Create a Port

Creating a port is a wizard consisting of 3 steps: choosing market/site, selecting interface speed/media/zone and confirmation.

Interfaces

Interfaces will list all ports. An action button will accompany all port rows, and allow the user to view port details, enable/disable the port, delete the port and generate a LOA.

Interfaces

Interfaces will list all ports. An action button will accompany all port rows, and allow the user to view port details, enable/disable the port, delete the port and generate a LOA.

Port Details

When viewing port details, the user will be able to access port information, the state of the port and relevant billing and usage data.

Port Details

When viewing port details, the user will be able to access port information, the state of the port and relevant billing and usage data.

Connection Requests

Connection requests will have a tab view: Received and sent requests.

Received connection requests. Displays all received requests and allows the user to view details of the request, and either accept and provision or reject the request.
Sent connection requests. Displays all sent requests, and allows the user to view details of the request.

Connection Requests

Connection requests will have a tab view: Received and sent requests.

Received connection requests. Displays all received requests and allows the user to view details of the request, and either accept and provision or reject the request.
Sent connection requests. Displays all sent requests, and allows the user to view details of the request.

Admin

The admin page consists of a Sidenav that will allow an administrator to navigate account pages: company, management and billing. Depending on the page being viewed, the layout varies.

Impact & takeways

Impact

Customer feedback after launch, gathered from surveys, showed that the users were extremely happy and excited about having full control of their network via a UI. Some comments were directed at the ease-of-use, intuitiveness, and the efficiency in completing a tasks, such as creating a port.

In January of 2017, PacketFabric’s MVP launched. Within a few years, PacketFabric was able to raise a total of $109.9M in funding - showcasing that investors not only believed in what PacketFabric was doing, they saw the value and wanted to be a part of the journey.

And today ... PacketFabric has become the global leader of Network as a Service (NaaS). PacketFabric's NaaS platform has received numerous awards, including:

“Best Application / Service Innovation 2018”, Pacific Telecommunications Council (PTC)
“Platform as a Service 2020”, Stratus Awards for Cloud Computing
"Digital Innovator Award 2021”, Intellyx

Takeways

Working at an early-stage startup that was achieving rapid growth was a thrilling experience that tested my agile capabilities and allowed me to grow as a designer, a teammate and a collaborator. Going from 0 to 1 was extremely fun (yes, i know that rhymed 😜) - and knowing I had a positive impact on the success of PacketFabric's offering - well, that's something that can't be described in words.

Next: Crossover Health →

jesse.jedi.dean@gmail.com