DESIGN SYSTEM

Joie Design System

Project Background

In this case study - I’ll share my experience around designing Joie’s first design system. I started this project in January and ended my time with Joie in July of this year. The system was created using Figma.

Joie had no design system prior to me starting with the company. They were also in the middle of a website redesign that was going to evolve the brand with a new look and feel and combine multiple websites into one, unified site. An outside agency was brought on to redesign the site and when I began my work with Joie, the agency was wrapped up with their work. As I evaluated what the output was, I immediately saw many red flags and concerns, knowing development was about to begin.

My Role: UX Researcher & Designer

Goals

  • Speed up the design/development process by having a library of components for our creative team to design and test layouts quicker.

  • Drive brand consistency and gain alignment with all members of the brand team.

  • Improve user trust through consistent experiences that work for everyone and allow users to accomplish their goals.

  • Ensure accessibility of our site by building accessibility into our component libraries.

Time Commitment

While this was one of the very first projects I wanted to tackle when joining the team, this project coincided with my work with the website redesign. Please note that due to the amount of work I was juggling, the design system is still in its infancy stage and will be updated.

Starting the project

Research

I worked with a fellow designer to start building a design system during my time at Vera Bradley and I’ve been fortunate enough to have contributed to Amor, Signet Jewelers’ design system. I know the importance of having a design system for teams and companies to use. But creating one from scratch, on my own, was a little new to me. So as every designer does before starting a project, we research.

I dug into Material (Google), Polaris (Shopify), Base (Uber) and others that were smaller companies. I read articles and reviewed guidelines. I knew I wasn’t going to be able to get in super deep right away and what I ultimately needed to start with was a basic UI kit with some foundational settings mixed in.

Design Systems

As I mentioned, an outside agency had already created a basic UI kit for their rendition of the website. When I started reviewing their work, a lot of accessibility issues were seen. From size of text to the primary and secondary buttons not meeting WCAG AA compliancy. Most of their work had to be redone because of that.

Inventory

Building the system in Figma

Building Components

I used variants to create advanced components with custom properties and values. Using variants allowed designers to quickly use different content modules on product pages.

I used auto layouts in most of my interactive components (buttons, input fields, product cards, etc) to be as responsive as possible.

Accessibility was a must, especially when it came to contrast and readability. I used the Stark Figma plugin throughout the components to make sure we were WCAG AA compliant.

Components delivered for first round

  • 1280, 12 column grid + 335, 4 column grid

  • Typescale

  • Colour palettes: primary, secondary, tertiary, neutrals and feedback

  • Buttons: primary, secondary and text links

  • Messaging (success, error, warning, information, item removed, out of stock)

  • Icons

  • Header / Footer

  • Accordions,

  • Form Elements: input fields, dropdown, radio buttons, checkboxes

  • Product Specific: product cards, product tags, image galleries, filters

  • Content Modules: car fit component, marketing content components

Larger screenshot of some components delivered

Future Iterations

Documentation

  • Focus on a better naming convention.

  • Add clear guidelines and documentation to share with those using the design system, in something like Zeroheight or even Notion.