Creating a scalable design system and UI kit to modernize a national B2B mobile app without a full rebuild.

Mobile App Design System | UI + Visual Facelift

Project Summary
Redesigning a national B2B mobile app through a scalable UI kit and modular design system that modernizes the interface and improves usability—without requiring a full rebuild.

My Role
Senior Art Director — led the visual redesign and system development in collaboration with the client’s internal team, defining hierarchy, component structure, and interaction patterns.

Deliverables
UI Kit · Design System · Color & Typography Standards · Component Library · Interaction Patterns

Background

The existing app had grown inconsistent over time, with visual drift across screens and unclear hierarchy. The client needed a scalable system to unify UI components and improve usability.

Challenge

Modernize the interface and strengthen consistency within the constraints of an existing production app—no new codebase, no redesign from scratch.

Objectives

  • Create a modular UI kit and component library for scalable use.

  • Update color and typography standards for accessibility and hierarchy.

  • Simplify interaction patterns and improve flow consistency.

  • Support development efficiency within existing app architecture.

Solution

Built a comprehensive design system in Adobe XD with reusable components and defined design tokens. The updated visuals focused on clarity, spacing, and flexible hierarchy. The modular approach improved usability and allowed new screens to be created rapidly within the existing build.

Below are selected screens, UI kit components, and design system documentation
(client details removed for confidentiality).

Impact

While still in development, the design system has begun shaping a unified product experience—bringing structure, clarity, and scalability to the interface. The new component library and visual framework are setting the stage for long-term growth and efficient iteration.


(All work shown represents in-progress explorations with identifying details removed to protect client confidentiality.)

Previous
Previous

Brand Identity System

Next
Next

Storefront Graphics Package