Alice Shen's Porfolio

Desktop App

Desktop App

Mobile App

Mobile App

Background

Curajoy is a mental health app with gamification and AI to help people keep track and improve their mental health in a fun way. I became part of the Curajoy startup alongside four additional designers in February. All of us embarked on this journey simultaneously, without any guidance from experienced design peers. When introduced to the project, we were confronted with an underused design system, a lack of clear guidelines, and inconsistent design elements. This case study illustrates how I led the design team to craft an updated design system for the organization.

Laying the Foundations

Laying the
Foundations

We effectively persuaded the key stakeholder to revamp the design system. Every single element underwent a critical assessment to determine its contribution to the overall product brand. Our journey began by assessing the brand's font and colors, and proceeded with checks on accessible color combinations. We inputed local variables and text styles to easily select design elements with ease.

The Importance of Building Blocks

The Importance of
Building Blocks

In crafting components, we utilized the Atomic Design Methodology principles. This approach not only streamlines the creation of components but is also effective when developing intricate UI cards and eventually templates. We started off by establishing the icons library along with determining icon colors

Icons

Setting up the base of elements to incorporate them into larger constituents

Components

Every element is meticulously planned with the designer in mind. Effortlessly connected with booleans and instances, each within unique variants.

Templates

We can construct intricate UI cards and templates effortlessly from components. The design system is readily understood by designers, who can pick from our asset library to quickly produce what they need.

As seen in the image below, we were able to create notifications template out of smaller components.

Communication

Simply having a collection of elements doesn't make a design system successful. Adequate context is required to make it beneficial for internal users. My goal was to explain the motives behind my design choices during discussions with the leadership team, and demonstrate behaviors, interactions, and assorted states in handing off to developers.

I created weekly updates in Figma for everyone to see as visual updates. I wanted to provide the necessary context around designs, without creating yet another document that people dread to read.

Results

In under 2 months, 3 of us designers completely revamped the design system. As new designers onboarded, we created walkthroughs and visual context of how to utilize the design system. The design system played a key role in creating a cohesive product.

The design system will ever evolving as the product is being developed. However, having a design framework was important to helping launch the first live beta version.

aliceshen32@gmail.com

aliceshen32@gmail.com