If you’d like to learn more about this project, please reach out.

Overview

Design

Results

Overview

Design

Results

Aesop Design System

Fable, 2022

Crafting a bespoke design system for a motion design platform

Aesop Design System

(About)

The Aesop Design System is a comprehensive library of styles, UI components and UX guidelines that comprises Fable's intricate and user-friendly motion design platform.

Prior to the creation of Aesop, the entirety of Fable's interface was built using the Material Design library. Given the growing complexity and specificity of the tool, it became increasingly hard to both use and manage, resulting in lots of bugs, design inconsistencies, and a non-ideal experience for Fable's users.

As the lead designer on this project, I identified the necessity for creating a system geared specifically to Fable's unique needs and was responsible for the entire design effort. Championing it from strategy to launch, I worked closely with 4 engineers to build out every aspect of the system, ensuring alignment with Fable's brand, engineering, and functional requirements. After the initial rollout I continued to contribute code and maintain the library for the duration of my tenure at Fable.

(Role)

UX/UI design
Front-end development

Prototyping
Documentation

Design highlights

An overview of UI components and UX guidelines for Aesop styles and components.

An overview of UI components and UX guidelines for Aesop styles and components.

Atoms and components are built with every conceivable state of interaction in order to facilitate the design process and make it easy for anyone in the org to iterate quickly.

Atoms and components are built with every conceivable state of interaction in order to facilitate the design process and make it easy for anyone in the org to iterate quickly.

For components requiring nuanced interactions, I created comprehensive UX guidelines. This ensured thorough implementation and facilitated seamless collaboration with engineering.

For components requiring nuanced interactions, I created comprehensive UX guidelines. This ensured thorough implementation and facilitated seamless collaboration with engineering.

(Outcome)

Designing and implementing the Aesop Design System allowed us to lay a robust and scalable foundation that greatly improved the product building experience internally, as well as established the look and feel of what the platform is today.


"As a front-end developer, a lot of my job fulfillment relates to working with good designers. When I first saw the in-progress designs Alisa was producing for the Aesop Design System, I knew Fable was the place for me.

Working on the project with Alisa, I witnessed a level of intention and systems thinking that I had not seen in any designer before. Not only was the scope of the project huge, but the designs were intricate and they worked. It was nearly impossible to find a corner that she had overlooked. And then she was willing to jump in the code with us and support its creation.

Of course, every other project I worked on with Alisa was the exact same. She raised the bar for what I can expect from designers and their relationship with the engineering team."
— Steven Frieson, Lead Software Engineer

Next project —

Review Mode

Review Mode