Solution Builder
Designing a network solution builder focused on diagramming and pricing estimation
Case Study | Equinix
Product Overview
Equinix Fabric & Network Edge is a part of Equinix’s product ecosystem and is used by IT and Networking professionals. The product allows customers to purchase virtual network devices from a marketplace of different vendors and configure and deploy them in real-time. After customers purchase virtual devices, they can add on various networking services like creating connections to pass data, controlling traffic and bandwidth, etc.
In this project, we introduced a brand new service, called Solution Builder, which lives in the Equinix Fabric & Network Edge portal.
Problem Statement
As a designer working on the Equinix Fabric & Network Edge product, I was tasked with designing for the following problem space:
Problem
Users need a better way to design their network and estimate costs before ordering various network devices and services
Role
Product Designer
timeframe
4-5 Months
tools
Figma, Miro, Survey Monkey, Google Sheet
category
UI/UX, User Research & Usability Testing, Journey Mapping, Interaction Design, Visual Design
Our Solution
Impact
Reduced sales cycle time by 22%, helping users move faster from idea to final solution — a big win for both usability and revenue.
My Design Process
For this project, I worked on a team of 1 researcher, 1 UX writer, a product team of 3, and a scrum team of 7 engineers. We were able to perform the following steps of the design process in a short timeframe before shipping the Solution Builder on Dec 22.
Current Experience
In the current Equinix Fabric & Network Edge product experience, users are required to jump into ordering a specific network item in order to view the cost of that item. There is no way to design network topologies in Equinix today, so users have resorted to alternative methods.
Since there is no way to explore all Equinix offerings, create a network design with those items, and view all of their costs from a single place, we decided to validate the need for this tool through user research.
Discovery & Research
The two personas who typically participate in visualizing networks are Network Architect customers and Equinix techincal sales employees called Global Solutions Architects (GSAs). Equinix GSAs collaborate with Network Architect customers to design network diagrams together to solve customers’ business use cases.
In order to better understand both personas’ needs or challenges when designing networks and understand customers’ pre-ordering experience with Equinix, we interviewed 6 Equinix Global Solutions Architects (GSAs) and 7 customers in Network Architect or Engineer roles.
We defined the following research goals for our interview script before speaking with them:
1
Why
Discover why GSAs and customers need to design network diagrams and their topic of discussion during that process
2
Current Process
Understand the current network design process, how pricing is discussed, and which tools
they use
3
Challenges
Uncover challenges faced during the network design process, challenges with various tools, or challenges when discovering and using Equinix products.
4
Validate
Validate the personas considered or uncover any additional personas
Interview Key Findings
We uncovered the following key points about the network design and diagramming process from user interviews:
Competitive Analysis
After interviews, we analyzed the tools participants mentioned they currently use, like Lucidchart and Microsoft Visio, and other competitors in the networking domain, like Amazon Web Services and Google Cloud Platform, to identify how they are handling network design and if there are any gaps we can address.
Lucidchart and Microsoft Visio Analysis
Overall Strengths ✅
+ Lucidchart and Visio provided flexible canvases to drag and drop various shapes
+ They offered templates that provide guidance and save design time
+ They provide custom shape-importing functionality to tailor designs
Overall Weaknesses ❌
- There is no functionality offered for users to design their networks visually before they deploy or order items
- They have separate cost estimator tools, but lack a centralized, single location to design and estimate costs for the design
Amazon Web Services (AWS) and Google Cloud Platform (GCP)
Overall Strengths ✅
+ AWS and GCP displayed users’ inventories of deployed assets visually in topology or geographic views
+ They provided interactive visualizations, so users can view more information on metrics like traffic, health status, etc.
Overall Weaknesses ❌
- There is no functionality offered for users to design their networks visually before they deploy or order items
- They have separate cost estimator tools but lack a centralized, single location to design and estimate costs for the design
Ideation
After reviewing the various products in the network design domain, and analyzing their basic features, strengths, and weaknesses, we ideated various opportunities that Equinix could solve for. We did a crazy eights exercise and brainstormed several ideas for potential features to include for our MVP.
Goal
With the long list of potential features identified, we further worked with our product and engineering stakeholders to decide on a narrow, prioritized list to tackle for our minimum viable product (MVP). We framed the priority features that would best serve our users top needs, as the following 'How Might We' statements:
User Flows
We created user flows to further break down the MVP tasks and outline steps users would walk through when performing actions like exploring offerings, adding items to the network design, and viewing the costs for those items.
The user flows focused on the following 3 areas:
1
Creating a Network design diagram
2
Viewing, modifying, saving or sharing the network designs from an inventory.
3
Viewing or downloading the pricing information from the network design
Wireframes
After outlining flows, we designed low fidelity wireframes to better envision a potential network designing solution. We incorporated the key steps defined in the user flows and shared this first iteration with our product stakeholders to ensure alignment before moving onto higher fidelity designs and usability testing.
.webp)
Equinix Design System
We leveraged Equinix’s Quix design system to create high-fidelity designs to cover every workflow and interaction in more detail. We reused existing components when possible to maintain consistency, but made modifications and designed new components to address the use cases for this project.
Since Solution Builder is a new service, we designed and defined several new components and interactions for dragging and dropping resources tiles, connecting two tiles together, etc.
Iterative Design & Testing
After creating an interactive high-fidelity prototype, we did 3 rounds of remote moderated usability testing, first with 3 Global Solutions Architects (GSAs), then with 3 more GSAs, and then with 6 Network Architect/Engineer customers to uncover areas of improvement. We asked them to complete scenario-based tasks for mock networking use cases for which they would need to create a design and view the costs. We also followed up with open-ended questions to gauge their overall impressions of the Solution Builder MVP, what they would change, etc.
Through testing, we discovered the following usability challenges that we iterated on to improve:
Resource Panel Interaction Feedback & Improvements
Resource Panel Navigation Feedback & Improvements
Resource Tile Feedback & Improvements
Pricing Summary Feedback & Improvements
Working with Content
Throughout the design process, we worked with our UX Writer, Sarah B to review the copy for several iterations.
Development Handoff & Support
To better solidify the final designs, I designed edge cases, empty, and error states, etc.
Development team was involved early in the process and we reviewed design iterations several times to ensure alignment, at this stage, I focused more on development support and documented design specifications with overviews of the feature, in-scope flows, detailed components, and interactions, etc.
Final Design Solution
The final Solution Builder service enables Equinix Global Solutions Architects and Network Architect customers to visualize their network and estimate their costs before purchasing. Users can explore various Equinix products and services in the resource panel and drag-and-drop them into their network design. Users can view the cost breakdowns of their designed network configurations from the pricing summary, so they can share these estimates with their team before proceeding to order.
.webp)
Summary & Retrospective
Overall, I really enjoyed designing the Solution Builder and I am proud to have successfully shipped the Beta version. I enjoyed contributing to the end-to-end design process, learning more about our users and their needs for the network design space, and collaborating with product, engineering, and other stakeholders.
Measuring Success and Impact
As the three usability testing rounds progressed, more participants were able to complete the tasks in a shorter time. Since we recently shipped the beta, we are currently collecting customer feedback and satisfaction through a CSAT feedback survey. We are also currently measuring and analyzing adoption, conversion, drop-off, and time on pages.
Equinix stakeholders are highly enthusiastic about this project. The Solution Builder is shaping up to be the largest, new offering with several Equinix products in the works to be onboarded onto it in future phases.
Challenges
Some challenges we faced during this project were around introducing new canvas and network design functionality. With time constraints, we worked agilely to design new components and partnered with engineering to understand the limitations of third-party libraries being used for diagramming.
It was also challenging to design a scalable MVP solution so that more Equinix products can be easily onboarded onto the Solution Builder in the future. Because we didn't have any formal requirements during these early stages, we presented our designs at numerous large design reviews with various stakeholder teams, so they could point out any crucial areas for improvement if needed.
Future Improvements
If I could improve on some areas for this Solution Builder project, I would have liked to design for accessibility by offering keyboard interaction alternatives for drag-and-drop. In the future, I would also like to design additional functionality like templates for common network designs, onboarding, a seamless transition to bulk ordering of all the items users include in their designed solution, etc.
Next Steps
For the next steps, the Solution Builder project will continue to have phased releases to onboard more Equinix products and service offerings. We are continuing to explore adding a map view to allow users to discover items by location and create network designs with them. We will also work on the ordering experience from the diagrams.
.png){kind=icon}