Building a Design System for PocketApp
Prefer to listen? Hear me walk you through this project
As Pocket continued to evolve, its existing design elements were not cohesive. Colours, typography and reusable UI components existed, but were scattered across different files and lacked a consistent structure.
My focus was to bring these elements together, building a design system from the ground up. I established a more organised visual foundation through colour variables, typography styles and reusable components, creating a shared language that could be applied consistently across the product.
1.Building the Foundations
I started by organising the visual foundations of Pocket. This meant creating a structured colour system, defining typography styles and establishing reusable variables that could be applied consistently across the product.
The colour system was organised into two layers: primitive colours, which defined the available colour values, and semantic variables, which defined how those colours were used across text, icons, borders and different interface states.
I also established a typography scale and organised other foundational properties such as spacing and border radius.
2.Building the Components
With the foundations in place, I started building reusable components for the different interface patterns across Pocket.
I focused on creating components that could accommodate different use cases and states,
This included buttons, input fields, notifications, cards, navigation elements and other product-specific components.
I also accounted for variations such as focused, disabled, error and success states, making the library more flexible and practical to use.
3.Applying the Design System
With the foundations and components in place, the new design system was applied across different parts of Pocket, including the welcome screens, onboarding experience, homepage and Bills page. The goal was to create a more consistent experience while giving each part of the app its own visual identity.
I. Welcome screens
The welcome screens were designed to introduce Pocket's core features through more expressive and visually engaging layouts. Bold colours, illustrations and clear messaging helped communicate what users could do with Pocket while maintaining consistency with the new design language.
II. Onboarding
The onboarding experience was refined to feel simpler and more approachable. The typography, colours and form components created a more consistent experience, with attention given to input states, validation and feedback.
II. Homepage
The homepage received a redesign focused on improving how account information, quick actions and recent transactions were presented. The new layout introduced a clearer visual hierarchy, cleaner content organisation and different states to accommodate both new and returning users.
III. Bills Page
The Bills page was also redesigned to bring services like airtime, electricity, TV subscriptions, events and betting into a more organised layout. A consistent card structure made the different categories easier to scan while allowing each service to retain its own visual identity.
Results
The work went beyond giving Pocket a visual refresh. It established a more cohesive design system, bringing colours, typography and reusable components into one structured library.
It also made the handoff to engineering more straightforward. With colour variables and semantic tokens in place, engineers no longer had to rely on manually picking hex codes or interpreting colour values from individual designs. The system provided clearer references and made design decisions easier to translate into the product.
On the product side, the redesign gave Pocket a cleaner, more organised interface and a smoother experience.
It was also encouraging to see the reception from users and the wider community. Feedback shared with the team described the new interface as a significant improvement, with people calling out the new UI and acknowledging the work behind it.
Ultimately, I was able to contribute beyond individual screens: building a foundation for a more consistent Pocket experience and helping bring that experience to life.