Mobile App

No additional headcount for the second product. Sharing at the component level was the only way to ship both. Sharing whole screens was ruled out, because each app needed its own story on the home surface.

Level Up Funding is lime on navy. MaxLend is rust and green. The same component had to render in both without a code branch per brand.

Origination customers look forward: what now? Account holders look back: how am I doing? The home screens had to honor that difference while everything beneath them stayed common.

When one app needed a component to change, the other could not inherit the change by accident. Per-app versioning was a requirement from the start, not an afterthought.

The library covers the primitives both apps are built from: navigation and header, buttons, status pills, account cards, payment rows, the progress donut, slider, calendar, modal, and the smaller list and toggle pieces. Each component carries a version, and each app pins the version it ships.

The home surface leads with the next step: re-borrow, payoff progress, the scheduled payment. History sits behind a secondary tab. Lime callouts mark the actions.

The home surface leads with the state of the loan: repayment progress, next payment date, total paid. Actions are one tap away and deliberately not first.

One status pill renders lime on navy in Level Up Funding and rust on green in MaxLend by reading its colors from the app's theme tokens. There is no Level Up pill and no MaxLend pill. One component, two themes.

Both apps carry a four-item bottom navigation: Home, Payments, Documents, More. The contents differ; the shape does not. A customer who meets both products learns the layout once.

Before any primitives, wrote down the customer's job on each app: what's next, versus where am I. That asymmetry belongs on the home screen and nowhere else. The shared layer underneath had to be indifferent to it.

Started with the shared library rather than either app's surfaces. A component is cheaper to iterate than every screen that uses it. Twelve primitives, each specified with states, sizes, and theme bindings.

With the library in place, each app's screens became compositions of existing components plus app-specific copy. A new screen was rarely a new component.

Two token sets, one per app, and a library that reads from them. The same component renders correctly in both palettes with no per-brand fork.

Onboarding first, then the dashboards, then payments, then the secondary surfaces, in both apps together. Each wave proved the shared layer before the next one leaned on it.