Monorail Design System & App Redesign

Product Manager Case Study

problem statement

Monorail’s rapidly evolving app suffered from inconsistent UI, slow engineering handoffs, and growing design debt. The team needed a Flutter-ready, token-based design system that standardized foundations, accelerated development, preserved usability, and scaled across features, platforms, and future growth without repeated redesigns or fragile one-off styling decisions.

Objectives

  • Standardize UI foundations to reduce inconsistency and design debt
  • Improve collaboration between design and engineering through shared systems
  • Enable scalable product growth without repeated visual rework

Goals

  • Deliver a Flutter-ready design system engineers can implement directly
  • Enforce spacing, color, and typography through tokens and variables
  • Rebuild existing screens using consistent, reusable components

my process

From Complexity to Clarity

Define Foundations

Audited existing UI patterns, identified inconsistencies, and aligned on foundational rules before designing components.

Systemize Components

Designed token-driven components mapped to real engineering constraints for consistency and implementation speed.

Rebuild Experience

Reconstructed all screens using the system, improving usability, clarity, and visual cohesion across the product.

Primary Product Users

The primary users of the design system were Monorail’s internal product, design, and engineering teams responsible for shipping and maintaining the app.


Designers needed a system that reduced manual decisions and enforced consistency automatically. Engineers needed components that translated cleanly into Flutter without interpretation gaps or one-off styling.



Ultimately, end users benefited through a more polished, consistent, and trustworthy product experience as the system scaled.

Qualitative Research & Ideation

We audited screens, reviewed precedents, whiteboarded patterns, collaborated with engineers, and iterated components to balance usability, scalability, and Flutter implementation constraints.

Key Observations

  1. UI inconsistencies across screens increased cognitive load for users and slowed design and engineering workflows.
  2. One-off styling and ad hoc components made engineering handoff inefficient and error-prone.
  3. Manual light and dark mode overrides frequently broke visual consistency.
  4. Rebuilding similar screens repeatedly created unnecessary design and maintenance overhead.

Inferences

  1. Token-based foundations reduce both design debt and long-term maintenance costs.
  2. Systemized components improve engineering velocity and reduce implementation ambiguity.
  3. Theme-driven light and dark modes scale more reliably than manual overrides.
  4. Reusable patterns enable faster feature development without sacrificing UX quality.

user needs

Defining User Needs

System Consistency

Teams needed consistent spacing, typography, and components enforced automatically across all screens

Engineering Clarity

Engineers required clear component variants and token mappings that translated directly into Flutter code

Design Efficiency

Designers needed faster workflows without repeatedly redefining styles or rebuilding similar components

Scalability Confidence

The system had to support future features without increasing maintenance or design debt

Features & Functionalities Addressing User Needs

The system translated product needs into scalable, engineer-ready foundations that reduced friction and accelerated delivery

Token System

Centralized color, spacing, typography, and radius tokens ensured consistent UI updates across the product without manual redesign work

Light/Dark Modes

Theme tokens enabled seamless light and dark mode switching at the artboard level with zero component overrides

Component Library

Reusable buttons, cards, layouts, and controls replaced one-off screens with scalable, composable building blocks

Flutter Mapping

Component variants and states were structured to mirror Flutter logic, reducing translation errors and implementation time

Screen Rebuilds

All existing and new screens were rebuilt using the system, eliminating legacy inconsistencies and improving visual hierarchy

UX Refinements

Spacing, alignment, and hierarchy improvements enhanced readability, reduced cognitive load, and improved overall usability

Components

High Fidelity Screens

The user's home screen just after creating an account

Portfolios home screen. The user has not yet activated a portfolio.

Home screen after the usr has activated a portfolio and bought some stocks

Stocks home screen. The user has not yet created a trading account.

The user has created a trading account

Individual stock screen

outcome

The redesigned system enabled faster development, higher UI consistency, and lower design debt while supporting ongoing growth. In parallel, Monorail’s Investment Analyzer became a powerful lead magnet, attracting thousands of new users in 2025. Together, these foundations strengthened product value and supported Monorail’s profitable acquisition goal.

Let’s talk about your project

Fill in the form or call to set up a meeting at  (315) 530-5269 or email me at gregorylifanov@gmail.com