Redesigning the Paylab app’s User Experience, Hi-Fi Prototype, and adding new features and its Journey!

Company

Paylab

Year

2022 – 2025

Online
Google Playstore
App Store
Team

Product Designer (Myself)
Product Manager
Developers
QA Engineers

My Role

Research
Sketch
Wireframe
High-fidelity Prototype
Usability Testing

About Paylab

Paylab(previously WageSplitter) offers a seamless platform where employees can access their accrued wages, purchase gift cards, and enhance their spending power, all through a convenient app and dynamic system.

The Challenge
  • Simplifying and reorganizing the app’s existing architecture to enhance usability while maintaining functionality for a diverse user base.
  • Incorporating user research and feedback into the redesign while balancing different user needs and preferences.
  • Integrating new features seamlessly into the existing user journey without overwhelming or disrupting the user experience.
  • Ensuring visual consistency across multiple screens and components to create a cohesive experience throughout the app.
  • Redesigning within the technical limitations of the app’s existing infrastructure, balancing creativity with feasibility.
What I Did

My process began with an in-depth analysis through stakeholder interviews and user feedback collection, which allowed me to pinpoint existing pain points, ensuring that I had a holistic understanding of the business objectives and user needs. And the process began in Phases.

Design Process

Discovery
  • Stakeholder Interviews
  • Collecting User Feedback
  • Identifying Pain Points
  • Creating User Personas
  • Mapping User Journeys

Solutioning

  • Information Architecture (IA)
  • Paper Sketches
  • Wireframe Creation
  • Interactive Prototyping
  • Stakeholder Presentation
  • Stakeholder Feedback
  • Iterative Refinement

Design & Delivery

  • Visual Design Creation
  • A/B Testing
  • Design & Prototype File
  • Design Specs
  • Assets & Exports
Phase I

Discovery

From Insights to Personas: Crafting User-Centric Solutions Through Stakeholder Engagement and Journey Mapping

Stakeholder Interviews

I conducted one-on-one interviews with key stakeholders to uncover their vision, goals, and expectations for the project. The stakeholders came from various departments – product management, quality analysis, marketing, and leadership. These sessions were invaluable in clarifying the overarching business goals and aligning the project with strategic objectives. These interviews gave me insights into the company’s KPIs, feature priorities, and long-term roadmap. This ensured that the solutions I designed would solve user problems and drive the company’s growth.

Collecting User Feedback

To capture a wide spectrum of user experiences, I conducted surveys, one-on-one interviews, and usability tests with the product’s existing and potential users. The users ranged from frequent, power users to casual users who faced various challenges. I asked them about their motivations, frustrations, and needs while interacting with the product. This qualitative data helped me understand what users valued and where the gaps were in terms of functionality and usability.

Identifying Pain Points

By synthesizing the insights from both stakeholders and users, I began identifying recurring themes and pain points. The primary challenges revolved around list of retailers, payment method, and lack of key features. These pain points were categorized based on their impact on user satisfaction and business goals. I prioritized issues that affected the user experience most critically, such as categorisation of retailers, while also addressing those that aligned with stakeholder priorities like buying gift cards with debit/credit cards.

Creating User Personas

Based on the collected feedback, I developed detailed user personas to represent the primary user segments. For example:

These personas were instrumental in keeping the user experience central to the design process, helping me focus on real user needs rather than hypothetical assumptions.

Mapping User Journeys

With the personas defined, I mapped their journeys to understand how they interact with the product at various touchpoints. This journey mapping allowed me to identify friction points and moments of delight. For instance, Sophia’s journey showed that while she appreciated the detailed reporting features, the navigation system required multiple clicks, slowing down her workflow. James’s journey revealed that onboarding was a pain point, as he found it difficult to understand all the product’s features at a glance.

Each user journey helped me visualize the end-to-end experience from the user’s perspective, uncovering opportunities to simplify processes, improve efficiency, and enhance satisfaction at critical moments in the user lifecycle.

Phase I Conclusion

By leveraging stakeholder insights, user feedback, and journey mapping, I was able to create user-centred personas that guided the next steps in the design process. These insights laid a solid foundation for creating solutions that not only aligned with business goals but also addressed real user needs, resulting in a product that was both functional and delightful to use.

Phase II

Solutioning

Restructuring Information Architecture, Creating Paper Sketches, Designing Wireframes & Prototypes

In redesigning the Paylab app, one of the core challenges was addressing the app’s information architecture. As the Product Designer, I aimed to create a more intuitive, streamlined experience while ensuring that business objectives were met. Below is a detailed account of how I restructured the information architecture (IA), created paper sketches, wireframes and prototypes, and incorporated stakeholder feedback into the iterative design process.

The goal was to simplify the navigation structure, reduce user effort, and create a more cohesive flow through the app’s core functionalities.

Step 1: Restructuring the Information Architecture (IA)
Initial Assessment

I began by conducting an audit of the current IA, mapping out every menu, sub-menu, and key feature. This gave me a holistic view of how users were currently navigating the app and where friction points existed. I also analyzed user behaviour data from the app’s analytics, such as the most and least accessed features, the time spent on each section, and drop-off points where users abandoned tasks.

Defining the IA Goals

The primary objectives for the IA redesign were to:

The IA Redesign Process

With these goals in mind, I began by rethinking the structure of the app from the ground up. I started by sketching out multiple versions of how the IA could be reorganized, considering both the user needs (discovered during persona creation) and the business priorities outlined by stakeholders. I explored different hierarchies, such as task-based, role-based, and frequency-based groupings.

For example:

  • Shop Now and Transfer Money buttons were made into the first priority clickable buttons as Go Shopping and Pay Myself with the description.
  • Related features, such as “Transaction History,” “Invite Family Member”, and “Reward Partners” were consolidated under a single section to reduce fragmentation.

I tested these new groupings using card-sorting exercises with a select group of users to ensure the revised architecture made sense intuitively. The feedback was largely positive, with users finding the structure simpler and more logical.

Step 2: Paper Sketches

Once the IA restructuring was in place, I began sketching out early concepts for the revised app layout. The goal here was to quickly iterate on different ideas without diving into high-fidelity designs.

Before moving into high-fidelity designs, I began by sketching out potential layouts and user flows on paper. This allowed me to quickly iterate through different ideas and visualize the new structure without being constrained by digital tools.

I focused on mapping key screens, ensuring that the hierarchy and content distribution aligned with the new IA. The sketches were rough but effective in allowing me to communicate ideas quickly and collaboratively with the team.

Step 3: Wireframe Creation

Once the new IA was finalized, I translated the structure into low-fidelity wireframes. The goal at this stage was to visualize the layout and flow of the app without getting bogged down by visual details. These wireframes allowed me to focus on the user journey, ensuring that each key action could be completed with minimal friction.

I mapped out the primary screens:

  • Home: A personalised overview for the user, offering quick access to their most important information (e.g., Savings to date, Available pay, and Reward balance).
  • Retailer Categories: The journey of gift card purchasing experience was structured.
  • Feature pages: Key functionalities, such as “Payment Method”, “Rewards”, and “Transaction History,” were designed with clear, logical layouts that aligned with the new IA.
Step 3: Wireframe Creation

Once the new IA was finalised, I translated the structure into low-fidelity wireframes. The goal at this stage was to visualize the layout and flow of the app without getting bogged down by visual details. These wireframes allowed me to focus on the user journey, ensuring that each key action could be completed with minimal friction.

Home

Overview
To enhance user engagement and accessibility, I created a Personalised Home Page that provides a quick snapshot of essential financial insights while ensuring seamless navigation to key features. The goal was to create a dynamic, user-centric dashboard that offers both clarity and convenience.

Solution

  • Personalised financial overview displaying Savings to Date, Available Pay, and Reward Balance for instant visibility.
  • Quick access to Featured and Favourite Retailers, ensuring a curated shopping experience.
  • An intuitive layout that prioritizes relevant user information while maintaining a clutter-free experience.

Retailer Categorisation & Search

Overview
To enhance the browsing experience and improve discoverability, I created a structured Retailer Categorisation System that organises retailers into intuitive categories. This approach simplifies navigation, making it effortless for users to find their preferred brands while also offering a quick search option for direct access.

Solution

  • Retailers are grouped into meaningful categories to streamline the browsing experience.
  • Category titles for easy recognition, reducing cognitive load and improving accessibility.
  • Search functionality to allow users to find specific retailers instantly.

Rewards

Overview
To provide users with full visibility and control over their rewards, I created a dedicated Rewards page that offers a clear breakdown of earned and used rewards while enabling seamless transfers. The goal was to ensure users can easily track, manage, and utilise their rewards with confidence.

Solution

  • Real-time Rewards Balance display for instant visibility of available rewards.
  • Seamless reward transfers, allowing users to move rewards as needed.
  • Comprehensive Rewards History, detailing earned and used rewards for each transaction to maintain complete transparency.

Transfer Rewards

Overview
To enhance user flexibility and control, I created a Transfer Rewards page that allows users to effortlessly transfer their earned rewards. The goal was to provide a smooth and intuitive experience where users can select from configured transfer options and choose the exact amount they wish to transfer.

Solution

  • User-controlled transfer amount for complete flexibility.
  • Pre-configured transfer options to ensure a hassle-free process.
  • Simple and intuitive interface that guides users through a seamless transaction.

Wallet

Overview
To improve the usability and accessibility of purchased gift cards, I created a streamlined Wallet page where users can easily view and manage their stored cards. The goal was to create an intuitive stacking system that efficiently organises multiple cards while keeping the interface clean and visually appealing.

Solution

  • Gift cards are stacked, with a maximum of three visible cards at a time to maintain clarity and reduce clutter.
  • The latest purchased card appears on top, ensuring easy access to the most relevant card.
  • A seamless transition and expandable interaction allow users to browse through older cards effortlessly.

Gift Card Details

Overview
To enhance the usability and accessibility of purchased gift cards, I created a dedicated Gift Card Details page that provides users with all essential information in one place. The goal was to ensure a seamless experience for both in-store and online redemption while offering additional features for better card management..

Solution

  • Clear Display of Gift Card Value to provide instant visibility of the available balance.
  • In-Store & Online Gift Card Number with PIN for easy access during redemption.
  • Notes section allowing users to add personal reminders or annotations.
  • Details section to track transaction information.
  • Check Balance option to keep users informed of their remaining funds.

Gift Card Purchase

Overview
To create a frictionless and transparent gift card purchasing experience, I created an intuitive Gift Card Purchase Flow that empowers users with clear financial insights and flexible options. The goal was to ensure users can easily select, customize, and purchase gift cards while being fully aware of their balance, rewards, and discounts.

Solution

  • Real-time display of available balance and rewards to inform users of their spending power.
  • Transparent discount visibility to highlight savings before purchase.
  • Quick-select prefixed amounts for convenience, along with a custom entry option for flexibility.

Checkout Experience

Overview
A smooth and intuitive Confirm Purchase Page is essential to ensure a frictionless checkout experience. I created a user-friendly payment flow that prioritises ease of use, offering multiple payment options while seamlessly integrating rewards for added convenience.

Solution

  • Multiple payment options including available balance, Google Pay, Apple Pay, and the ability to add a debit/credit card.
  • One-tap ‘Use Rewards’ toggle allowing users to instantly deduct rewards from their total balance.
  • Clear and intuitive interface ensuring a quick and hassle-free checkout experience.

Payment Method Management

Overview
To enhance user control and flexibility, I created a Payment Method Management page that allows users to easily manage their saved payment options. The goal was to ensure a smooth and intuitive experience for adding, deleting, and selecting a preferred payment method.

Solution

  • Add or delete payment methods effortlessly for complete control over payment options.
  • Set a default payment method for faster, more convenient checkouts.
  • Clear and intuitive interface that simplifies payment management and reduces friction.
User Flows

To ensure the wireframes worked cohesively, I mapped several user flows. These were based on the key personas created earlier:

a. James Purchasing Gift Cards

b. Sophia Accessing Accrued Wages

These user flows helped ensure that users could accomplish their most important tasks easily, with fewer steps and less cognitive load.

Step 4: Interactive Prototyping

After the wireframes were in place, I used Figma to create interactive prototypes. These prototypes were fully clickable, allowing stakeholders to experience the redesigned flow of the app first-hand. The prototypes featured key screens and user journeys to simulate how the new IA would work in practice.

By creating prototypes, I was able to:

  • Test interactions: Ensure that transitions between pages and actions, such as submitting payments or generating reports, are smooth and intuitive.
  • Validate the user journey: Walk users through their common tasks to identify any potential friction points early in the design process.

The prototypes were designed with enough fidelity to showcase key interactions without diving into visual aesthetics, allowing stakeholders to focus on the structural improvements.

Step 5: Stakeholder Presentation and Feedback


Presenting the New IA and Prototypes

I scheduled a series of collaborative demo sessions with key stakeholders, including product managers, developers, and leadership teams. During these presentations, I walked them through the new IA and prototypes, highlighting how the revised structure aligned with both user needs and business goals. I explained how the grouping of features reduced navigation complexity and showed how frequently used functionalities were now more accessible.

Gathering Feedback
I presented the prototypes to the stakeholders in a series of collaborative demo sessions. The goal was to ensure that the redesigned workflows aligned with both business objectives and technical capabilities. Feedback was positive but also offered opportunities for improvement—such as enhancing mobile navigation and making certain features more accessible from the dashboard. This iterative feedback loop was essential for refining the design before moving to the visual design phase.

Step 6: Iterative Refinement


Finalizing the Wireframes and Prototypes

Based on the stakeholder feedback, I revisited the wireframes and prototypes, making adjustments to reflect the requested changes. I ensured that the updated mobile navigation offered a seamless experience, with accessible touchpoints and quick access to frequently used features. The customizable dashboard feature was also integrated into the wireframes, giving users the flexibility to arrange their workspace according to their needs.

Preparing for Visual Design
Once the wireframes and prototypes were approved, I finalized them as the foundation for the visual design phase. By this point, the information architecture and user flows were validated both by stakeholders and initial user tests, setting a solid groundwork for a seamless transition to high-fidelity visual designs.

Phase II Conclusion
Restructuring the information architecture and creating wireframes and prototypes was a crucial step in transforming Paylab app into a more user-friendly and efficient product. By focusing on simplifying the navigation, grouping related features, and iterating on feedback, I was able to create a clear and intuitive structure that both users and stakeholders embraced. This iterative, collaborative approach ensured that the final product would not only meet user needs but also align with the long-term business strategy.

Phase III

Design & Delivery

Visual Design, Optimizing User Experience Through A/B Testing and Stakeholder Collaboration

Visual Design Creation

With the functionality and flow established, I moved on to crafting the visual designs. The goal was to create a modern, professional aesthetic that aligned with the Paylab brand but also felt intuitive and familiar to users. I adopted a clean, minimalist approach with consistent spacing, typography, and iconography that enhanced usability without overwhelming the user with excessive visual elements.

Color schemes were carefully chosen to reflect trust, professionalism, and simplicity. Visual hierarchy played a key role in guiding users through key actions, such as tracking payments or generating invoices, with clear call-to-action buttons and distinct states for primary and secondary actions.

Designing a Personalised & Insightful Home Experience

By offering a well-structured and personalized home screen, this design empowers users with clear financial insights, quick access to key actions, and a seamless way to engage with their favourite retailers.

Optimising Retailer Discovery with Categorisation & Search

This refined categorisation system enhances user engagement by offering a structured, user-friendly way to explore retailers, ensuring a seamless and efficient shopping experience.

Optimising Retailer Discovery with Categorisation & Search

This refined categorisation system enhances user engagement by offering a structured, user-friendly way to explore retailers, ensuring a seamless and efficient shopping experience.

Enhancing Transparency & Flexibility with a Rewards Page

This intuitive design empowers users with clear insights into their rewards, enhances engagement, and provides a seamless experience in managing and utilising earned benefits.

Seamless & Flexible Transfer Rewards

This design empowers users with greater control over their rewards, making it easy to transfer and utilise earned benefits efficiently while maintaining a smooth and frictionless experience.

Enhancing the Wallet Experience for Gift Cards

This design approach enhances usability by prioritising recency and reducing cognitive load, ensuring a smooth and engaging wallet experience for users.

Designing a Personalised & Insightful Home Experience

By offering a well-structured and personalized home screen, this design empowers users with clear financial insights, quick access to key actions, and a seamless way to engage with their favourite retailers.

Optimising Retailer Discovery with Categorisation & Search

This refined categorisation system enhances user engagement by offering a structured, user-friendly way to explore retailers, ensuring a seamless and efficient shopping experience.

Enhancing Transparency & Flexibility with a Rewards Page

This intuitive design empowers users with clear insights into their rewards, enhances engagement, and provides a seamless experience in managing and utilising earned benefits.

Seamless & Flexible Transfer Rewards

This design empowers users with greater control over their rewards, making it easy to transfer and utilise earned benefits efficiently while maintaining a smooth and frictionless experience.

Enhancing the Wallet Experience for Gift Cards

This design approach enhances usability by prioritising recency and reducing cognitive load, ensuring a smooth and engaging wallet experience for users.

Redefining the Gift Card Details Experience

This intuitive design simplifies the user journey, making it easier to manage and redeem gift cards while ensuring a frictionless and user-friendly experience.

Seamless & Rewarding Gift Card Purchase Experience

This user-centric approach enhances trust, provides financial clarity, and streamlines the gift card purchasing journey, making it a rewarding and hassle-free experience.

Streamlining the Gift Card Checkout Experience

This optimized design minimizes checkout friction, enhances user confidence, and provides a seamless transaction experience, making gift card purchases effortless and rewarding.

Simplifying Payment Method Management for a Seamless Checkout

This streamlined payment management system enhances user convenience, ensuring a frictionless transaction experience while providing full control over preferred payment options.

Seamless & Flexible Transfer Rewards

This design empowers users with greater control over their rewards, making it easy to transfer and utilise earned benefits efficiently while maintaining a smooth and frictionless experience.

A/B Testing

Once the visual designs were in place, I conducted A/B testing to determine which design resonated best with users. Two variations of the design were tested:

  • Version A: A more minimalist design with ample white space and larger touch targets for ease of use.
  • Version B: A denser design that displayed more information per screen, reducing the need for multiple navigation steps.

Through the A/B tests, Version A emerged as the preferred choice. Users responded positively to its clean layout and ease of navigation, which contributed to a smoother overall experience. The test results also highlighted the importance of a minimal interface for time-sensitive tasks.

Outcome

By following a structured, user-centred design process, the Paylab app redesign successfully addressed key pain points and transformed it into a modern, efficient platform. The project’s success was built on collaboration with stakeholders, a deep understanding of user needs, iterative design and prototyping, and data-driven decision-making through A/B testing. The result was a feature-rich, intuitive app that not only aligned with business objectives but also greatly enhanced user satisfaction.