Creating Konstellation’s AI Design System from Scratch

How to create an intuitive interface for a complex product family?
Role
Designer, User Experience, Visual Designer, Motion Graphics
Services
Design System, Design Thinking, Information Design, UI, User Testing, UX, Workshop
Summary
How to build Konstellation's AI design system from scratch. The challenge was to create an intuitive interface for a complex product family that achieved the highest level of design according to Maslow's hierarchy. The document outlines the process of understanding the product, conducting research, wireframing, and developing a scalable hybrid design system. The team also worked on information design, including creating dendrograms, tree charts, and real-time area charts. Finally, the team conducted qualitative MUT sessions and quantitative tests to measure the success of the design system.

The challenge. The ask.

Context

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.

Understand.

Burningout MIRO for Diagramming

The Inception sessions were long and required intense focus. We spent many hours working with the management team to create diagrams on Miro, iterating from product architecture to designing prototypes, 2×2 matrix, MoSCow prioritization, until we established a clear information architecture.

During the pandemic, MIRO played a crucial role in keeping us connected despite our isolation.

Think.

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:

After iterating and testing both approaches with users.

Conclusion

We decided to create a Hybrid Design System solution.

Solve.

The identity

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.

Information design

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.

 

Designed:
  • Dendrograms
  • 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

Learn.

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 🖤.

 

Thank you, Jonas Da Cruz, for allowing me to help you build Konstellation.

The NPS and SUS scores were good. Mission Accomplished. 😎.

SUS

Design System

Design System Visual Summary

"

Motion Design

Vector animated interface elements

"

Video & Animation

3D animated and realistic logo

"

What more?

@ Under a Non-disclosure Agreement.

Some of the details in this case study may be kept secret to protect the client's intellectual property.