UX Transformation & Migration
My Role: Vision, UX/UI Design, Project Management
The Problem
-
Our product, CloudHealth, was designed using old technology and outdated UI, which led to a dated look and feel, clunky workflows, and overloaded navigation with single-cloud views.
-
We were migrating to a new platform called “Tanzu Hub” where users did not have a single-pane-of-glass view into managing their public clouds. They had visibility into infrastructure, performance, governance – but nothing related to the cost of their cloud.
CloudHealth Legacy UI
As a note, the above are listed as “problems” however I did not actually see a problem at all. Migrating to a new platform was an exciting opportunity to completely transform the state of our user experience. These opportunities don’t come along often, so I knew we had one chance to get this right.
Project Goal
-
One unified platform that would contain a basis for displaying the most important cost information for users managing their public cloud – cost reporting, anomaly detection, rightsizing, optimization, and even AI!
-
Reimagine the user experience from the ground up. Create enhanced end-to-end workflows that solve problems for our FinOps users in the most intuitive way possible.
-
Follow our newly defined set of UX principles - By focusing on key areas such as simplicity, accessibility, and consistency, these principles aim to provide delightful user experience that drives business success.
Research & Discovery Methods
-
Competitive Analysis
-
Customer Interviews
-
Usability Testing
Research Insights
​Customer Survey Results
-
34% noted complexity of reporting and managing cloud costs as one of their top 3 barriers to effective cloud management.
-
39% noted lack of cloud expertise as one of their top 3 barriers to effective cloud management.
-
41% of organizations want to optimize their existing use of cloud (achieve cost savings).
-
47% + of organizations currently have a multi-cloud strategy (multiple public and/or private clouds).
Key Takeaway
With this product integration we needed to focus on 3 things - simplicity, multi cloud first approach, and building intuitive flows that achieve cost savings.
Persona
Based on historical data from our CloudHealth platform, we knew our primary persona was FinOps. FinOps is a combination of Finance and DevOps - stressing the communication and collaboration between engineering, finance, and business teams. The FinOps persona maximizes the business value of cloud, enables timely data-driven decision making, and creates financial accountability.
Early Concepts & Explorations
-
As the UX lead for this project, part of my responsibility was planning. I identified the team members strengths and used that to our advantage by assigning projects appropriately. I was in a player-coach role, so I assigned myself to various design aspects as well.
-
Each team member had to scrutinize the existing UX and optimize their new workflow, then we had to bring the flows together to connect the dots. We wanted the flows to be seamless - this took a few iterations and collaboration with PM.
Reservation Flow Diagram in Tanzu
-
During this phase, PM decided to include AI cost reporting as part of the initial Beta. This was a new area that generated a lot of excitement amongst the team, we knew we had to get this right.
Intelligent Assist Chat Bot - Report Generation
Things to Consider Along the Way
Day 1 Experience - What was that like?
We needed to think about where a user would land on Day 1. How would they login to the new platform? Would they see all their data automatically? How would they get back and forth between the two platforms - old and new? How could we design the dashboard homepage in a way that would look both familiar and showcase new enhanced capabilities?
​
Connecting the dots
We didn’t want this to be a set of features, but a solution to a problem. We needed to stitch the story with other Hub services and tell a story in a seamless way. Achieving this goal meant cutting down on clicks, keeping the user in context, and simplifying the UI by showing only necessary data to help the user make decisions.
​
Technical challenges
Working with an evolving design system - not all components were built yet. GenAI was new and we were figuring out edge cases and generating responses when the prompt could not fetch data.
High Fi Iterations and Refinements
Each team member, including myself, presented numerous times during design review​s, PM/Eng stakeholder reviews, and top level leadership reviews. This resulted in the ability to generate quick feedback loops and design iterations.
Final Outcome
-
One platform where users can manage their public cloud environments – including cost visibility and optimization!
-
Intuitive workflows that connect the dots between cost and other services
-
Introducing AI generative reporting! Creating custom cost reports using natural language in seconds.
-
Clean & modern UI utilizing the Hub pattern library
%20Partner%20Customer%20Statements%20(1).png)
Screenshot sampling of designs from Tanzu CloudHealth
Delivering Impact
As the project lead and designer, I led this large scale initiative involving the development of over ten features, completed over a eight-month period from initiation to production. Of the ten new features, I designed five of them including the homepage, Smart Summary, Realized Savings, Customer Statements, and Commitment Discounts. The result was a significantly improved and intuitive user experience, enhanced functionality, and the introduction of AI-powered reporting. Customer satisfaction has been high, and our technical account managers report that onboarding now takes half the time due to the platform’s ease of use.
We are continuing to onboard customers to the Beta and gather feedback to inform future improvements.