Odyssey Design System

Expanding and maturing the capabilities and practices of Okta's enterprise design system team.

Context

Timeline

October 2023 - February 2025

Role

Staff Product Designer

Responsibilities

  • Strategy
  • Vision
  • System governance
  • Tooling
  • Component design
  • Component development
  • Evangelism

Okta launched v1.0 of their open source design system, Odyssey during my first week at the company. The system consisted of 30+ components with design, code and documentation, and the team was looking to mature and expand the capabilities and reach of the system.

Our team operated with an autonomy-first approach and I worked across design, development, and strategy to help scale governance, create new components, implement modern best practices in Figma, and develop tools and processes to help the design system team and our partners use the system.

Team: 2 Principal Product/Brand Designers, 1 Front-End Engineer, 1 Sr. Product Design Engineer, 1 Principal Design Engineer, 1 Principal Content Designer, 1 Principal Program Manager, 1 Sr. Design Director

Quick summary: I designed and developed 4 new components and made significant updates to ~50% of our Figma components during my time at Okta. I designed and built a Figma plugin for design linting and component migration that mapped 500+ component and styles from legacy design systems to Odyssey. I helped develop our contribution model and roadmap planning process. I also led the creation of our quarterly design system newsletter, which was sent to 1000+ Okta Platform employees and executive leadership.

Odyssey

Odyssey Figma plugin

In 2024, there was a major effort across dozens of Okta platform teams to migrate from two legacy design systems to Okta's latest design system, Odyssey. Engineers were able to leverage Codemods to assist with the migration work, but on the design side, it was a much more manual process. I was tasked with finding a way to reduce the complexity of migrating and to help make auditing components easier.

My solution was to design and build a Figma plugin to help automate some of this work. Over the course of a few days, I put together a prototype of the plugin, leveraging Anthropic's Claude AI to explore what was possible in Figma's API and to outline the basic feature code for the project. Leveraging the existing open source Odyssey design tokens and components, I quickly built a simple UI, which allowed me to focus on features and new capabilities. The plugin migrated 500+ legacy components and styles to their Odyssey equivalents and was in use by 5 internal teams as of January, 2025.

Migration features:

  • Maps 300+ components from Okta's two legacy design systems to their Odyssey equivalents.
  • Maps 200+ custom icons into a succinct set of 50 system icons.
  • Converts legacy type and color styles to Odyssey's Figma variables.
  • Enables designers to convert individual components or mass-migrate components (up to 200 at a time) with one click.
  • Marks and views all migratable legacy components on a page with one click.
  • Exports a detailed list of migration activity to CSV for future reference.
  • Exports variables and styles to formatted design token JSON files.

Linting features

  • Validates color contrast for WCAG 2.2 AA compliance.
  • Verifies source library to ensure a selected component uses Odyssey.
  • Displays component style and variable values in variable, pixel, and hex format (where applicable).
  • Identifies magic numbers and color values that are not using Odyssey variables.
  • Provides a linked list of all instances of the component for quick reference and discoverability.
Odyssey Plugin homepage
Figma plugin component mark legacy component workflow Figma plugin component replacement workflow

Odyssey Stepper component

I led design and development of a new Stepper component for Odyssey in Q4 2024. Our legacy systems had versions of vertical and horizontal steppers that were used by several teams, along with a partially implemented Odyssey stepper designed two years prior that never shipped. The objective was to pick up the project and redesign the component to match our current standards.

My goals:

  • Simplify and modernize the design to match the current visual direction of Odyssey.
  • Support both vertical and horizontal orientations.
  • Allow for interactivity when steps need to be actionable.
  • Ensure the component meets accessibility criteria (WCAG 2.2 AA color contrast, keyboard navigation, screen reader support).
  • Ensure the design works on both our light (white) and dark (gray) template surfaces.
  • Design the component in a way that it can be abstracted into a complex Wizard pattern in the future. This meant also building common utility sub-components like next/previous buttons, ensuring it can be paired with other visual progress indicators (such as our existing status bar component).

Research and explorations

I gathered internal and external examples from legacy libraries and a previous exploration that did not ship. The Stepper component was requested by two of our partner teams in a previous quarter, so I met with designers from those teams and used Slack to recruit four other designers who had a need for or had used a Stepper. I then kicked off the work with our design system team to align on goals and determine who I could partner with for design and code feedback.

Internal examples of Steppers in Okta's platform

Examples gathered from the team, which I used for my initial exploration.

Internal examples of Steppers in Okta's platform

In the initial exploration, I designed several variations inspired by our legacy design system's stepper and evaluated them against our current component criteria, accessibility standards, and system requirements.

Internal examples of Steppers in Okta's platform

Another example of testing various explorations against our requirements and scenarios. Beyond accessibility and capabilities, matching the existing system aesthetic and design quality bar were crucial factors for determining the final design.

Final designs and prototyping

My explorations went wide and deep, pulling from several previous explorations, aligning with conventions from popular products and frameworks, and exploring new configurations using our existing token system. For the final version, I prioritized simplicity, removing intricate design decisions used in previous versions, like dashed lines and bold selected and hover states.

In Figma, I created a Stepper and Step component for both the Vertical and Horizontal steppers. I wanted the API to be as simple and intuitive as possible, which included:

  • Orientation: Horizontal or Vertical
  • State: Active, Completed, or Disabled
  • Steps: The number of steps to show. I set this to 2-5 to align with usage guidelines I developed and what would reasonably fit in the UI.
  • Variant: Numeric, Non-numeric (for when order doesn't matter)

I also designed a simple stepper sub-component that would show Next and Previous buttons depending on the component state. Hover and focus states were also configurable at the Step level.

In code, I built a single Stepper component that could be configured to show as either vertical or horizontal. I built the component using the MUI Stepper as the base and tailored the styles, logic, and interactivity to meet our requirements.

Odyssey Stepper design

View of the final component showing Horizontal and Vertical versions of Numeric and Non-numeric and optional next/previous controls.

Odyssey Stepper design showing interactive states

Example showing the hover and focus states for the component.

Odyssey Newsletter

Overview

During our annual planning onsite in 2024, I pitched the idea of launching a quarterly newsletter to help increase awareness and adoption of Odyssey across the Okta platform. The newsletter would be a mix of system updates, new components, and features, and would also include a section for recognizing team contributions and achievements.

Process

I formed and led a team with a brand/product designer, program manager, and content designer to outline the project goals, define rituals, and set a cadence for the newsletter. We met weekly for several weeks in the middle of each quarter, set up a Slack channel, and created a template to outline and discuss content. I partnered with Alex Cohen, a designer on our team, to develop a visual language and a reusable template in Figma.

On the content front, we wanted to highlight recent and upcoming projects across design, content, and engineering as well as recognize the many teammates across EPD who were contributing to and implementing Odyssey in their products.

On the design side, newsletters were a common communication method at Okta, and we wanted to make something that stood out and was visually representative of the work our team was focused on. The challenge was that we were limited on which tools we could use to send mass emails due to strict internal security and vendor approval policies. Because of this, most other teams used Google Docs or an approved third-party tool that had very limited customization options.

I decided to get scrappy and looked for a workaround that would allow us to send a custom styled HTML file. After some trial and error, I found a way to inject HTML into Gmail's web interface with Chrome DevTools. It was a simple workaround that required only a few clicks and copy and paste of the HTML. I then built the template in HTML and CSS and trained a custom GPT on the parameters to simplify future template edits.

Impact

  • The newsletter was sent quarterly to 1000+ teammates across Okta platform's engineering, product, and design teams as well as executive leadership.
  • Opens and clicks were tracked with Google Analytics UTM tracking and images and averaged several hundred per issue.
  • Past newsletters were archived in GitHub and visible on Odyssey's website as well as our internal Confluence space.
  • The high-fidelity design of the newsletter was praised by Okta's VPs of Product and Design as well as other teams who wanted to learn how to create custom email templates.
Odyssey Newsletter scroll

More Okta visual design, strategy, and governance projects are available in my full Portfolio deck.

Next: Gusto's Workbench Design System | Home