Designing Dashboards with Purpose

Streamlining

Infrastructure

Streamlining

Infrastructure

Streamlining

Infrastructure

My Role

Leading the redesign of the Hashicorp Cloud Platform (HCP) Organization Dashboard from ideation to handoff.

Resources

5 months
1 Product Designer (me)
1 Product Manager

5 months
1 Product Designer (me)
1 Product Manager

5 months
1 Product Designer (me)
1 Product Manager

I have participated in the creation of every design and artifact shown

Low on time? Find what you are looking for:

For the whole picture, you are in the right place!

Project Details

Research

Design Process

Usability Testing

Results & Prototype

Imagine: you're a platform engineer or application developer, ready to deploy and manage infrastructure on HCP. You open the dashboard, eager to get started.

But as you click around, the excitement fades. The org and project dashboards look the same but behave differently. Nothing explains what to do or where to start. You waste time clicking, guessing, and backtracking until frustration takes over. What should feel powerful just feels... stuck.

Project Details

What is Hashicorp Cloud Platform (HCP)?

HCP is a managed cloud platform that lets teams use tools like Terraform, Vault, and Consul without managing the infrastructure themselves. It offers a single UI for provisioning, securing, and monitoring services, with built-in access controls and a clear org-project hierarchy.

Terraform is the #1 configuration management tool with more than 32% market share. It is a tool that helps you set up and manage computer systems and resources in the cloud automatically.

The Objective

Redesign HCP Org dashboard to reduce friction, clarify navigation, and surface role-relevant actions grounded in Jobs To Be Done and real user workflows.

Results

Improved clarity, added smart alerts and quick actions, with up to 60% faster time spent navigating and troubleshooting expected while providing a more scalable, role-aware foundation.

Who are we impacting?

4,423 Companies are active users of HCP (as of 2024), including companies like:

29,259 Companies are active users of Terraform, including companies like:

First, What are Stacks?

Stacks help organize and connect different parts of an infrastructure to ensure they work together seamlessly. They set up different versions for various situations and automate repetitive tasks to make the process smoother and more efficient.

So… What is Wrong?

Right now, there isn't a standardized way to manage situations where one part of our infrastructure relies on another part. Customers have said they prefer a built-in, standardized method instead of creating their own solutions.

Solution: Linked Stacks

Linked stacks provide a way to connect different stacks so they can share data and collaborate more effectively. This system ensures that changes in one stack trigger updates in linked stacks, maintaining consistency and reducing errors.

Linked Stacks (simplified)

Linked Stack Change Workflow

First, What are Stacks?

Solution: Linked Stacks

Research

Competitive Analysis

Competitive Analysis

Support Call Insights

The visual design does not reinforce the difference between project and org dashboards clearly enough.

“Dashboard” implies high-level overview of activity, not showing resources makes it feel incomplete.

Users see the org dashboard as a place they can manage everything.

Customer Call Insights

Key Metrics on Landing = High Priority

Deployment health, failed Sentinel policies, Terraform versions, security risks, high-level usage

Alerts + Status Must Be Actionable and Trustworthy

"Isolated customer zones map well to our stacks, but as ever, the problem of dependencies across stacks is sticky!"

Need for Customization by Persona or User

"Isolated customer zones map well to our stacks, but as ever, the problem of dependencies across stacks is sticky!"

Too Much Clutter / Irrelevant Information

"Isolated customer zones map well to our stacks, but as ever, the problem of dependencies across stacks is sticky!"

Design Process

Wireframing

And with that... I started wireframing. I wasn’t used to creating designs with so much uncertainty, with no finalized features or flows, so my brain was working in overtime throughout this process.

It took a lot of iterations and a lot of syncs with stakeholders...

… but finally I delivered the Initial Wireframes

Wireframing

With inputs and outputs and overviews, I thought I was in the right road until... I had to Pivot

I am so grateful I pivoted, as it allowed me to deliver designs that are the users’ top priority, leading to Final Wireframes

Usability Testing

Evaluating the Usability, Sufficiency, and Effectiveness.

I led 7 concept tests to evaluate the current flow and presentation of information, evaluated under 3 key areas.

Some of the Feedback & How I Addressed It

Suggestions for better visibility of input changes, including old and new values. Emphasis on the importance of seeing old values for sanity checks.

2 of the 7 participants were unable to easily locate the upstream stack of a plan. Participants emphasized the need for better labeling for input origin, including local vs. upstream inputs.

Participants were able to understand icons and their meanings, but were uncertain towards users less familiar with TF icons understanding it.

We also had some great feedback!

Solutions Engineer

Concept Testing Participant

"Linked stacks would be very useful in the current workflow - it solves a big problem"

Final Design

The End!

With Linked Stacks You Can Rewrite the Narrative!

Imagine: you're a dedicated IT professional or an eager developer, laptop in hand, trying to make sure different parts of your infrastructure can share data and work together smoothly.

You sit down, full of hope, and open your computer to set things up. This time, hours pass productively. Instead of wrestling with complex instructions or scripts, your infrastructure comes together effortlessly. Stacks communicate seamlessly, as if they were designed to work in harmony. With each success, your excitement grows, and by the end, you feel accomplished and empowered, having saved time and avoided the usual frustrations.

This is the impact of Linked Stacks—transforming a once daunting task into a smooth, satisfying experience, letting you focus on innovation and progress.

You sit down, full of hope, and open your computer to set things up. This time, hours pass productively. Instead of wrestling with complex instructions or scripts, your infrastructure comes together effortlessly. Stacks communicate seamlessly, as if they were designed to work in harmony. With each success, your excitement grows, and by the end, you feel accomplished and empowered, having saved time and avoided the usual frustrations.

This is the impact of Linked Stacks—transforming a once daunting task into a smooth, satisfying experience, letting you focus on innovation and progress.

You sit down, full of hope, and open your computer to set things up. This time, hours pass productively. Instead of wrestling with complex instructions or scripts, your infrastructure comes together effortlessly. Stacks communicate seamlessly, as if they were designed to work in harmony. With each success, your excitement grows, and by the end, you feel accomplished and empowered, having saved time and avoided the usual frustrations.

This is the impact of Linked Stacks—transforming a once daunting task into a smooth, satisfying experience, letting you focus on innovation and progress.

Key Learnings & Takeaways

Designing for Unique User Types

Understanding unfamiliar personas or designing for products I might never use was challenging, but it pushed me to grow. Stepping out of my comfort zone strengthened both my design skills and perspective.

Designing for Unique User Types

Defining Role of Design

The design process can shape project vision and outcomes. Active stakeholder communication ensured alignment with broader goals, leading to a cohesive and successful result.

Defining Role of Design

The design process can shape project vision and outcomes. Active stakeholder communication ensured alignment with broader goals, leading to a cohesive and successful result.

Defining Role of Design

The design process can shape project vision and outcomes. Active stakeholder communication ensured alignment with broader goals, leading to a cohesive and successful result.

Navigating Through Uncertainty

This project taught me how to stay adaptable and resourceful when faced with ambiguity. By embracing uncertainty, I was able to iterate quickly, seek feedback, and refine designs, ultimately leading to a more effective and user-centered solution.

Navigating Through Uncertainty