Streamlining Infrastructure

Streamlining

Infrastructure

Streamlining

Infrastructure

Streamlining

Infrastructure

My Role

Leading the design of the Linked Stacks feature from ideation to handoff.

Resources

3 months
1 Product Designer (me), 1 Product Design Lead
1 Product Manager, 1 Software Engineer

3 months
1 Product Designer (me), 1 Product Design Lead
1 Product Manager, 1 Software Engineer

3 months
1 Product Designer (me), 1 Product Design Lead
1 Product Manager, 1 Software Engineer

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 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. Hours pass as you try to figure out complicated steps, write special codes, and read confusing instructions. Your excitement dwindles with each frustrating problem. Finally, you give up, feeling disheartened by the wasted effort and missed opportunities.

Project Details

What is Terraform?

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

I was tasked with designing the UI for Linked Stacks, including information about stack connections, outputs, inputs and the plan page.

Results

Achieved a 95% user satisfaction rate, and an estimated adoption rate of 93% in the next 5 years.

Who are we impacting?

4,300+ Companies are active users of Terraform (as of 2023), 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

Going Through Existing Research

As the project started, I was given an overview of what Linked Stacks are planned to be, as well as some research conducted beforehand that led to Linked Stacks. My first step was thoroughly understanding the problem and going over the research.

Going Through Existing Research

Mapping the Insights to find Areas of Pain

Mapping the Journey from different perspectives, finding key pain points in the task flow

Some Research Insights

DropBox:

"With stacks ... they were struggling to understand how they would manage interservice dependencies."

Credit Karma:

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

"Every time I have a customer call, they are very excited about Linked Stacks. They can't wait for it to be released!"

- Product Manager

"Every time I have a customer call, they are very excited about Linked Stacks. They can't wait for it to be released!"

- Product Manager

"Every time I have a customer call, they are very excited about Linked Stacks. They can't wait for it to be released!"

- Product Manager

"Every time I have a customer call, they are very excited about Linked Stacks. They can't wait for it to be released!"

- Product Manager

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