Akshay DeshpandeNetwork allocation
How the data center and its tenants allocate and use networks, shown as an object-wise hierarchy.
A design system I designed and coded, for a first-of-its-kind data center product
At Fungible, I co-created the company's first design system, in Figma and in working Angular code, and designed core parts of the Data Center Composer and GPU Connect from MVP through three major releases.
- Role
- Product designer and design system co-creator
- Team
- Design system: 2 designers. Composer: 4 designers, VP stakeholders and engineers
- Timeline
- June 2019 - Aug 2022
- Outcome
- 3 major releases. 10+ enterprise customers. $1M ARR in year one.
Context
Workloads like AI and machine learning, big data and gaming each need a different mix of CPUs, GPUs and storage. In a traditional data center, servers are assembled with fixed hardware, so most of it sits idle outside peak load.
Fungible built hardware that splits a data center into pools of compute, storage, GPUs and networking. The Data Center Composer is the software that lets teams “compose” those pools into exactly the servers they need, then release them when they're done.
Problem statement
How might we let data centers use their hardware efficiently, by making it easy to create and remove specialized server configurations as needed?
Two roles, one product
The Composer serves two kinds of users. A data center admin partitions storage, servers and GPUs among customers, called tenants. A tenant admin then composes servers from what they were given, based on the workloads they need to run.
GPU Connect is a focused version of the Composer for servers and GPUs. It turns a data center's GPUs into one shared pool that can be attached to or detached from servers as demand changes.
The design system
Components engineers could copy, not just look at
After the MVP shipped, the team hit familiar problems: inconsistent UI across parts of the product, designers and engineers using components differently, and no shared design principles. Every inconsistency became extra work for engineering.
With one other designer, I built Fungible's first design system. Because I'd been a front-end engineer, I didn't stop at Figma. I built it in code too.
- 01 · Figma Component library Co-created the components in Figma as the single source for design.
- 02 · Angular Styled Angular Material Restyled existing Angular Material components to match our system's specifications.
- 03 · Code Built new components Coded simple components in Angular, and HTML/CSS versions of complex ones for the front-end team to convert.
- 04 · Reference A living sticker sheet A reference site with usage examples and copyable code snippets for every component and icon.
What I owned in the product
Across releases of the Composer and GPU Connect, I owned the design of several areas end to end, working with domain experts, product owners and engineers.
Live network stats
Live charts for monitoring network usage per server.
Tenant creation
Creating customers and allocating storage, servers and GPUs to them.
Research for what's next
Researched and designed upcoming features like search and software updates.
Impact
- 3major releases shipped
- 10+enterprise customers, including Tesla and T-Mobile
- $1MARR in the first year
The design system sped up front-end development, made the product consistent, and strengthened the partnership between design and engineering. Engineers built from working code instead of redlines.
What I learned
-
CSS overrides have limits
Restyling a third-party library only goes so far. Some components needed to be rebuilt rather than overridden.
-
So do design system libraries
A library speeds things up, but its built-in assumptions shape what you can design. Choose it with that in mind.
-
Too many features hurt a new category
A first-of-its-kind product with a long feature list was hard to market and hard for customers to understand.