Case study · Product · Mobile

The 2026 Mobile Evolution

Modernizing legacy systems through design tokens.

The mobile app had gone five years without a meaningful update. Core functionality still worked, but the capability gap between web and mobile increasingly frustrated power users.

The goal was to modernize UX, connect the product to the Universal Design Engine, and introduce AI-assisted task flows while preserving familiar behavior for existing users, laying the groundwork for a 2026 rollout.

Role: Lead Product Designer (mobile modernization and system integration)
Scope: UX modernization, token integration, interaction simplification, and AI-assisted task-flow direction.
Collaboration: Worked across Engineering and Product to balance UX ambition with delivery speed and device-level performance constraints.

Executive summary

We modernized a legacy mobile experience without breaking user habits, while closing the feature and consistency gap with web.

The approach combined token-based design-to-code alignment, pragmatic performance decisions for lower-end Android devices, and a lightweight AI assistant layer.

The result was a faster, more scalable product foundation that improved usability, reduced implementation friction, and prepared the app for continuous evolution.

Before / after

Interface: 2021 vs 2026

Drag across the comparison to see the legacy 2021 interface next to the 2026 redesign: fluid, token-driven, and aligned with the Universal Design Engine.

2026 mobile interface, after the redesign

2021 mobile interface, before the redesign

Drag to compare

The challenge: closing a five-year product gap

Legacy navigation patterns from 2021 felt slow and unintuitive in a 2026 product environment.

Power users wanted desktop-level capability on mobile, but React-based interaction layers faced performance limits on lower-end Android devices. Unlike Apple’s tighter hardware ecosystem, Android required decisions that could hold up across a wider spread of device capabilities.

The app also relied on different constants and interaction logic than newer web products, increasing implementation and QA friction.

Strategy: evolution over disruption

We chose incremental enhancement to preserve mental models instead of forcing a disruptive redesign.

By integrating JSON tokens from the Universal Design Engine, hard-coded values were replaced with shared semantic constants. Spacing, color, and sizing now synchronize across web and mobile through one source of truth.

To respect real-world Android performance constraints, interaction logic was rebuilt with lean UI patterns and lightweight transitions instead of heavy animation stacks.

Workflow demo · tokens, Figma variables, and code

Figma Variables
Tokens Studio
JSON
Code

Native Figma Variables and Tokens Studio bridge component libraries and product themes: designers update semantics in one place, sync to JSON, and engineering consumes the same keys so UI kits and app code stay aligned.

// tokens.js - generated from the same export (shared by web + React Native)
// One semantic tree: themes + component recipes reference the same keys.
export const theme = {
  radius: { button: 8, card: 12 },
  color: { surface: '#14120f', accent: '#c8a97e' },
  space: { sm: 8, md: 16 }
};

export const components = {
  primaryButton: {
    borderRadius: theme.radius.button,
    paddingHorizontal: theme.space.md,
    backgroundColor: theme.color.accent
  },
  card: {
    borderRadius: theme.radius.card,
    backgroundColor: theme.color.surface,
    padding: theme.space.md
  }
};

// App code imports `theme` / `components` - same file, same tokens as design.

Development pulls from one generated module so refactors in Figma propagate without hunting for magic numbers in the codebase.

Innovation: reducing decision fatigue with AI

More features usually create more menus and more decision fatigue. Instead, we introduced a lightweight AI assistant layer.

Users can request complex actions in plain language (for example, "Generate a monthly report"), and the assistant triggers the required API task chain.

AI chat flow

From first open to follow-up actions

Flow from first open through suggestions and follow-up actions, reducing decision fatigue with plain-language help.

Click any screen to view it full size

Impact: full redesign, ready for rollout

100%full app redesign completed, every screen and component
Newnew functionality designed and specified, not just refreshed
1unified token language across design, engineering, and QA
2026development handoff, prioritized for phased rollout

This phase focused on completing the design foundation (full token alignment, interaction redesign, and AI-flow direction) that the 2026 development roadmap was built to carry forward.

Pragmatic design decision

In one delivery phase, we chose a standard React interaction component over a fully custom native animation pattern.

The custom option looked better visually, but the standard approach saved development time and reduced risk across Android’s fragmented device landscape. This let us prioritize shipping core checkout and onboarding improvements faster, where business impact was highest.

Collaboration and handover

The workflow follows how Tokens Studio for Figma is meant to be used: reusable tokens (radius, spacing, semantic color, typography) update the document and styles together, so design changes propagate before anyone opens a code editor.

Remote storage uses a Git-backed sync: token JSON lives in the repository, the plugin can push updates from Figma and pull what engineering merged, including review via pull requests, so token edits are treated like any other code change.

In Figma, component libraries and descriptions (plus Dev Mode handoff) give developers and stakeholders the same named building blocks; paired with the repo, that closes the loop between layout and implementation.

This is not just a UI library; it is a shared language that keeps Marketing and Engineering in sync.

See docs.tokens.studio for sync providers, remote push/pull, and storage, the same concepts this handover is built on.

Outcome recap

Design and specification for the full modernization (every screen, component, and new feature) was completed and handed to engineering, with implementation phased into the 2026 development roadmap.
Operationally, token-driven workflows aligned design and engineering decisions across mobile and web.
For users, interaction simplification and AI assistance were designed to reduce friction in high-frequency tasks.

Final reflection

Redesigning a legacy app is an exercise in product empathy. You preserve trusted behavior while building for the next generation. By combining a shared Design Engine with AI-assisted task execution, the product moved from a frozen interface to a system that can keep improving release after release.

Have a project in mind?

I'm currently taking on select freelance projects and open to full-time opportunities. Let's build something great together.

Get in touch