2019 - 2022
Fungible Data Center
Flexible and efficient data centers through the composable cloud
My Roles
UX Director
I led the Fungible UX team to bring the Fungible Data Center from 0 to launch through UX-first product development.
Product Strategist
I served the UX and engineering teams by writing product briefs and job stories to connect business goals to our design solutions.
User Researcher
I learned about the product domain and interviewed users to improve our product experience.
People Manager
I managed a UX team and guided recent graduates into T-shaped designers though critiques and mentorship.
Project Manager
I managed UX projects and reduced our design-code gap while improving collaboration through a UX-led design system launch.
Lead Designer
I built trust with new executives and helped secure an acquisition by reducing ambiguity and simplifying concepts and workflows.
Composable Cloud
Composable cloud is a software-defined infrastructure approach that enables dynamic allocation and reconfiguration of computing resources.
Why this approach
In traditional data centers, resources are siloed and require experts to manage. While virtualization brought flexibility, it came at the expense of performance. The composable cloud paradigm, made possible by Fungible-invented technology, combines the flexibility of virtualization with bare metal performance to enable truly efficient and cost-effective data centers.
Siloed resources require experts to manage.
Some workloads (e.g., AI/ML) require bare metal performance.
Inflexibility leads to underutilized resources and energy/cost inefficiencies.
Our goal was to bring technology and workflow together
Fungible invented the DPU, a technology that enables bare metal hardware performance over the network.
Cloudistics developed a platform that connects servers, storage, and virtual networks, simplifying private cloud management workflows.
Our challenge: Build the Composable Cloud workflow on top of Fungible’s hardware stack
I connected silos through horizontal and vertical efforts.
This lesson also applies to design organizations.
Product Brief:
Turn product vision into a product launch
Deliver 4 internal releases before Fungible acquires Cloudistics
Support bare metal workloads instead of virtualization workloads
Support the composition of physical and virtual resources instead of all virtual objects
We delivered through a UX-first approach to product development
Fungible acquired Cloudistics in 2019, and we launched a new product.
Fungible Data Center
Key Features:
Workflows built on top of DPU-enabled hardware
Independent scaling of servers, storage, GPUs, and virtual networks
Allocation of resources to multiple tenants
Software-defined “composed servers” for different workload needs
Customizable templates for scaling workloads
Modular management portal to fit different customer needs
Data center administrators can monitor activities related to the resources in their system.
Storage capacities from physical devices are aggregated into a pool. Administrators can monitor these storage devices.
GPUs stored in separate chassis can be "composed" with physical servers.
Servers can be "composed" with storage, GPU, and networking resources.
Resources can be assigned to different tenants, each with its own management portal.
In a tenant, users can deploy preconfigured environments with one click.
Users can create a custom environment with different types of composed servers that are easily scaled.
Once a composed server "instance" is created, physical resources can be swapped out without destroying a workload-specific composition. This feature allows for resource oversubscription.
Tenant administrators can monitor resources and activities related to their environments and composed servers.
Users are guided through the decomposition process and error cases.
Administrators can create and manage virtual networks assigned to different tenants.
Challenge 1:
Understanding Users
I took deep dives to surface user context, goals, motivations, and pain points.
-
Domain Knowledge
I took IT support courses from IBM and Google to understand important objects and concepts in the IT administration domain.
-
User Interviews
I interviewed users to find and fix pain points in earlier product releases.
-
Research Findings
I interviewed users and generated recommendations to improve our events and notifications features.
-
Cognitive Diversity
I collected information on cognitive diversity—I believe we need to understand the diverse ways in which people perceive, think, and approach problem-solving.
Challenge 2:
Building Support on the Problems and Solutions
Building Consensus on the Problems
I used job stories to frame the problem from the user’s perspective and guide consensus building on the connections between empathy and business objectives.
I surfaced the user’s situation to tackle pain points and find opportunities.
I considered the user’s motivation to avoid getting stuck on existing actions.
I mapped intended user outcomes to business goal to connect user values to business values.
I like using job stories because they are portable, flexible, and complete.
Mapping Flows & Functions
I created diagrams to clarify the problem and solution spaces. With these artifacts, I was able to reduce ambiguity and build consensus. I generally start with journeys and flows.
Journey map
Stakeholders map
Process flow
Physical structures to Fungible's abstractions
Starting with the customer’s journey
In this journey map, I used an end-to-end overview of the customer’s journey to set the course for our design solutions.
Using existing context to inform design
In this stakeholders map, I connected existing roles to our solution so that existing context can be used to inform design decisions.
Ensuring meaningful UI elements
I used a process flow to design meaningful dashboard widgets that fit user needs.
The outlined areas in the dashboard above map to decision points in the process flow diagram to the left.
Building the Form
After simplifying flows, I developed clear and simple information architecture, which I used to direct high-fidelity designs and improve product consistency.
Concept map
Sitemap
State diagram
Page layout inventory
Scenarios and examples
Building conceptual and visual consistency
I used a state diagram to build consistent terminology that contributed to cohesiveness in high-fidelity designs.
Organized and consistent object statuses lead to conceptual and visual clarity and cohesiveness.
Improving navigation
I used a concept map to create a UI element that gets the user to relevant information faster.
Major concepts (teal) and minor concepts (grey) can be presented in different areas of the screen layout. Minor concepts can be displayed on demand.
Reframing a solution
Between internal releases 2 and 3, the new executives challenged me to improve the clarity of our novel concepts. I accomplished this by reframing our conceptual metaphor, simplifying workflows without reducing functionality. We were fortunate to simplify these concepts early. Making such a change after the product launched would have been resource-intensive.
Challenge 3:
Bridging the Design-Code Gap
Launching a Design System
I orchestrated the launch of our design system.
Components - Our design team updated our Sketch design library to adhere to Material Design Guidelines and adopted Angular Material Components.
Design Tokens - Our design team documented our design decisions through design tokens and brought the tokens into the front-end code.
Sticker Sheet - Our design team delivered to the front-end team a sticker sheet of styled Angular Material Component using our design tokens.
Change Management
I coordinated across departments, managed expectations, resolved conflicts, and ensured the quality of our work. My change management efforts directed productive conversations, increased our team’s efficiency, and improved design and front-end collaboration.
Maintaining clarity in complex concepts and flows allowed us to focus on visual consistency while building our design system. We delivered our design system with our product launch.
Delivering High-fidelity Designs
Due to a staffing shortage, I took over ownership of the networking feature of Fungible Data Center while the design system project was in progress.
I added extensive functionality and delivered the design specifications to the cross-functional engineering pod.
I filed tickets to fix breakdowns in communication and ensured that the intended design was implemented.
My hands-on work helped us launch version 1 of Fungible Data Center with a design system.
The underlay network list before I owned the networking feature.
In this iteration, I added the concept of VRFs and CIDR blocks after discussions with our networking engineer.
In this iteration, I added network suspend and resume functionality. The network suspension feature was moved to the backlog.
In this released iteration, the networking concepts including VRF and CIDR block. I added a topology view to clearly map relationships between these concepts.
The virtual network properties before I owned the networking feature.
I added the network assignment flow.
The underlay network properties before I owned the networking feature.
I standardized the network properties page layout.
I added the network creation flow.
A wire flows of the high-fidelity designs.
We achieved our
Composable Cloud goals
Simplified concepts and flows in Composable Cloud
Met acquisition requirements and deadlines
Turned product vision into product launch
Delivered a design system, improving efficiency
Completed additional projects not on the roadmap
Microsoft acquired Fungible in January 2023. 🎉
Lessons
Complete the cycle – Eventually, physical resources die, and users need to recover gracefully. The breakdown of dependencies across different layers of abstraction compounded this challenge. Working through these failure cases took considerable effort and highlighted the importance of thoroughly reviewing the complete lifecycle.
Check all perspectives – We needed to review the product from at least eight different perspectives. Studying the four stages of the user’s journey—monitoring, allocation, composition, and templating— was straightforward. Still, we needed to surface the unique lifecycle of each of the four resources. Generating the correct view angles highlighted the importance of vetting the user’s journey from multiple perspectives.
Next: