Design System

WorkLLama set out to revamp their product UI with the goal of enhancing usability and visual appeal for business customers and end users—job candidates. I paired with a fellow, contract designer, Brad, to propose and rebuild a new design system for a suite of white-labeled products: Enterprise Portal, Candidate Portal, and Branded Career Sites.

First, I set out to understand the end user categories through customer interviews and market research for each primary vertical. The personas developed consisted of relevant data points, verbatim quotes from candidate forums and a sample UI component: the job card. The main differentiators across archetypes included job lifecycles, compensation models and motivations.

At the start of my engagement, the design team was using Adobe XD with a goal of transitioning to Figma. Establishing a new design system seemed like an opportune time to make the switch. The Figma implementation needed to compile a system of partials or extension files—since each library represented a level of inheritance. This ensured base components had a single source of truth consistent across products, and those that differed based on B2B vs. B2C products had unique components.

The Client Style Guide auto-generated the color palette and assets necessary to customize their theming. This was achieved by using Figma components embedded within a "Start here!" page that linked to pre-formatted placeholders in a separate page.

As components were designed for various products and channels, the team cataloged them in a single matrix to ensure consistency where possible. This allowed various designers owning a single product to collaborate and "compare notes" along the way.

‍

A team channel was created for sharing regular updates as the system evolved. Product managers, devs and designers were free to join and collaborate.