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

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
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.
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 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.
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.
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.
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.