Case Study · Within3 Design System

Established an original design system from inception, and following an in-depth assessment that revealed significant flaws in the initial rollout, spearheaded the development of a next-generation version built for AI integration

user experienceai

TL;DR: — An ongoing project throughout my time at Within3, the Within3 Design System (W3DS) was a passion project and a fantastic learning experience in how design systems are built from the ground up. Version 2.0 was completed in 2026, while the first design system was put into place around 2022.

01. Gallery

my, what organized components you have

02. Background

there's a lot of growth here

Before joining Within3, projects were worked on in Adobe Illustrator and Photoshop. One of my first recommendations when joining the team was the use of Figma. I had used Figma and a company design system in a previous job, and quickly wanted to mimic that experience. Building and working on a design system was one of my favorite go-to projects, because it helped align the designers in reusing components to help create a unified product suite.

The first iteration of the Within3 Design System (W3DS) came when one of the Within3 products, Group Engagement Application, got its first redesign in over 12 years. This new look made it more modern, more accessible, and gave us the opportunity to grow our UI skills. This Design System 1.0 was pretty rough, as I was discovering the ins and outs of how to set up a design system and how detailed I wanted this design system to be. A big learning experience was that with W3DS v1.0, I had made components at the "organism" and "template" sizes of the Atomic Design methodology, instead of focusing only on "atoms" and "molecules." I found other designers, and myself, constantly detaching the components to work on them, which defeats the purpose.

Version 2.0 of the W3DS was a major upgrade that focused on the smaller elements and was available for the designers to build what they needed without having to detach anything.

Besides W3DS, which was used for the front-facing product design, there were also mini internal design systems for internal dashboards and management interfaces, as well as a system for logos and branded elements, before that was absorbed into the W3DS.

03. Components

yeah i really did list them all out

Typography

20 styles/3 weights

DONE

Color Palettes

9 Neutrals/19 colors/8 status

DONE

Effects

4 boxshadows/1 blur

DONE

Accordian

DONE

Avatar

DONE

Banner

DONE

Breadscrumb

DONE

Buttons

DONE

Calendar

DONE

Card

DONE

Charts/Graphs

DONE

Checkbox

DONE

Dividers

DONE

Dropdown/Drawer

DONE

Errors

DONE

Filters

DONE

Inputs

DONE

Icons

218 Icons & Icon Variants

DONE

List

DONE

Loader

DONE

Logo

DONE

Modal

DONE

Navigation

DONE

Note

DONE

Notification

DONE

Pagination

DONE

Pills/Bubbles

DONE

Progress

DONE

Radio Buttons

DONE

Search

DONE

Switch

DONE

Sliders

DONE

Snackbar

DONE

Stepper

DONE

Table

DONE

Tabs

DONE

Toggle

DONE

Text

DONE

Tooltip

DONE

04. Reflections

it's like owning a home, always something to do

Upkeep

  • Once the initial design system was in place, it was hard to get time for developers to change any components around. Most of the updates were made when a new/updated component was actively in the ticket they were working on
  • Adding new components was roughly the same, only added in when the component was being used
  • Icons seemed to have the most trouble, with developers asking me if it's already in the system, which was a big oversight

Lookback

  • A matching developer system - while there was a component library for engineers in place, there was unforunately no way for me or any other designer to access it or make modifications. A joint collaboration was planned around 2023, however the project was scrapped due to funding/layoffs. I would have loved to create a working library for engineers and to make sure we were aligned in naming preferences, styles, sizing, color changes, etc. There was a lot of opportunity there.
  • There was no set update schedule to the design system. I've seen design system updates fall in line with releases, however due to the minimal amount of people using the design system and how little it was updated, this idea fell off.


< Go Back