One North

Design System Completion

Case Study - 6 min read

My Role: Senior Product Designer

One North

Design System Completion

Case Study - 6 min read

My Role: Senior Product Designer

One North

Design System Upgrade

Case Study - 6 min read

My Role: Senior Product Designer

starting with a thank you!

I appreciate you taking the time to review this case study. I chose this example because I feel it demonstrates:


  • My ability to recognize and close process gaps

  • My ability to adapt to an unfamiliar role with unfamiliar limitations

  • My ability to produce high output on a tight deadline

Brief

March of 2026 brought a new opportunity with TEKsystems and their internal design agency, One North. A six month contract led me back to the eCommerce space to help a client complete a platform upgrade.


In that time, our team completed building the new iterations of their component & pattern libraries as well as a responsive set of page templates for the marketing team to use in tandem with their new CMS platform.

goal

Design System artifacts & documentation for new CMS platform:

  • UI components & patterns that adhere to existing branding, design system tokens, properties, and naming conventions

  • Page Templates built with new components & patterns with customizable sections for CMS authors to design future site content

  • Selectable visual themes to customize the look & feel of a page section for a company campaign or holiday

visual example of shoe with "hot spots"
Problem

One of my initial observations during my first official sprint of work was a lack of documented user acceptance criteria and story management. Buckets of work were represented as sticky notes on a Figma kanban board and requirements were verbally presented the first day of the sprint to the team but not documented. I decided to go with the flow and see how the existing process worked.


Unsurprisingly, the lack of UAC led to ambiguity which led to work having to be redone.

What Did I Do?

I decided to point out the churn from the lack of UAC and request the team try a more standard agile process, complete with documented UAC and more transparency on who is working on what ticket. Luckily, the team was willing to test out a more structured process and I’m happy to report it helped minimize rework and confusion moving forward.


This updated process empowered us to complete the 22 component & pattern library deliverables, as well as responsive CMS template files for a handful of marketing web pages.

visual example of shoe with "hot spots"
Problem

One of the more stimulating chunks of work done for this project was to support the client’s need to brand the marketing pages for a list of events and holidays. These events and holiday “themes” would also need to be easily selected by a CMS author with little to no Figma experience.

How do you architect a high level of page customization with the lowest level of effort possible?

What Did I Do?

Figma’s extended variable collections provided an elegant solution. By creating semantic color variables applied to a defined background, title, CTA, etc., I architected a systemic way of applying a color palette to the components & patterns for each campaign and holiday.


This made selecting a theme for the author as easy as setting light or dark mode.

visual example of shoe with "hot spots"

This strategy not only provided the client a manageable system for each campaign and holiday color palette. It also made it easier for the team to ensure WCAG accessibility for future versions of their marketing pages and content.

visual example of shoe with "hot spots"
The outcome

As mentioned, our team was able to deliver the assets needed for the client’s CMS platform upgrade ahead of schedule. We delivered a complete UI component & pattern library, set of page templates, and a new design token structure enabling the client’s team to create themed content.


Our team also helped set the standard for a more effective process, documentation, and a governance process for future enhancements to their design system.

reflection

Being on the agency side of the table for the first time into a 12 year career was certainly a learning experience. As designers, we’re trained and expected to take full ownership over our work. As design system designers, we know a design system is much more than a Figma library of components and patterns.


The biggest limitation of this work was being unable to collaborate or communicate with the engineering team. On top of that, the review process for the components I designed were owned by a different group of designers. I realize this was out of my control, but it still felt counterintuitive to the point that I felt like my own process was regressing.


After this six month endeavor, I’m still proud of what I built and am especially grateful that it provided an opportunity for me to expand my skillset and stay up to date with design system techniques.