Creating Konstellation’s AI Design System from Scratch
The challenge. The ask.
The Konstellation founding team reached out to me to help create the brand and interfaces for Artificial Intelligence products. We signed a long-term collaboration where I worked part-time with the management team, engineers, and Data Scientists.
I began working alongside Jonas Da Cruz, who invited me to intervene in the early stages of the product. Working with Jonas was a valuable experience. He consistently provided clear direction throughout the entire project.
We had two goals: one for the brand, and one for the interface.
Develop a memorable, straightforward brand that evokes major milestones in space exploration.
Design a stunning, user-friendly interface.
Our challenge was to achieve the highest level of design according to Maslow’s hierarchy and make the user perceive aesthetics, novelty, and usability simultaneously.
Burningout MIRO for Diagramming
During the pandemic, MIRO played a crucial role in keeping us connected despite our isolation.
To begin, we analyzed the reason behind Konstellation’s product creation. It was concluded that the products were created to meet the needs of AI and Data Science professionals.
Next, we conducted research to understand how users would interact with Konstellation’s brand and products. This involved identifying their real needs, their perception of Konstellation, the existing solutions available in the market, and the best practices they followed in their daily lives. To gather this information, we interviewed Konstellation’s Data Scientists in detail.
Afterwards, we created low-fidelity prototypes for the design. We decided to follow two different approaches for the interface:
Take a risk and create a new language and build its own Design System.
After iterating and testing both approaches with users.
We decided to create a Hybrid Design System solution.
First, we defined the brand by creating a moodboard based on Jonas’ ideas about the brand, positioning, and value proposition. We decided to be literal and show Konstellation as what the signifier indicates: a constellation in the shape of a K.
Blue = Technology.
Black = Deep Space.
Warm orange = Sun & Stars Light.
Realistic Animated Logo
The backgrounds connect points with lines that represent the visual form of the RL and DL AI algorithms that are at the core of Konstellation.
The colors we selected have a semiotics of blue = associated with galaxies and technology; black = deep space; warm orange = the sun and stars. The typography has shapes reminiscent of NASA typography and cult films like ALIEN.
Wireframing with engineering team
The project will use React for development, and the front and back development team is very experienced. You can view their profiles on GitHub. We can also use data visualization libraries like D3 and customize them to our requirements, or create our own from scratch. We have the flexibility to experiment with wireframes and create innovative interaction patterns.
Scalable hybrid design system
I developed a Design System for Konstellation that prioritizes scalability and high performance. To emphasize the key parts of the interface, I utilized Glow effects with blur for contrast. We ultimately selected Sketch as our interface design tool and Invision for team communication.
This was the most complex and enjoyable part. We worked as a team to determine which information patterns and libraries we would use to display the graphics. We relied heavily on D3.js, and I designed with simplification in mind so that the development team could ultimately develop these graphics with minimal use of D3.js as an external library.
- Tree charts
- Radar chart (Galaxy Knowledge chart)
- Real-time area charts
- Node charts
- Confusion matrix
- Adaptive bar charts
- Ad hoc markdown
- Log Console
- Linear processes chart
It was difficult to find subjects to test the product and hypotheses of concept and design. So we decided to use stakeholders and Data Scientists who would be involved in future phases of the project. I conducted several qualitative MUT sessions with them, looking to identify pains and gains and solve them before starting development.
At the end of the project, when the foundations of the design system were built, the front-end team was free to continue and launched a quantitative test to measure the SUS at certain points in the product and the global NPS to know perceived satisfaction.
It was an honor to share the project with the entire Konstellation team; they are great professionals and even better people 🖤.