The Hub Console
Helping enterprise developers provision and debug cloud services 29% faster by transforming a complex backend into an intuitive, trustworthy console.
29%
Time-to-Debug Reduced
Less
Errors & Support Calls
Less
Steps and Tools
Target Users
Developers, Cloud Operators
Timeline
6 months
Category
B2B SaaS
Team
1x PM, 3x Engineers, 1x Product Designer
I owned end-to-end UX for this product area, from problem framing and research through interaction design and validation, working closely with product management and engineering to shape both experience and delivery.
-
Discovery: Miro, Figjam, User Journeys
-
Design: Figma
-
Product/Backlog: Atlassian
Problem
Developers had to navigate long, cryptic service lists and external logging tools to understand system health and resolve failures.
User Pain Points
This resulted in:
-
Slower deployments and debugging
-
High Mean Time to Resolution (MTTR)
-
Increased operational cost
-
Heavy reliance on support teams
Technical Constraints
Discovery
To understand real workflows, I conducted:
-
Interviews with developers and operators
-
Shadowing of debugging sessions
-
Analysis of support tickets
-
Reviews of infrastructure documentation
Key Insights that guided the decisions:
-
Developers memorised unsafe workarounds
-
Logs were the main debugging tool, but hard to access
-
Users prioritised speed over elegance
-
Fear of mistakes slowed decision-making
-
Most errors happened during provisioning
Developer's Journey — Before & After
Developer's Journey — Happy flow & Error flow
Key Decisions
1. System Health Was Hard to Understand
Insight
Developers could not quickly determine whether services were healthy or failing, which delayed troubleshooting and increased reliance on external tools.
Decision
Designed a status-first service list with clear visual indicators (Online, Warning, Failed) and progressive disclosure for technical detail.
Impact
Developers could prioritise issues immediately, reducing time spent scanning logs and improving time-to-debug.
Progressive Disclosure, Visibility of System Status, Minimal Cognitive Load
2. Debugging Required Constant Context Switching
Insight
Developers had to leave the console to access raw Kubernetes logs, breaking their workflow and increasing Mean Time to Resolution.
Decision
Integrated inline error alerts and a full-screen log viewer that allowed users to navigate logs without leaving the interface.
Impact
Debugging workflows became continuous and focused, reducing resolution time and improving developer productivity.
Progressive Disclosure, Visibility of System Status, Minimal Cognitive Load
Iteration
Engineers initially pushed back on exposing logs inline, concerned it would overwhelm non-technical operators. The PM wanted all information on a single page. I prototyped both approaches, full-page information density vs. status-first with progressive disclosure. Usability testing showed the dense layout hurt scanability under pressure, so I kept the status-first pattern but made logs visible by default when a service was in an error state. This gave engineers the speed they needed without overwhelming operators during normal use.
3. Configuration Errors Were Costly and Frequent
Insight
Small mistakes in selecting plans, regions, or replication modes often resulted in failed or expensive deployments.
Decision
Designed guided provisioning flows with step-by-step validation, live pricing feedback, and plan comparisons.
Impact
Provisioning errors dropped significantly, leading to more reliable deployments and lower operational risk.
Error Prevention, Immediate Feedback, Consistency & Standards
Iteration
My original design used a wizard-style multi-step form based on the business requirement to minimise provisioning errors. Engineers pushed back, developers told me they prioritised speed over hand-holding and found step-by-step flows frustrating in a professional tool. Rather than choosing one or the other, I redesigned as a single-screen form with tight inline validation: all fields visible at once for speed, but errors caught immediately before submission. This addressed both the developer's need for efficiency and the business's need for accuracy
4. Users Were Afraid of Destructive Actions
Insight
Developers hesitated when restarting or deleting services because mistakes could cause system outages or data loss.
Decision
Introduced context-aware confirmation patterns showing instance name, status, and consequences before execution.
Impact
Destructive actions became safer and more predictable, reducing accidental outages and increasing user confidence.
Error Prevention, Immediate Feedback, Consistency & Standards
Outcome
How I Worked?
Design System Components
1. Align & Frame
Aligned with product, engineering, and compliance to define scope, risks, and success criteria.
2. Observe & Research
Interviewed developers, analysed support data, and shadowed real debugging workflows.
3. Model the System
Mapped permissions, dependencies, and failure states in a multi-tenant environment.
4. Structure & Strategise
Designed status-driven navigation, safety patterns, and progressive disclosure rules.
5. Design & Test
Built interactive prototypes and validated them through usability testing and scenario walkthroughs.
6. Ship & Improve
Partnered with engineering on delivery and iterated post-launch using real usage data.