Back to Portfolio

🎀 About the Project

Books is a financial management product for the real estate industry. It was acquired by SkySlope and had been in rebuild for nearly five years when I joined the team.

For a product with dense workflows and many repeated UI patterns, this made design work slower and harder to scale.

My Role

I led the component audit and created the first design system for Books.

My work included identifying repeated UI patterns, creating reusable Figma components, documenting usage and behavior, and publishing the system through Claude Design and Vercel.

0->1 Design System

0->1 Design System

Claude Design

Claude Design

Vibe Coding

Vibe Coding

My Role

I led the component audit and created the first design system for Books.

My work included identifying repeated UI patterns, creating reusable Figma components, documenting usage and behavior, and publishing the system through Claude Design and Vercel.

0->1 Design System

Claude Design

Vibe Coding

Responsive Design
Responsive Design
Responsive Design

😈 Unique Challenges

New to the complex product

Books is large, complex, and domain-heavy, so I could not rely on full product familiarity from the beginning.

Books is large, complex, and domain-heavy, so I could not rely on full product familiarity from the beginning.

Existing files were inconsistent

Many existing components were not built for reuse. Designers copied from old files, and rebuild prototype.

Many existing components were not built for reuse. Designers copied from old files, and rebuild prototype.

🧠 My Approach

One: studied the product

  • Spent one night deeply reviewing Books

  • Captured 100+ screenshots from the current product

Two: Analyze the data

  • Grouped similar UI patterns

  • Compared layout, behavior, states, and usage

  • Grouped similar UI patterns

  • Compared layout, behavior, states, and usage

Three: Identify needs

  • Identified patterns needed standardization

  • Turned findings into structures

  • Identified patterns needed standardization

  • Turned findings into structures

🥽 Pop-up Deep Dive

Existing Product Audit

I collected existing pop-ups from Books and compared how they were used across different workflows.

The audit helped me identify differences in modal size, content density, footer actions, button hierarchy, and interaction behavior.

Inconsistent structure
Inconsistent structure

Width, spacing, footer layout, and button hierarchy varied across screens.

Mixed use cases
Mixed use cases

Pop-ups supported editing, confirmation, payment, and disbursement flows.

Manual prototype effort
Manual prototype effort

Modal interactions often had to be rebuilt for stakeholder reviews.

Existing Product Audit

I collected existing pop-ups from Books and compared how they were used across different workflows.

The audit helped me identify differences in modal size, content density, footer actions, button hierarchy, and interaction behavior.

Inconsistent structure

Width, spacing, footer layout, and button hierarchy varied across screens.

Mixed use cases

Pop-ups supported editing, confirmation, payment, and disbursement flows.

Manual prototype effort

Modal interactions often had to be rebuilt for stakeholder reviews.

From Audit to Requirements

The component had to support lightweight confirmations, form-based dialogs, checkbox confirmations, and more complex workflow messages.

Flexible sizes
Flexible sizes

Support different content densities.

Clear action hierarchy
Clear action hierarchy

Define primary, secondary, and destructive actions.

Consistent structure
Consistent structure

Standardize header, body, footer, and close actions.

From Audit to Requirements

The component had to support lightweight confirmations, form-based dialogs, checkbox confirmations, and more complex workflow messages.

Flexible sizes

Support different content densities.

Clear action hierarchy

Define primary, secondary, and destructive actions.

Consistent structure

Standardize header, body, footer, and close actions.

Final Pop-up Component

I created a pop-up component system with reusable size variants, content patterns, footer rules, and interaction structures.

Final Pop-up Component

I created a pop-up component system with reusable size variants, content patterns, footer rules, and interaction structures.

🍬 Beyond pop-ups

Pop-ups were one part of the broader design system foundation. I also created reusable components for high-frequency Books workflows, including tables, dropdowns, pagination, checkboxes, radio buttons, toggles, pills, and tooltips.

These components formed a shared starting point for future product design work across Books.

🎆 What's Next

The foundation is in place, but a design system is never really finished.

I delivered more than a Figma component library. I created a shareable design system foundation across Figma, Claude Design, and Vercel, making reusable patterns easier to access, present, and scale.

I delivered more than a Figma component library. I created a shareable design system foundation across Figma, Claude Design, and Vercel, making reusable patterns easier to access, present, and scale.

© 2026, All Rights Reserved

© 2026, All Rights Reserved

© 2026, All Rights Reserved

Mia Meng

Mia Meng