Flagsmith

Turning an Internal Tool into a Global Open-Source Product

Web Application

Redesigned Flagsmith's core navigation and UI, simplifying feature management, improving usability, and supporting the platform's evolution from an internal tool to a leading open-source product.

  • Role
  • Product Designer & UI Developer️
  • Year
  • 2020
  • Disciplines
  • UX Design, UI Design, Interaction Design, Frontend Development

Dashboard UI

About Flagsmith

Flagsmith (formerly Bullet Train) is an open-source feature flagging and remote configuration platform that helps teams manage feature rollouts, A/B testing, and dynamic app configurations. Originally built as an internal Solid State Group tool, it evolved into a fully fledged commercial SaaS business.

I led the redesign of the web app's navigation and contributed to refactoring the UI codebase. The goal was to simplify workflows, improve scalability, and support the company's transition from internal tool to successful open-source product.

The Problem

As Flagsmith grew, its original navigation system became increasingly difficult to scale and confusing for users.

Key issues identified:
  • Complexity and Clutter: The menu structure struggled to accommodate new features and overwhelmed users.
  • Inconsistency: Navigation patterns and visual hierarchy lacked consistency across sections.
  • Findability Challenges: Users couldn't easily locate projects or environments and terminology created additional friction.
Client Quote Image

It’s not immediately clear what’s a project vs. an environment. I spend more time finding things than configuring them.

User feedback / GitHub discussion thread

UX Design Whiteboard
01 / Discovery & Research

Research & Insights

Working with Flagsmith's founders and development team, I led a rapid discovery phase to understand user pain points and business needs.

Methods included:
  • User interviews and surveys with active open-source contributors and paying customers.
  • Behavioral analytics via FullStory to identify rage clicks, misclicks, and friction points.
  • Competitor benchmarking of other configuration platforms such as LaunchDarkly and ConfigCat.
A key insight from this research:

Users wanted more clarity, fewer clicks and a clearer hierarchy that would result in less cognitive load.

Design Goals

  • Improve findability of core features and navigation clarity.
  • Enable scalability for future feature growth.
  • Modernise the UI with consistent typography, color, and iconography.
  • Increase front-end efficiency through code modularisation.
UX Design Whiteboard

IA & Wireframes

I mapped the existing user flows and proposed a restructured IA centered around Projects and Environments as distinct, top-level entities.

Wireframes explored various sidebar patterns and content hierarchy approaches, validated through quick internal usability tests.
UX Design Whiteboard
02 / Design Exploration

Navigation Redesign

  • Introduced a persistent left sidebar for key navigation items.
  • Added collapsible menus to reduce clutter and allow scalable sub-navigation.
  • Integrated a global "Create" button for quick access to key actions such as adding flags or environments.
UX Design Whiteboard

Visual & Interaction Design

  • Established a refined UI system for typography, color tokens, and spacing variables.
  • Rebranded the old Bullet Train interface with the new Flagsmith visual identity. Introduced a more modern UI with improved hierarchy, contrast, and focus on clarity.
  • Improved contrast and legibility to meet accessibility standards while aligning with the new brand's visual tone.
03 / UI Implementation

UI Development & Code Refactoring

At Solid State Group, designers also implemented their work in production code alongside full-stack developers. I built out the redesigned interface in React, refactoring the CSS and component library to make the front-end more modular. This allowed full-stack engineers to focus on the core application logic and APIs, while ensuring design consistency across the product.
Dashboard UI

Testing & Validation

The new navigation was tested through: Internal user testing with existing customers and open-source contributors. Post-launch analytics (FullStory) to monitor navigation success rates and engagement. Continuous feedback loops via GitHub issues, leading to further refinements.
Dashboard UI
Client Quote Image

The redesign makes navigating Flagsmith so much faster! Everything feels exactly where it should be.

User feedback / GitHub discussion thread

Impact

The redesigned navigation and rebrand improved usability, scalability, and brand perception across the platform. Post-launch analytics and community engagement reflected strong positive outcomes:
  • 30%

    Faster task completion time as users more easily located and managed feature flags within the new navigation structure.

  • 20%

    Increase in feature adoption from improved visibility of environments and clearer project differentiation.

  • 5.3k

    Github stars, solidifying Flagsmith as one of the most popular open-source feature flagging tools in the world.

Client Quote Image

LOVE the new design. Great job. HIGH FIVES TEAM.

Ben Rometsch / Co-founder, Chairman of the Board @Flagsmith

Niall Quinn 2025