BEFORE
AFTER
Building A Design System From Scratch
How I simplified an inconsistent component library into a scalable system that designers and developers could actually rely on.
Problem
How do I create a design system that's simple, scalable, and understandable by both designers and developers?
WHERE THINGS STOOD
The FieldEdge mobile app had no formal design system. Components and styles from Mobile 1.0 were inconsistent; typography in particular had accumulated far too many font variations, with no shared rules for corner radius or button styles across the app.
WHY NOW
With Mobile 2.0 underway, the senior designer and I planned to establish a real design system before new screens were built on top of the same inconsistencies, simplifying typography, unifying components, and applying current best practices.
Solution
Four improvements
Highlight 01
Text fields and dropdowns
Before, for mobile 1.0, an active field and dropdown used a muted, grayed-out styling which made the active field feel disabled, while the actual disabled field and dropdown, had a white styling, which made it feel active. Also once tapping into an active field to type, the field would turn white. Which felt contradicting to the disabled state. There was no way to tell at a glance whether something was interactive.
The redesigned system gives each state (default, in-focus, filled, disabled, and error) its own clear, distinct treatment, using best practices, so that the interactivity is obvious without needing to tap and find out.
Default
Active
Filled
Disabled
BEFORE
AFTER
Highlight 02
Buttons
Buttons across the app used to come in inconsistent sizes and styles. There were primary, secondary, tertiary buttons, square buttons, and other buttons of other colors, that had no rules of when to use them.
The new system defines three consistent tiers: Primary, Secondary, and Tertiary, each with active/inactive states and icon/no-icon variants. I added documentation on when to use these buttons, so every button in the product now follows the same rules.
BEFORE
AFTER
Highlight 03
Signature icons
Before, mobile 1.0 didn't have any visual cue for an empty-state screen. So for mobile 2.0, I designed a custom set of empty-state icons (No Photos, No Equipment, No Forms, No History, No Assignments, No Timesheet), each paired with its own soft, colored background. Something to make them instantly recognizable and consistent wherever or whenever they show up in the product.
Highlight 04
Cards, pop-ups & drawers
Cards, pop-ups, and drawers all follow the same corner radius, spacing, and button placement rules, so whether it's a small confirmation pop-up or a full preview drawer (like the one now used on the Mobile 2.0 homepage), every container feels like it belongs to the same system.
