Alation is a Series E data catalog company that pioneered the modern data catalog and is currently expanding into a comprehensive platform for data intelligence.

Alation is a Series E data catalog company that pioneered the modern data catalog and is currently expanding into a comprehensive platform for data intelligence.

Alation is a Series E data catalog company that pioneered the modern data catalog and is currently expanding into a comprehensive platform for data intelligence.

Year, Duration

Summer 2023 – 6 months

Role

Product Designer

Team

2 Product Designers

Product Manager

Engineers

Director

Skills

UI Design

Branding

Prototyping

About

This project was for Alation, a data catalog series-E company. Alation pioneered the modern data catalog and is now leading its evolution into a platform for data intelligence. Our task was to create a design system that could help modernize and refresh their application.

Target audience

Alation users & new potential clients

Project summary

By creating the building blocks of a design system, we gave Alation the tools to modernize their app and make it easier for users to navigate. On a small team of two product designers (including myself), we designed over 30 components and plugged them into a prototype for the client to envision how their refreshed app will look.

Design challenge

How can we create a scalable design system that simplifies navigation while improving accessibility across a complex, data-heavy application?

Deliverable

01. Design System

Designing for accessibility

Our goal was to create a design system that prioritized accessibility while giving users more autonomy through customizable theming and personalized settings. We focused on building a scalable framework with atom components , ensuring they were intuitive, flexible, and easy to use within a data-heavy application. By ensuring components worked within Alation's ecosystem, we provided them with a system that empowers users to move through the product with clarity and confidence.

Our goal was to create a design system that prioritized accessibility while giving users more autonomy through customizable theming and personalized settings. We focused on building a scalable framework with atom components , ensuring they were intuitive, flexible, and easy to use within a data-heavy application. By ensuring components worked within Alation's ecosystem, we provided them with a system that empowers users to move through the product with clarity and confidence.

Our goal was to create a design system that prioritized accessibility while giving users more autonomy through customizable theming and personalized settings. We focused on building a scalable framework with atom components , ensuring they were intuitive, flexible, and easy to use within a data-heavy application. By ensuring components worked within Alation's ecosystem, we provided them with a system that empowers users to move through the product with clarity and confidence.

Deliverable

02. Prototyped Application

We designed a comprehensive prototype to highlight how the redesigned application could look.

Deliverable

Handover file

Creating an easily navigable file

Creating an easily navigable file

Before packaging everything neatly, we made the entire file clickable so stakeholders could easily navigate components and access documentation. To ensure accessibility for all team members, we also included usage examples and a clear table of contents.


Before packaging everything neatly, we made the entire file clickable so stakeholders could easily navigate components and access documentation. To ensure accessibility for all team members, we also included usage examples and a clear table of contents.


Before packaging everything neatly, we made the entire file clickable so stakeholders could easily navigate components and access documentation. To ensure accessibility for all team members, we also included usage examples and a clear table of contents.


Learnings

Considering scalability

Considering scalability

From the start, we designed the system and app framework with scalability in mind. Our goal was to give the client a strong foundation that could easily grow over time, one that could support future personalization, expanded theming options, and additional features without requiring a full redesign.

From the start, we designed the system and app framework with scalability in mind. Our goal was to give the client a strong foundation that could easily grow over time, one that could support future personalization, expanded theming options, and additional features without requiring a full redesign.

From the start, we designed the system and app framework with scalability in mind. Our goal was to give the client a strong foundation that could easily grow over time, one that could support future personalization, expanded theming options, and additional features without requiring a full redesign.

Understanding the user

Understanding the user

We created a design system that revolved around what user we were designing for: one that would be filtering and navigating through data tables for several long hours of their work day. We prioritized creating a framework with high contrast and clear actions to help users perform their tasks with ease.

We created a design system that revolved around what user we were designing for: one that would be filtering and navigating through data tables for several long hours of their work day. We prioritized creating a framework with high contrast and clear actions to help users perform their tasks with ease.

We created a design system that revolved around what user we were designing for: one that would be filtering and navigating through data tables for several long hours of their work day. We prioritized creating a framework with high contrast and clear actions to help users perform their tasks with ease.