Case study

Stellar Design System

With the rapid expansion of Plutora’s product suite—including modules like Release, Change, Deployment, and the newly introduced Value Stream Management—it became increasingly difficult to deliver a consistent and cohesive user experience. The growing complexity demanded a systematic approach to both designing and developing product experiences, while also accelerating feature delivery and minimizing design debt.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The information in this case study is my own and does not necessarily reflect the views of the company.

Overview

As the sole product designer at Plutora, I led the design and implementation of Stellar, a centralised design system built to unify and scale our enterprise software experience. Plutora is a leading Value Stream Management platform, serving customers with complex release management workflows. In 2018, I recognised the urgent need to overhaul our fragmented UI and UX, and initiated Stellar to drive clarity, efficiency, and cohesion across all product modules.

My role

By the end of Phase 1, I successfully delivered a comprehensive UI pattern library, fully compatible with our new React-based frontend framework. This library features a robust set of reusable components that can be composed to support a wide range of experiences—from straightforward interfaces to complex, enterprise-grade workflows.

Role: UX/UI Designer
Project Duration: 6 months
Tools Used: AxureRP, Sketch

Problem

Before Stellar, I faced multiple challenges as the only designer on a fast-moving product team:

  • UI patterns were inconsistent across different Plutora modules

  • Developers recreated components from scratch due to lack of shared assets

  • There was no source of truth for design decisions

  • Handoff was manual and error-prone, increasing delivery time and bugs

The design debt made scaling design and engineering work difficult, slowed down innovation, and caused usability friction for our users.

Business Goals

  • Create a unified visual and interaction language across all Plutora platforms

  • Increase design and engineering velocity through reusable components

  • Improve user confidence and reduce cognitive load via consistency

  • Establish a scalable foundation for new features and integrations

Approach

I structured the Stellar initiative around five key phases:

Discovery & Visual Audit

Define Design
Language

Component
Library

Governance & Adoption

Tracking and Maintanence

1. Discovery & Audit

  • I conducted a comprehensive audit across five product modules

  • Interviewed internal stakeholders (PMs, engineers, support team)

  • Logged over 140 unique UI inconsistencies

  • Benchmarked leading design systems like Shopify Polaris, IBM Carbon, and Airbnb DLS for inspiration

Sitemap & Page Layout Complexity Analysis

UI library

Usage stats

2. Foundation Definition

I crafted the foundational layer of Stellar, establishing our visual language:

  • Colors: A neutral base palette with semantic accents that met accessibility standards

  • Typography: Defined scale and hierarchy using a custom typeface, Plutora Sans

  • Spacing & Layout: 8px base grid for spatial consistency

  • Elevation & Motion: Designed soft shadows and motion guidelines for hierarchy and responsiveness

Colour palette

Typography

Iconography

Spacing & Layout

Elevation & Motion

3. Component System Development

I organised and built components using atomic principles:

  • Atoms: Buttons, form elements, icons…

  • Molecules: Field groups, filter bars…

  • Organisms: Dynamic tables, workflows, cards, sections…

  • Templates: Full-page modals, entity pages, calendar view…

  • Pages: Release grid, Release details, Environemnt details…

Every component was designed in Sketch, prototyped in AxureRP, and paired with Angular/Storybook implementation in collaboration with our frontend engineers.

Atoms

Molecules

Organisms

Templates

Pages

4. Governance & Adoption

I established scalable practices to ensure Stellar could grow with the product:

  • Created a Stellar Working Group (weekly reviews with engineering leads)

  • Built a full documentation hub on Zeroheight with usage guidelines and examples

  • Rolled out a contribution model: proposal templates, triage meetings, version control

  • Ran training sessions, set up design office hours, and maintained a dedicated support Slack channel

Challenges Faced

  • As a solo designer, balancing strategic work and hands-on component design was tough

  • Gaining initial buy-in required time, especially from engineering leads accustomed to older practices

  • Building documentation while designing took additional effort, but proved essential for onboarding

  • Early feedback loops revealed edge cases that pushed me to build components more flexibly

Future Roadmap

  • Expand component coverage to mobile and partner-facing portals

  • Integrate automated accessibility checks in CI/CD

  • Build a dashboard to track design system usage and adoption metrics

Lessons Learned

  • Start with people: Early alignment with engineering and PMs accelerated adoption

  • Document everything: Clear documentation turned Stellar into a self-serve resource

  • Prioritize flexibility: Avoid rigid component design; embrace extensibility from day one

  • Design is never done: Continuous iteration and governance keep the system healthy

Reflection

Building Stellar has been one of the most impactful initiatives of my design career. As the only designer at Plutora, I turned design fragmentation into design fluency. Stellar not only unified our product UI but established a culture of design quality and collaboration. As Plutora scales, Stellar will evolve to meet new demands while remaining a foundation of design excellence and enterprise agility.