---

When I joined JEMA, one of my early focus items was updating the design system. The existing system was only moderately used. JEMA’ had expanded its product vision and it was time to implement a scalable design system that supported future growth.

---

It was time for an audit.

As I started this project, I interviewed all of the designers, product managers, front end engineers, and the head of engineering to understand the existing product design practices and how it has been implemented in the product. I learned from designers that they were inconsistent in how they used the design system. It sometimes simplified their work, but only in a few cases. There had also been turnover in the team leading to a more disjointed system. Product management wanted to product to look more modern and they wanted to simplify development. From engineering, I learned the design system wasn’t helpful to them. They didn’t have components matching design patterns or even a centralized set of colors, spacing and typefaces.

Design also didn’t have a handoff to development that supported the development process. Instead, engineers were building each design from scratch, leading to a number of tweaks that needed fixed in QA.

---

Setting the project goals.

• Create and prioritize list of identity styles and components.
• Work closely with engineering to setup the design system.
• Collaborate with other designers to use the new system.

---

Project Timeline

I needed to focus time to work with engineering to get the foundational design system in place for quick results. I broke the project up as follows:

• Phase 1, foundation: text, color, spacing, responsive layouts, background styles (2 weeks)
• Phase 2, component set 1: buttons, multi-select and text inputs, status bar, completion animation (1 month)
• Phase 3, component set 2: chat components and chat layout (1 month)
  • This set was released with the chat updates. We also moved the location of the chat assistant to increase user engagement.
• Phase 4, maintenance.

---

Foundation

I setup the design system in a new Figma library and started with the basics – text, color, spacing, background styles, core page layout and responsiveness. The background styles were prioritized for the first round because it is core to the unique styling for each “prism” or product area of JEMA.

Foundational Elements in the JEMA Design Library

---

Component Design

Our first set was determined by the components needed to release the Dimensions redesign, offering users space to uncover their strengths, struggle points, and ideal work environment. This release included a multi-select, text inputs, the button, and status bar. I used AI to generate ideas for button state styles and adapted my button component based on those ideas. The image below demonstrates the multi-select component, buttons, status bar, and an implementation of the background styles and header styles.

Dimensions page launched with new design using the design system

---

Ongoing Updates

Our design system is a living library and had grown as we continued to design new features. Current additions include the tags, swiping cards, scores, and more.

Additional Patterns

---

Result

The first pages were launched two months after we began. With the new design system and a centralized review of Figma files, the developers were able to build pages using code from Figma, speeding up development. Leadership called the product updates more professional and cutting edge.

---