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.
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.
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.