Creating a New Branded Mobile Experience
PDI Technologies Mobile Theme Design
Company / Role
Company: PDI Technologies
My Role: UX/UI · Visual Design · Design Systems · Mobile Experience
Tools: Figma · JSON
Focus
Led the UX/UI design of a new mobile app theme for PDI’s loyalty platform, working collaboratively with the team to create a flexible foundation that could be customized for different brands. NOZZL was used as the example brand to bring the theme to life and demonstrate how the system could translate into a cohesive, branded experience.
The Opportunity
Building a theme designed to scale
PDI’s loyalty platform supports mobile experiences for a variety of brands, each with their own identity and customer experience.
Our team set out to create a new mobile app theme that could serve as a flexible foundation for future customers. The goal was to establish a cohesive structure and visual system that could be adapted to different brands while maintaining a consistent, intuitive user experience.
NOZZL was selected as the example brand to demonstrate how the new theme could be brought to life through a real-world brand identity.
Defining the Experience
From a flexible framework to a branded experience
I led the UX/UI design direction for the theme, exploring how the structure, visual hierarchy, and interaction patterns could work together across the mobile experience. The design needed to feel polished and cohesive while remaining flexible enough to support different brands, content, and visual identities.
Home
Creating a clear starting point and prioritizing key actions.
Rewards
Making points, progress, and available rewards easy to understand.
Catalog
Creating a simple, browsable experience for available rewards.
Account
Organizing account information and actions into an intuitive experience.
UX at the Center
Designing beyond the visual layer
Although creating a new visual direction was an important part of the project, the goal wasn’t simply to create a new look. I considered how users would navigate the experience, understand information, and interact with key features throughout the app.
Clear Hierarchy
Information was structured to help users quickly understand what matters most and what actions are available.
Intuitive Navigation
Navigation patterns were designed to make important areas of the app easy to find and access.
Consistent Interactions
Reusable patterns helped create a predictable experience across different screens and features.
Visual Clarity
Brand expression was incorporated while keeping usability, readability, and accessibility in mind.
Building a Scalable Design System
Components designed for flexibility
Because the theme was intended to support multiple brands, scalability and consistency were important considerations throughout the design process.
I created reusable Figma components and variants to establish consistent UI patterns while allowing flexibility for different content and brand applications. This made it easier to maintain consistency across the experience and adapt the theme for different brand applications.
NOZZL as the example brand
To demonstrate how the theme could translate to a real brand, we developed NOZZL as the example application. This allowed us to explore how the visual system, components, and UX patterns worked together within a cohesive branded experience.
Collaboration & Iteration
Designed collaboratively. Led intentionally.
The project was a collaborative effort across the team, with me taking the lead on the UX/UI design direction. I worked through design iterations, explored different solutions, incorporated feedback, and refined the experience while balancing user needs, brand requirements, and the flexibility of the platform.
From System to Experience
A flexible theme with room to evolve
The resulting theme established a flexible foundation for creating distinct branded mobile experiences within the PDI loyalty platform. The NOZZL example demonstrates how the system can adapt to a specific brand while maintaining consistent UX patterns, reusable components, and a cohesive overall experience.
UX/UI Design
Led the UX/UI design direction and translated the theme into a cohesive mobile experience.
Visual Design
Developed the visual direction, including color, typography, hierarchy, and UI styling.
Design System
Created reusable Figma components and variants to support consistency and scalability.
Collaboration
Worked closely with the team through exploration, feedback, and design iteration.
Implementation
Worked with JSON and front-end implementation to understand how the designs translated into the product
