Ory Console

Type

  • Product design
  • Design System

Role

  • UX / UI

Timeframe

  • v2 · Jan – Mar 2023
  • v3 · Jun – Oct 2026

Company

  • Ory

Ory Console

How I helped evolve the Ory Console from v2 in 2023 to the v3 release, with a single design system built on shadcn/ui, a mobile-friendly layout, simpler flows and a clearer navigation structure.

Ory Console

00 · Summary

Challenge

Ory gives developers open-source building blocks for identity: authentication, OAuth2 and OpenID Connect, and fine-grained permissions. The Ory Console is where teams set up and run all of it. I joined Ory in 2023 to design the second version of the Console. Three years later, version 3 is live, with one design system behind every Ory product team.

Each development team at Ory was building UI in its own way, and the Console reflected it. The goals for v3 were to create a single design system for every team, a Console that is device agnostic, and simpler UX flows that are consistent and recognizable.

Outcome

Ory Console v3: a refreshed UI and layout built on shadcn/ui, a mobile-friendly console, simplified UX flows and patterns, a clearer navigation structure, and a single design system shared by all development teams.

Impact

One design system

Shared by 4 development teams

Mobile ready

100% of console screens responsive

Simpler flows

No more than 3 steps to complete complex flows

Credits

Ricardo Osório dos Santos, John Curran

Product design, UX / UI

Milosz Szekiel, Michelle Sagnelli, Ola Gruchala

Frontend Development

01 · Context

Where it started

The first Console was built to get the Ory Network off the ground back in 2019. It did its job, but it grew feature by feature, often neglecting existing UX patterns or existing UI components. Its structure reflected how the backend was built, not how people work or needed.

The Console v2

I joined Ory to redesign their existing Console. With a user-centred approach, I developed user journeys with the map, run workshops to redefine the information architecture and a quick onboarding and jumped into Blender to create a set of visual assets that could be used within the product.

The pitfalls of v2

Version 2 moved the Console forward, but as Ory grew, so did the cracks. The design system was not being used across product teams. This led to a fragmented experience, especially when LLMs started using code components that were not unified.

02 · Approach

Defining the goals

Version 3 had five goals. The first was a single design system feeding every development team at Ory. On top of it, we wanted a refreshed UI and layout built on shadcn/ui, and a mobile-friendly Console so teams could check and act on things from anywhere. We also set out to simplify UX flows and patterns, so every task would work the same way across the Console, and to help LLMs generate consistent code and prototypes from the system.

System first, layout second

Together with the engineering teams, we agreed on the foundations that would shape the system. We adopted shadcn/ui as our UI library and customised it with our own tokens and components.

03 · Development

One design system for every team

Before v3, each development team had its own components and its own interpretation of the Ory UI. We brought them together into a single design system: tokens, typography, colour, spacing and components, documented in Figma and mirrored in code.

A Console for every screen

The new layout adapts from wide desktop screens down to mobile. Tables, forms and navigation were redesigned for small screens instead of just being shrunk.

Notification center

Console v3 also introduced a centralized notification center, powered by Sanity CMS. It lets marketing and product teams announce new features and product updates directly in the Console.

Rethinking the sitemap and navigation

Console v3 moved from a fixed horizontal navigation to a collapsible sidebar. It gives the product room to grow, keeps every section one click away, and adapts better to smaller screens.

Simpler flows, shared patterns

We reviewed the Console's key flows and cut steps wherever we could. Repeated tasks, such as creating, editing, confirming and deleting, now follow the same patterns across the product.

Onboarding and announcements

We've developed a notification system for both product teams and marketing with a sanity cms, whic allows them to update users with new features directly in the Console.

04 · Outcome

The baseline for Ory's future products

The design system now feeds every development team at Ory, so new features can be built quickly and consistently, with or without AI.

More case studies