Aternity Design System

The Aternity Design System is a comprehensive collection of guidelines, components, and tools that ensure consistency and efficiency in product design and development. It includes reusable UI components, design tokens, design patterns, CSS code snippets, interaction guidelines, and downloadable design assets.

Process and Deliverables

Design Tokens.
UI Components.
Design Patterns.
Interaction Guidelines.
Front-End HTML&CSS.

Preparing the Design System

In preparing the Aternity Design System, I based my approach on Atomic Design Methodology. I started with the basic building blocks, such as buttons, input fields, and labels. From there, I created elements that function together, like a search form (input field + button). I then developed more complex components, such as a navigation bar and groups of elements that form distinct sections of the interface, and page-level objects that place components into a layout, showing the structure and arrangement of the interface.

To determine which components to develop next, I conducted an inventory of existing components and reviewed future product wireframes. By comparing these inventories, syncing with product teams, and prioritizing components based on the needs of high-priority new features, I was able to create templates of pages with real content, representing the final product.

Challenges

Dashboards

Aternity’s product is built on numerous Tableau dashboards. The primary goal in developing the Aternity design system was to seamlessly integrate Tableau’s UI with Aternity’s UI. Before I joined Aternity, its dashboard had numerous different and unrelated colors. Another challenge was to find a single color for standard bars and charts, with each bar having 2 or 3 tints to represent different measurements, such as application crashes, browser crashes, and HTTP errors.

Solution

To prevent the overuse of color palettes, I have decided to select a primary color for all bars and charts, using various tints to distinguish between measurements. This primary color should not resemble the hues used for links and buttons, nor should it resemble the green used for score indicators. It needs to be bright, strong, and of medium saturation, positioned between blue and green on the color spectrum. Additionally, the bar color should be balanced—not too prominent, yet not too washy. Accordingly, for the primary dashboard color, I have searched for several colors for pie charts that maintain the same saturation and brightness.

Fonts, Colors and UI Elements

The main challenge was to integrate three different design systems — Riverbed, Aternity, and Tableau—into one cohesive system.

Solution

The UI elements in Tableau, such as fonts, fields, and buttons, are small and lack rounded corners. To address this, I initially worked on fields and buttons, reducing the font size and standardizing it across the Aternity product. Additionally, there are UX considerations such as optimizing filter behavior. I also combined the Riverbed colors with Aternity’s primary blue, which I founded for buttons, links and tabs, to create a color palette for score and alert colors.

Creating Components Checklist

Spacing: paddings, margins, and auto-layout.
Designing necessary states and checking accessibility
Adding and cross-checking metadata, naming, and taxonomy.
Writing component descriptions and use cases.
Outlining component anatomy, structure, and grid information.
Describing responsive design and screen size implications.
Showing edge cases and empty states.

Approach

Building a Design System involves treating it as a dedicated product with its own team and development cycle.

Scope Definition

I began by clarifying the system’s purpose, audience, and timeline. Through stakeholder interviews with developers, product owners, and leadership, we gathered insights on company-wide and product team expectations for the design system.

Cross-Team Dependencies & Collaboration

In developing the Design System, we faced timeline mismatches initially. To resolve this, we aligned and consolidated roadmaps, enabling the platform to launch an MVP using the Design System within six weeks. We maintained ongoing dialogue with the product team, beginning with wireframe reviews to identify and prioritize components. Our approach evolved from sequential handoffs to delivering components as they were completed, fostering early testing and improving collaboration.

Achievements

Established a distinctive design language that embodies our brand essence, recognized by customers as a unique selling proposition.
Built a scalable foundation for launching new features.
Reduced UI design time, redirecting resources to user research and usability testing.
Expedited the MVP launch for the product team, surpassing initial schedule expectations.