I joined the seed-stage startup in September 2017, drawn by its ambitious vision to become the system of record for the Internet infrastructure industry.
In the following sections, I’ll present each of the three products in the Inflect Suite and how they fit into the company’s strategy. I’ll dive a little deeper in my process designing the point-to-point connectivity search platform, Routefinder. I’ll also present the design system I created for Inflect, including colors, typography and UI elements.
Data Center Search
Data Center Search allows users find data centers anywhere around the world based on a number of search criteria such as location, technical specs, certifications, and ecosystem (the companies renting space within the data center).
Depending on business requirements, a user could be looking for a West Coast data center that is PCI-DSS compliant and offers a direct connection to CenturyLink:
Or if their workflow is power intensive—for instance in the case of cryptocurrency mining—they might be interested in a data center with high power per rack:
Data center pages
Each data center on Inflect has a dedicated page. When I joined inflect, the product was still in private beta and data center pages had received little design treatment. I led a design sprint to create a visually engaging template that would allow users to easily find technical specs and browse ecosystem participants:
I also created a template for all organizations in the Inflect database, highlighting their points of presence across different data centers worldwide:
A few months after joining Inflect, I started working on a research tool to help users find network connectivity across locations. This was one of the most requested features.
Private network deals are frequent, high-stake, and very lucrative (about $4 billion spent annually). Yet, in the absence of a centralized search tool, the research process remains mostly manual:
There is no good way to research network connectivity in the industry
Information about service providers, latency, and pricing is opaque and fragmented
People rely on past experiences and word of mouth
Mistakes are costly (long contracts)
When I first started working Routefinder, we did not intend to build it yet. The goal was to use the prototype to validate a long-term vision with users, service providers, and potential investors. In terms of design, it was an opportunity to dream big without thinking about implementation and feasibility.
The problem was well known at Inflect, but to me, it was entirely new. I started my research by sitting down with Inflect’s CEO and the VP of Sales. Prior to founding the company, they had built a successful consultancy to provide strategic network procurement services to clients like Facebook, Twitter, Netflix, Weebly, Bloomberg and Twitch.
I read blog posts, articles and books (very expensive books) on the topic.
I worked with a colleague to schedule interviews with potential users and industry experts. Interviews helped identify 4 main personas and gave me a clear picture of the data I needed to articulate Routefinder.
I reviewed and analyzed a number of relevant products such as Zayo Tranzact, Digital Realty’s internal connectivity tool, ThousandEyes… But some of the most relevant intel came from consumer products that I use everyday. I was particularly interested in Google Maps’ directions feature, as well as flight search tools such as Hipmunk and Kayak.
I took notes and sketched different approaches throughout the research process:
My first explorations borrowed heavily from flight search tools, with a complete set of filters on the left. I had not entirely figured out how to display route metadata. Additionally, the all-white UI was a little dull on the eye:
As clunky as it was, this first prototype generated excitement within the team and beyond. Potential users were excited and wanted to buy licenses. Service providers wanted to contribute data. Routefinder was suddenly on the roadmap!
Scoping the MVP
This was a period of effervescence for the team as there were many outstanding questions. How can Inflect’s data team source latency and pricing information? How easily can we obtain KMZ files for route path information? Which techniques can we use to estimate latency? Do we need to restructure our data model?
We ended up narrowly scoping the MVP with the intention to quickly iterate:
Users can select data centers and Cloud regions in Inflect’s database.
Measured latency is out of scope. We’ll use estimated latency.
The actual location of fiber-optic cables is out of scope. We’ll use network provider points of presence as a proxy.
Product & pricing information are out of scope
Users must be able to export route details summary and use it as a sales order. Transactions are out of scope.
For this second prototype, I removed a lot of metadata such as product information and pricing, and dove deeper in the interaction.
One of the main challenges was to group routes intelligently to avoid repetitive results. For instance, if several network providers serviced the same route, I wanted to avoid listing it several time in a row:
We tested the second prototype with 9 users and obtained the following insights:
Users want to be able to search enterprise locations (5/9)
Users like the route visualization charts (5/9)
Latency information needs to be more prominent (4/9)
Users want to see actual cable routes (3/9)
This can be a game-changing tool for the industry (3/9)
UI pattern for results listings is a little confusing (3/9)
Some of these items were immediately actionable, but others required massive data collection efforts. I gathered the product team to discuss prioritization.
I refined the result listing pattern and made latency estimates more prominent to address findings from usability sessions. This third prototype also defined a number of entry points.
As prototype iterations gained in fidelity, it became apparent that Routefinder had a life of its own. I restructured the Inflect platform into separate products—the Inflect Suite. The suite structure gave Inflect more of a polished, Enterprise look. It also made it easier to explain the value proposition of each product. I added a product menu in Inflect’s navigation bar, allowing users to rapidly switch between different products:
Here is a preview of the final prototype for Routefinder (click on pictures to play):
Our team of 5 engineers built Routefinder in just 5 weeks. We released it to about 40 Alpha users to collect feedback while we focused on other aspects of the release such as user onboarding and marketing pages.
I designed a feedback module that would make it easy for Alpha users to share their insights:
Three weeks into the Alpha release, users averaged 4.2 sessions per user per week, with an average session length just over 5 minutes. Users also engaged actively with the feedback module to request new features, suggest corrections, or offer to contribute their organization’s data. Notably, we learned that our latency estimates were too aggressive and updated our model accordingly.
I am happy to share additional information about Routefinder’s implementation and public release upon request.
Inflect HQ provides asset management and sales enablement tools for buyers and service providers.
Inflect’s map embed feature lets users create, customize, and embed interactive maps of their points of presence worldwide.
The document manager allows users to track their colocation, Cloud and network contracts across service providers, and schedule reminders for renegotiation and renewal.
The messaging platform allows service providers to receive and reply to information requests from potential buyers.
As of December 2018, Inflect counts more than 80 service provider partners contributing data and actively engaging on the platform.
Data ingestion processes still rely heavily on Inflect’s data team. The following mocks show explorations for HQ 2.0, a full-fledged asset management tool that would allow colocation providers to track and manage data centers in their portfolio:
Here is a overview of the design system I built for Inflect.
Inflect’s typeface is Whitney. We use 3 fonts in the product: Whitney Book, Whitney Medium, and Whitney Italic. Line height is 150%. The default text color is Carbon (#2B3847).
Inflect uses a custom icon font (SVG). Icons are on a 24px artboard and use 1px strokes, with rounded edges and soft corners.
Previous experience: Honor