TL;DR
- Context: Sole UX owner for a retail bank’s small-business segment.
- Problem: Company-data editing existed only in the retail mobile app; the small-business segment needed it on desktop too — without doubling the logic for developers.
- What I did: Designed one hybrid process — same steps and data, only the layout adapts — covering data view, contact editing, and consent management.
- Result: Module shipped on mobile and desktop; customers self-serve without a call centre.
Diagnosis
The hard part wasn’t designing for mobile and desktop. It was keeping them the same. The bank calls it hybryda — one process rendered on both platforms, where every platform-specific exception means extra development. So the discipline was to design one process — same steps, same data, same logic — and let only the layout adapt, per the design system’s rules. Mobile shows the four data sections as a hub you drill into; desktop shows them as a sidebar with the content beside it. Same navigation, two presentations — and zero duplicated logic for the dev team to maintain.
What I did
- Designed the whole module solo — my initiative, my design; the design-system team approved the changes, I drove them.
- Held the 1:1 hybrid line: one process, layout-only differences, no platform-specific logic.
- Designed the navigation once — mobile: a hub with drill-in and back (app-character); desktop: a left sidebar (four tabs) with content beside it.
- Covered four data areas: view company data; manage addresses (registered and correspondence, with a “same as business address” dedup shortcut); edit email and phone manually; manage marketing consents.
Results
- The universal module shipped for small-business customers on both mobile and desktop — data editing that had previously been retail-mobile-only.
- Self-service: customers view their record, edit contact details, and manage consents without a call centre.
The problem
What needed solving?
These data-editing options existed only in the retail mobile app. The small-business segment needed them too — but small-business customers also live on desktop (web banking), so the module had to work on both.
Why not just design two versions?
Because two versions mean two lots of logic for the dev team to build and maintain. The bank’s model is hybryda — one process, both platforms. Every platform-specific exception costs development, and those exceptions accumulate. So the constraint wasn’t “make it nice on each platform” — it was “keep it one process, and let the layout do the adapting.”
My role / scope
- Sole UX owner for the small-business segment; this module was my initiative and my design end-to-end.
- The design-system team approved the changes, including a new sidebar pattern — I drove the design, they signed off.
- I’m often the one designing mobile↔desktop behavior for the first time, because the bank prioritizes the mobile app (retail), while small-business still needs desktop.
Process
- Designed mobile-first: how the screens should reflect app behavior on mobile, then how they should appear on web/desktop.
- Held the 1:1 line through every decision — same data, same steps, same logic; only layout adapts.
Key decisions & trade-offs
- One hybrid process, not two. Same steps, same data, same logic on both platforms; only layout adapts per design-system rules. Trade-off: less platform-specific optimization — but no duplicated dev logic, which was the real cost driver.
- One navigation, two presentations. Mobile: a hub of four entries with drill-in and back (app-character, depth). Desktop: a left sidebar with four tabs, content beside it (flat, orientation without back-button drilling). Same four sections, same flow — the navigation is the same, the layout isn’t.
- A new sidebar pattern for desktop. The design system didn’t have one; I proposed it, the design-system team approved. Trade-off: introducing a pattern is governance work — but the desktop layout needed it, and it sets a precedent for future hybrid screens.
- Address dedup shortcut. The correspondence address offers “same as business address” instead of a separate entry. Most sole traders use one address for both; the shortcut removes the duplication.
How it turned out
The module shipped for small-business customers on both mobile and desktop — a data-editing capability that had been retail-mobile-only. Customers can self-serve: view their record, edit contact details, manage consents.
What I took away
- The hard part of cross-platform is keeping it the same, not making it different. Design one process; let the layout adapt. Every platform-specific exception is dev cost that accumulates.