Holori logo
UX Design

Cloud Diagramming & Cost Estimation software

For this Ironhack project we worked with a real client, a french startup based in Toulouse named Holori. The challenge was to design a brand new cloud management and diagramming tool for Holori. Our app provides, basically, the pieces necessary for you to build that service, easily and intuitively.

What is cloud architecture?

Project insights

Competitive Analysis

We realized that, among our competition, they offered many services that we lacked, such as collaborative tools, templates, a dark mode, and informational resources. But, we saw an opportunity in the lack of cost management options in some of the software. Some didn’t allow for multiple cloud providers, which means using pieces from Amazon, some from Google, etc.

Competitive Analysis overview


We did a survey that contained questions revolving around people’s usage of multiple clouds and if they saw it useful. 40% of people used hybrid or multi-cloud options. When asked if they would like an app that included diagramming and multi-cloud options, most people responded yes. Then, we asked what features they wanted about their current software, and the ones to the right were the most popular.

We also interviewed people in the cloud architecture industry. We asked them about their current issues with the diagram software they use and the value of cost estimation and multi-cloud diagramming. Despite differing demands and insights, there were many things in common: people valued practicality over design, and they wanted an app that was easy to use that they didn’t have to spend a lot of time on. They wanted some auto-layout and the ability to make diagrams from their code. Multi-cloud opinions were mixed, but we could offer that and more.

User Persona

We took all these insights into account when making the User persona. We came up with someone with the desires and complaints that the average interviewee/survey taker had, such as prototyping and diagrams quickly, making diagrams out of code, and making rapid decision-making for what service provider to use. He’d be bothered by the lack of exporting/importing options and not being able to collab like he’d like to.

Streamer proto-persona

User Journey Map

The User Journey map showcases our primary persona receiving a new project from one of his clients. According to the Journey, he’d prefer to make his diagram from code, which opens up an opportunity for us to implement a “deploy” feature. He finds navigating through the software confusing, as he cannot find the icons. After receiving insight from his team/client, he needs to make changes to the diagram and finds the process of going back and forth tedious, plus the modifications to the chart could be simplified by using an Auto-Layout; on top of this; he has no proper way to collaborate with teammates. Due to him not having rapid access to multi-cloud and price management, he delivers a faulty product before the deadline, leaving him unsatisfied. Our job with our product is to make his life easier by making the process quick, easy to use, and satisfying.

Streamer User Journey MapViewer User Journey Map

Problem Statement

The Problem Statement outlines how a lack of particular features in Holori makes the competition more attractive. We understood that rapid diagramming, re-arrangement tools, and accurate cost estimation tools were necessary.

Hypothesis Statement

So, by combining the pre-existing features and the new ones we've designed, Holori wishes to implement, we’re aiming to deliver a product that meets both industry standards and offers services that the competition doesn’t.

Problem Statement overview
Hypothesis Statement overview

Style Guide

By comparing all the similar products out there and matching Holori's desires and needings, we designed a Style Guide with the colors and typography best matching Holori's new tool.

Style Guide assets


Brand new diagramming tool!

The mid-fi allowed us to see the major issues in our first prototype iterations. But luckily, overall, this design was here to stay!

Quickly build your diagram!

Create your project. Drag & Drop quickly the items you want. Check their details and arrange your diagram for it to be the best.

Estimate and Share as you always wanted!

Check the cost estimation of your diagram depending on the cloud provider you choose: Azure, GCP, AWS, or as a multi-cloud diagram. You will also be able to export and edit your diagram as code!

No items found.

Other projects