Cloud OnRamp - Virtual Connection Planner - Hackathon Winner 2021 - Equinix

Equinix is the world’s most expansive, secure and sustainable data center platform which specializes in internet connection and digital interconnection related services. They own and operate a network of 220+ data centers in 44 major metropolitan areas and 22 countries on five continents.

Project Overview

CloudOnRamp with Equinix (CORE) is a latency based connection route discovery service that helps cloud solution architects to search and explore best latency routes to connect their IT infrastructure assets to Cloud service providers within minutes. Our Hackathon solution significantly reduces the route/connection planning process from weeks/months to just a few minutes providing customers a delightful and seamless experience.

My Contributions

• Led the conceptualization, ideation and end to end design solution process.
• Conducted User interviews and gathered pain points around connection planning process.
• Designed Low fidelity wireframes and High Fidelity interactive mockups with variations based on MVP features and API limitations.
• Provided latency route dataviz D3.js coded prototype to Front end Engineer and helped with UI Component customization.
• Directed the storytelling and pitching with video and audio editing expertise.
• Collaborared, facilited and negotiated on features with engineering for MVP scope based on time constraints.

Quick Facts

My Role:
UX Designer
I led the entire design direction including interaction design and story telling pitching. Ideated, designed and delivered high fidelity interactive mockups as well as provided coded prototype for SVG loading Animation and D3.js data vizualizations.

Team:
Surbhit Bhatngar | Sr. Software Engineer
Srividhya Sitaraman | Sr. Software Engineer
Jaya Sharma | Sr. Program Manager

Time:
August 2021

Stack:
HTML, LESS, Ant Design, ReactJS, JavaScript, Microfrontend architecture, D3.js, SVG Animation, Design System

Tools:
Figma, Miro, MS Powerpoint


The Problem
Currently when a Cloud Solution Architect get a request to create a new connection from Equinix customers they need to refer to various tools to learn about the best efficient routes from location to location and need to provide this info back to customers via email. This is the planning phase of connections, since there are multiple tools that are used during this process it can easily take up to few weeks to months of time communicating this info back and forth via email causing delay in creating connections to scale to new locations.
Connection creation process gets even more complicated when desired location, bandwidth and desired cloud service providers as requirements thrown in the mix. This entire process can lead to confusion and frustration for both CSA and customers and if not done right, a few milliseconds of latency difference can result in millions of business loss.

Goals
1. Seamless Discovery of available location routes and their latency based on location, cloud service provider and bandwidth.
2. View Price estimates and the latency from location to location for each result.
3. Detail view for the selected latency route.
4. View latency Routes in a dataviz, a different result view.
5. Sorting latency results based on bandwidth, best latency and price.
6. Export desired latency route pricing estimate.

Design Process Overview -
Here is a quick overview of the design journey we went through based on a very short timeline -
1. Interview with Cloud Solution Architect and Customer
2. Scope definition and feasability check of the project
3. Brainstorming and Ideation
4. Initial Lo-fi Wireframes
5. API capability check: Equinix Fabric API + Open source CSP data created custom API
6. Hign fidelity Mockups Creation & Validation with Users.
7. Scope addon to add more weight to project (Create connection based on desired result)

1. Interview with Cloud Solution Architect and Customer

Interview with Cloud Solution Architect key findings:
1. Various tools required to make the decision
2. Learnt mental modal of approaching the latency solution (“where” to “who” with “bandwidth”)

Interview with customer:
1. How long it takes to create the connection
2. Communication modes differences
3. Requirements for sharing the price estimates (Port types, redundancy)

2. Scope definition and feasability check of the project

Possible features scoping that solves the painpoints
1. Ease of capturing user inputs (bandwidth, location, cloud service providers) scope limited to America Continent and Amazon and Google Cloud Service providers
2. API feasibility - finding available APIs (Fabric API + CSP API) to get latency, pricing , validating their data structure and access and restructure data.
3. Ease of viewing and filtering (bandwidth, pricing, recommended) the latency search results
4. View details about the selected latency route.
5. Ease of exporting the data based on port pricing model and location as required attributes.

3. Brainstorming and Ideation

After gathering insights from the user interviews and API capabilities I went to brainstorming and ideation mode. Things I kept in mind while drawing solutions and looking at inspiring ideas:
1. Learn the matrix of current solution tools. (need screenshots)
2. Similarity and Alignment /inspiration with the flight discovery.
3. View for map view or data viz to show the latency between path to path.
4. Designstorm with map views, location matrix and path finder.

4. Initial Lo-fi Wireframes

Here are a the Lo-fi wireframes I put together based on painpoints and scope in mind, few things to notice here:
1. Learn the matrix of current solution tools. (need screenshots)
2. Similarity and Alignment /inspiration with the flight discovery.
3. View for map view or data viz to show the latency between path to path.
4. Designstorm with map views, location matrix and path finder.

5. API: Equinix Fabric API + Open source CSP data created custom API

Our talented backend Engineer Surbhit shared his ideas and feasibility with rest of the team, this was crucial step where I got to gauge all the available datasets we had this was going to drive the scope of the project - Key points from the API archicture discussion:
1. Graphana API for cloud latency data.
2. Thousand Eye, Augtera, Megaport for live multicloud data.
3. Port pricing was determined by port package type * bandwidth + Remote connection price.
4. Bandwidth scope was picked between 50MB - 10 Gbps based on API capabilities

6. Hi-fi Mockups Creation
Once The API scope clear and feedback was collected from LoFi with user, I was able to put together a Hi-fidelity Mockups which is based on the components and guidelines of New Design System Quix launched recently.
Things I kept in mind as I was updating LoFi to HiFi mockups - 1. Learn the matrix of current solution tools. (need screenshots)
2. Similarity and Alignment /inspiration with the flight discovery.
3. View for map view or data viz to show the latency between path to path.
4. Designstorm with map views, location matrix and path finder.


Pivoting, scope readjustments due to limited time and Frontend Collaboration
Pivoting and scope readjustments are an inevitable step of building software products, ours was no different, we ran into few scenarios where we had to shift our focus and make sure we deliver in given time with MVP features. 1. Time limit reduced our feature scope to only having export estimation of connection planner vs full create connection flow. 2. Priority was shifted to focus on the major features due to lack of front end engineering hands so I decided to jump in and provide additional help on creating the dataviz for D3 and collaborated with front end engineer to develop it in time. 3. Coding the UI components for new Design System was going to take a long time hence we decided to go with existing available UI components this decision improved development speed significantly.

Video and Music Production skills in Storytelling
Pitching is an essential part of doing any project and for this hackathon’s round one we were required to submit a 3 min long video which explains the project problem and solution with demo all in one video. I was more than happy to volunteer with my music production and video editing skills. After several rounds of script edits we finalized one that was suitable for timelimit. I helped with typography, animation and compelling illustrations which help elaborate the story of our project.


We made it to Round 2!
Out of 50 teams only 20 were picked to go to the semifinal round and our team was among the lucky ones. Now the challenge was to make it to the finals. Only 5 teams were going to make that happen.

Final Round Winners! Most awaiting moment was here.
Out of 20 teams our team among other 4 were selected for the final round, we couldn’t believe it, it was our time to shine and outperform other 4. Looking at our competing teams we were quite sure that we would get atleast top three and wanted to give our best. In my heart I strongly believed that we could be the 1st and wanted to prepare for it. We had the 5 Chief level judges and 2 customers on final round panel. It was nervewracking to do live demo on Zoom while 200+ team members are watching and judging. Luckily our pitch and demo went just fine, the judges showed high interest in our solution and couldn’t stop asking more about our solution approach. It was the biggest validation when the customer outright said, "Cloud On-Ramp wow’d me the most because it just saves so much time of engineering work to plan the connectivity and to make our". Our CEO - Charles M. was also ecstatic to see such elegant solution to a cumbersome problem. One of the Sr product director said, “It looks like its already built, lets ship it!” All in all it was a well executed pitch and demo.
When the results arrived we were shoked to see that we not only recieved the top judges awards but also got the customer’s top choice award, this has never happened in Equinix Hackathon History when one team took both of them. We were AMAZED! and couldn’t believe ourselves. Overall that resulted in an amazing experience. We each took a whooping $1500 of Amazon Gift card as the winner of both customer choice and Judges choice award. Later on our Hackathon success story was also featured in Equinix newsletter.

Next Steps and Future for Cloud OnRamp
The Sr. Product Director liked the project so much that they suggested implementing it right away. However, there were assessments that needed to be done from various teams (Security, Architecture, Product) to align on the established processes. We had just presented a whole year’s worth of work in just a few days and it was truly a proud accomplishment by the team. This project is being adopted as an interconnection product in the upcoming roadmap in the form of solution builder.

My learnings and reflections:
I have always enjoyed putting my hackmode on and build MVPs to think out of the box to test out ideas and validate with users. It gives me tremendous joy to be able to not only empthasize with painpoints but also provide distinguished solutions for them. I had been planning to take a part in hackathon for a long time and this was truely a wonderful experience. I couldn’t have done it without my teams hard work and their dedication. Thankful for such talented team mates and thankful for Equinix for providing such platforms to allow us venture on unknown terriotories and discovering our talents.