PayMe App Homepage Redesign
PayMe App Homepage Redesign
Overview
Homepages are the gateway to key user journeys on PayMe – yet analytics and stakeholder interviews revealed that users were struggling to discover high‑value features like rewards and offers, leading to low engagement and reduced retention.
I led the redesign of PayMe for Consumer’s homepage to establish a scalable Information Architecture (IA) that balances business goals with ease of navigation. Through research‑led prioritization and iterative testing, we reduced task friction, increased discoverability of rewards and offers, and aligned the homepage with both user needs and strategic product goals.
Homepages are the gateway to key user journeys on PayMe – yet analytics and stakeholder interviews revealed that users were struggling to discover high‑value features like rewards and offers, leading to low engagement and reduced retention.
I led the redesign of PayMe for Consumer’s homepage to establish a scalable Information Architecture (IA) that balances business goals with ease of navigation. Through research‑led prioritization and iterative testing, we reduced task friction, increased discoverability of rewards and offers, and aligned the homepage with both user needs and strategic product goals.
Problem
How might we design a single homepage that feels fast for payments and rich for discovery – without one goal undermining the other?
How might we design a single homepage that feels fast for payments and rich for discovery – without one goal undermining the other?
Role
Lead UX & Product Designer
Timeline
6 months (Dec '22 - Jun '23)
Responsiblities
Research synthesis & opportunity hypothesis
Revised IA & task flows
Wireframes, prototypes, UI design
Validation via A/B and scenario testing
Stakeholder presentations & rollout strategy
Led feature prioritization and roadmap decisions
Outcome
Outcome
Quick Actions — Increased Efficiency & Engagement
Grouped core utilities into a new “Quick Actions” section to reduce cognitive load and shorten time-to-task for the most common user intents.
Quick Actions — Increased Efficiency & Engagement
Grouped core utilities into a new “Quick Actions” section to reduce cognitive load and shorten time-to-task for the most common user intents.
Updated IA — Improved Scalability & Discoverability
Reorganized the homepage into clear sections for rewards and offers, improving visibility and supporting marketing objectives tied to voucher redemption and engagement.
Updated IA — Improved Scalability & Discoverability
Reorganized the homepage into clear sections for rewards and offers, improving visibility and supporting marketing objectives tied to voucher redemption and engagement.
Quick Pay via QR — Reduced Friction in Payment Flow
Introduced a one-tap “Pay businesses” entry in the bottom navigation, removing steps from the payment flow. This reduced friction for high-frequency, time-sensitive transactions.
Quick Actions — Increased Efficiency & Engagement
Grouped core utilities into a new “Quick Actions” section to reduce cognitive load and shorten time-to-task for the most common user intents.
Updated IA — Improved Scalability & Discoverability
Reorganized the homepage into clear sections for rewards and offers, improving visibility and supporting marketing objectives tied to voucher redemption and engagement.
Quick Pay via QR — Reduced Friction in Payment Flow
Introduced a one-tap “Pay businesses” entry in the bottom navigation, removing steps from the payment flow. This reduced friction for high-frequency, time-sensitive transactions.
Existing pain points
Existing pain points
1. Cluttered IA → Low feature comprehension
1. Cluttered IA → Low feature comprehension
The homepage lacked a clear hierarchy, forcing users to scan multiple competing visual elements. This not only slowed navigation but also prevented the team from scaling the experience as new features were added.
The homepage lacked a clear hierarchy, forcing users to scan multiple competing visual elements. This not only slowed navigation but also prevented the team from scaling the experience as new features were added.
2. Multi-tap voucher flow → Lower claim rates
2. Multi-tap voucher flow → Lower claim rates
Securing vouchers required two taps during fast-moving promotions, increasing drop-off risk and contributing to lower campaign effectiveness.
Securing vouchers required two taps during fast-moving promotions, increasing drop-off risk and contributing to lower campaign effectiveness.
3. Extra steps in payment flow → Slower transactions
3. Extra steps in payment flow → Slower transactions
Users had to open an action sheet before accessing business payments — an unnecessary step in a high-volume flow, reducing both satisfaction and the likelihood of repeated in-store usage.
Users had to open an action sheet before accessing business payments — an unnecessary step in a high-volume flow, reducing both satisfaction and the likelihood of repeated in-store usage.
Wireframes
Wireframes
Building on insights consolidated by our senior designer, I refined the IA by reorganizing content clusters, simplifying task flows, and defining reusable components. The wireframes focused on reducing cognitive load and creating a scalable structure that could support future product expansions.
Building on insights consolidated by our senior designer, I refined the IA by reorganizing content clusters, simplifying task flows, and defining reusable components. The wireframes focused on reducing cognitive load and creating a scalable structure that could support future product expansions.
Moodboard
Moodboard
Moodboard v1 ✅
Prioritizes clarity, modularity, and data legibility — aligning with PayMe’s functional, transaction-first experience.
Prioritizes clarity, modularity, and data legibility — aligning with PayMe’s functional, transaction-first experience.
Moodboard v2
Introduces a more playful and expressive style but tested as less aligned with the brand’s core usage context
Introduces a more playful and expressive style but tested as less aligned with the brand’s core usage context
User testings
User testings
I conducted three rounds of mixed-method testing (A/B and scenario-based). Key insights informed the following decisions:
I conducted three rounds of mixed-method testing (A/B and scenario-based). Key insights informed the following decisions:
Retained the ‘P’ logo for brand reinforcement.
Enhanced the payment icon with a clearer QR visual to increase comprehension.
Prioritized frequently used actions at the top of the layout.
Structured buttons left-to-right to align with user reading patterns.
Retained the ‘P’ logo for brand reinforcement.
Enhanced the payment icon with a clearer QR visual to increase comprehension.
Prioritized frequently used actions at the top of the layout.
Structured buttons left-to-right to align with user reading patterns.
A/B Testing
4 out of 6 interviewees preferred retaining the 'P' logo, as it strongly reinforces the PayMe branding.
It was suggested to maintain a clear depiction of a QR code in the icon design, helping users easily understand the icon and anticipate changes in the user flow.
4 out of 6 interviewees preferred retaining the 'P' logo, as it strongly reinforces the PayMe branding.
It was suggested to maintain a clear depiction of a QR code in the icon design, helping users easily understand the icon and anticipate changes in the user flow.
Scenario-based Role Play Testing
Interviewees highlighted the importance of placing frequently used features prominently at the forefront.
It was suggested to arrange the buttons in a left-to-right order to align with natural reading patterns.
Interviewees highlighted the importance of placing frequently used features prominently at the forefront.
It was suggested to arrange the buttons in a left-to-right order to align with natural reading patterns.
Visual design
Visual design
To ensure visual coherence across the app, I refined the homepage aesthetics while retaining key brand assets such as PayMeow and the space-themed banners.
To ensure visual coherence across the app, I refined the homepage aesthetics while retaining key brand assets such as PayMeow and the space-themed banners.
I explored 15 variations before narrowing to 3 stakeholder-ready concepts, evaluating each against criteria such as clarity, scalability, visual hierarchy, and adaptability to seasonal campaigns and partnership.
I explored 15 variations before narrowing to 3 stakeholder-ready concepts, evaluating each against criteria such as clarity, scalability, visual hierarchy, and adaptability to seasonal campaigns and partnership.
Homepage visual design variations
Header banner design guidelines: safe area specifications
Final design
Final design
The redesigned homepage effectively addresses the previous challenges through several key improvements:
The redesigned homepage effectively addresses the previous challenges through several key improvements:
The original homepage design lacked structure with scattered contents.
The original homepage design lacked structure with scattered contents.
Implemented a grid design system with padding between sections
Implemented a grid design system with padding between sections
Additional clicks to open the P action sheet and select actions in PayMe's original payment flow.
Additional clicks to open the P action sheet and select actions in PayMe's original payment flow.
Introduced a 'Quick Actions' section at the top, placing frequently used features one tap away.
Introduced a 'Quick Actions' section at the top, placing frequently used features one tap away.
The P button was originally a menu button requiring an extra tap to pay businesses.
The P button was originally a menu button requiring an extra tap to pay businesses.
Enabled one-tap payments via the enhanced 'Pay businesses' button in the bottom navigation.
Enabled one-tap payments via the enhanced 'Pay businesses' button in the bottom navigation.
Two-tap process for securing limited vouchers created unnecessary friction.
Two-tap process for securing limited vouchers created unnecessary friction.
Designed new vouchers components with a "Grab now" call-to-action button.
Designed new vouchers components with a "Grab now" call-to-action button.
App store updates
App store updates
To support the feature rollout, I created App Store and Play Store assets that highlight the redesigned IA and new user flows — improving feature awareness among prospective users and increasing conversion during acquisition campaigns.
To support the feature rollout, I created App Store and Play Store assets that highlight the redesigned IA and new user flows — improving feature awareness among prospective users and increasing conversion during acquisition campaigns.
Optimizing accessibility
Optimizing accessibility
To enhance inclusivity, we reworked the hero banner behavior to reduce motion sensitivity and increase control for all users. The update was validated for WCAG compliance and released as part of our ongoing accessibility improvements.
To enhance inclusivity, we reworked the hero banner behavior to reduce motion sensitivity and increase control for all users. The update was validated for WCAG compliance and released as part of our ongoing accessibility improvements.
Latest flow of the hero banner (July 2024).