UI Redesign and Design System for a B2C iOS/Android App
Context
PennyPet is a B2C app aimed at pet parents.
It offers a bank account with attractive cashback at partner stores, as well as fixed-rate pet insurance.
After several unsuccessful redesign attempts with external agencies, only one visual direction caught attention: the use of a pink-violet gradient to highlight certain texts.
This promising style was still underutilized.
I proposed to take things further: create a new, comprehensive visual world, modernize the brand image, and rethink user journeys. The launch of a gamification feature provided an ideal opportunity to introduce this overhaul.
Typography
The original font, Work Sans, brought little personality.
I swapped it for Outfit, which is more contemporary and distinctive, enhancing the app's professional perception.
Specific effort was put into the typographic hierarchy (sizes, weights, spacing) to improve readability and visual balance on screens.
Colors
The central element of the new design is the pink-violet gradient, used to enliven the interface and highlight key actions and gamification.
The secondary color shades were streamlined to create a coherent, accessible, and easily adaptable palette. They were used as a foundation for presenting the 3 offers.
Special attention was given to accessibility, by at least meeting WCAG AA standards to ensure good readability for texts and interactive elements.
Design System
A full design system was built in Figma, leveraging Tailwind tokens through a community file.
This approach ensured direct alignment between design and code, reducing discrepancies and speeding up development.
We identified 6 main screen templates.
This methodology made it possible to cover nearly 190 screens by streamlining design and maximizing reusability.
Development
The UI overhaul was accompanied by a complete technical refactor in React Native.
• Migration from NativeWind v3 → v4
• Redesign of ~190 screens based on the new templates
• Implementation of a unified component library
Screen production became much faster and more reliable.
The entire app was migrated in around 5 weeks.
Result
The new visual identity was very well received by users and investors, strengthening PennyPet's credibility.
Internally, setting up the design system and templates brought a significant productivity boost while also clarifying the technical stack.
5 Weeks
Time for the full migration & refactor
190 Screens
Redesigned
200% Productivity gains
In design & dev
6 Templates
Reusable ones identified