Okta Launches Open-Source Design System Focused on Accessibility
Okta Launches Open-Source Odyssey Design System
Okta, a leading identity and access management provider, has unveiled its new design system. This system is intended for both internal branding and as a publicly available, open-source resource licensed under Apache 2.0.
The Odyssey Design System, as it’s officially named, shares similarities with established systems like Google’s Material Design and Microsoft’s Fluent Design. While it may not currently match their extensive feature sets, its defining characteristic is a strong commitment to accessibility.
Addressing Previous Limitations
Brian Hansen, Okta’s SVP of Design, explained that the company previously relied on a less structured “pattern library.” This proved effective for rapid UI development, but presented challenges when incorporating new design patterns.
Hansen stated that the previous system’s limitations often required designers to make compromises, adapting designs to fit existing constraints. This hindered the ability to create truly optimal user experiences.
Image Credits: OktaA System for All Users
With its growth beyond the startup phase, Okta recognized the need for a comprehensive design system. This system will soon be visible to many users through updates to Okta’s widely used sign-in widget.
However, it’s important to note that Okta’s platform also includes a range of backend tools for administrators. These users prioritize information density and efficiency in their user interface.
Hansen emphasized that developers represent a crucial user group. Beyond technical specifications, they require clear and easily understandable documentation, from a design standpoint.
Phased Implementation
A complete, immediate overhaul of all Okta interfaces with Odyssey was deemed impractical. Hansen acknowledged the need for a pragmatic approach, accepting that perfection cannot be achieved instantaneously.
The Okta brand and some user-facing services are receiving the initial refresh. A full transition across all Okta services will occur over a longer timeframe.
Bridging the Gap
For the admin console, a complete UI replacement was estimated to take several years. To expedite the process, the team implemented a “bridge strategy.”
This strategy involves creating stylesheets that emulate the Odyssey design, allowing for a seamless transition to native Odyssey components as they become available. Hansen stressed the importance of avoiding a fragmented user experience with disparate UI generations, as this would erode user trust.
Availability for Developers and Designers
Developers interested in utilizing Odyssey for their own projects can explore its components. Designers can also preview and experiment with the system within Figma.
- The system prioritizes accessibility, adhering to W3’s Web Content Accessibility Guidelines.
- It aims to provide a unified and consistent user experience across all Okta products.
- A phased rollout ensures a smooth transition without disrupting existing workflows.
