I led the creation of a dedicated design system for a suite of native apps used by H&B retail staff. The system adapted components from the main website design system and optimised them for mobile app use in-store.

👥 Users

‣ H&B retail staff using in-store apps for daily tasks like logging in, stock checks, and printing.

🎯 Goals

‣ Adapt web design system for native app contexts.

‣ Improve UI consistency and accessibility across multiple apps.

‣ Streamline common journeys like login and printer setup.

‣ Support dark mode for in-store use and battery efficiency.

✏️ Design Approach

‣ Created accessible colour ramps tailored for light and dark modes.

‣ Designed app-specific logos, icons, and micro-animations (e.g. loading, headers, menus).

‣ Built a Figma component library for efficient scaling and handoff.

‣ Mapped and optimised shared user flows across apps to reduce redundancy.

‣ Implemented dark mode variants for improved readability in dim in-store environments and better device performance.

🚀 Results

‣ Improved speed of app updates and feature rollouts.

‣ Greater visual consistency and intuitive hierarchy across apps.

‣ Better accessibility, including contrast improvements for both light and dark modes.

‣ Dark mode support enhanced usability in low-light retail settings.

‣ Enabled ongoing optimisation across the app suite via shared patterns and scalable components.

✅ Impact

This custom app design system created a more unified, efficient, and accessible experience for H&B store colleagues - supporting faster development, smoother onboarding, and more intuitive in-store workflows.