PayMe App Homepage Redesign
PayMe App Homepage Redesign
This case study details the redesign of the PayMe for Consumer (PM4C) app homepage, focusing on creating a scalable Information Architecture (IA) to enhance user navigation and adaptability. As a result, the project significantly improved access to offers and rewards and streamlined the discovery timeline, enabling users to quickly find relevant features and information - ultimately boosting user engagement and satisfaction.
This case study details the redesign of the PayMe for Consumer (PM4C) app homepage, focusing on creating a scalable Information Architecture (IA) to enhance user navigation and adaptability. As a result, the project significantly improved access to offers and rewards and streamlined the discovery timeline, enabling users to quickly find relevant features and information - ultimately boosting user engagement and satisfaction.
TIMELINE
Dec 2022 - Jun 2023
ROLE
Journey owner
UI & UX designer
Illustrator
DELIVERABLES
E2E journey
UI design
Illustration
TOOLS
Figma
Adobe Illustrator
Outcome
Outcome
Quick Actions
Relocated utility entry points to the new 'Quick actions' section for better UX.
Quick Actions
Relocated utility entry points to the new 'Quick actions' section for better UX.
Quick Actions
Relocated utility entry points to the new 'Quick actions' section for better UX.
Updated IA
Designed dedicated sections to better organize rewards and offers, enhancing discoverability.
Updated IA
Designed dedicated sections to better organize rewards and offers, enhancing discoverability.
Updated IA
Designed dedicated sections to better organize rewards and offers, enhancing discoverability.
Quick Pay with QR Code
Implemented Pay businesses QR Code within the bottom navigation for a seamless payment flow.
Quick Pay with QR Code
Implemented Pay businesses QR Code within the bottom navigation for a seamless payment flow.
Quick Pay with QR Code
Implemented Pay businesses QR Code within the bottom navigation for a seamless payment flow.
Pain Points of the Existing Homepage
Pain Points of the Existing Homepage
1. Cluttered IA
1. Cluttered IA
The original homepage design lacked structure and cohesion, with scattered visual elements competing for attention.
This made it difficult for users to quickly find functional features or offers, and it also hindered the team's ability to implement new features or add sections seamlessly due to the absence of a clear content hierarchy and grid system.
The original homepage design lacked structure and cohesion, with scattered visual elements competing for attention.
This made it difficult for users to quickly find functional features or offers, and it also hindered the team's ability to implement new features or add sections seamlessly due to the absence of a clear content hierarchy and grid system.
2. Extra tap to browse and grab flash vouchers
2. Extra tap to browse and grab flash vouchers
Requiring two taps to secure a voucher during flash sales or limited-time offers can create unnecessary friction, potentially frustrating users and leading to missed opportunities.
This extra step undermines user satisfaction and loyalty, creating a barrier in the conversion funnel that results in lower voucher claim rates and reduced marketing effectiveness.
Requiring two taps to secure a voucher during flash sales or limited-time offers can create unnecessary friction, potentially frustrating users and leading to missed opportunities.
This extra step undermines user satisfaction and loyalty, creating a barrier in the conversion funnel that results in lower voucher claim rates and reduced marketing effectiveness.
3. Extra clicks to pay businesses
3. Extra clicks to pay businesses
The additional click required to open the P action sheet in PayMe's payment flow increases transaction time and reduces user satisfaction, especially for frequent in-store payers.
This inefficiency can lead to lost sales and a competitive disadvantage as PayMe expands among businesses, compared to more streamlined payment options.
The additional click required to open the P action sheet in PayMe's payment flow increases transaction time and reduces user satisfaction, especially for frequent in-store payers.
This inefficiency can lead to lost sales and a competitive disadvantage as PayMe expands among businesses, compared to more streamlined payment options.
Wireframes
Wireframes
Building upon the insights consolidated by our senior designer, I extended the wireframing process to optimize the grouping and create new components.
Building upon the insights consolidated by our senior designer, I extended the wireframing process to optimize the grouping and create new components.
Moodboard
Moodboard
I prepared two versions of moodboards before moving into the UI design stage.
I prepared two versions of moodboards before moving into the UI design stage.
Moodboard v1 ✅
Emphasizes a clean and structured aesthetic focused on functionality and data clarity. It highlights key payment features through a minimalist layout that enhances readability and usability. This direction was ultimately chosen for its alignment with the app’s goal of delivering a polished, efficient experience.
Moodboard v2
Explores a more vibrant, user-friendly style with lively colors, illustrations, and card-based layouts. It focuses on personalization and feature discoverability to create a more engaging, approachable feel. While visually appealing, this direction was considered less suitable for the professional tone of the PayMe app.
User Testings
User Testings
I conducted three rounds of user testing, utilizing A/B testing and scenario-based role play methodologies to understand user preferences regarding the IA enhancements. The key findings are as follows -
I conducted three rounds of user testing, utilizing A/B testing and scenario-based role play methodologies to understand user preferences regarding the IA enhancements. The key findings are as follows -
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.
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.
Visual Design: New Header Banner
Visual Design: New Header Banner
To maintain consistency with the original homepage header banner, I explored design directions that retained our mascot, PayMeow, and space-themed elements while introducing fresh styles. Since PayMe features festive themes year-round, ensuring the banner matched the new homepage layout was essential for visual cohesion.
I created 15 design variations and presented 3 to stakeholders for evaluation within the overall interface.I also updated design guidelines after launch to accelerate future banner creation and maintain consistency across projects.
To maintain consistency with the original homepage header banner, I explored design directions that retained our mascot, PayMeow, and space-themed elements while introducing fresh styles. Since PayMe features festive themes year-round, ensuring the banner matched the new homepage layout was essential for visual cohesion.
I created 15 design variations and presented 3 to stakeholders for evaluation within the overall interface.I also updated design guidelines after launch to accelerate future banner creation and maintain consistency across projects.
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
Prior to launching the new IA, I designed visually compelling screenshots for both Apple App Store and Google Play Store listings to highlight the new app features and interface, capturing potential users' attention and driving downloads.
Prior to launching the new IA, I designed visually compelling screenshots for both Apple App Store and Google Play Store listings to highlight the new app features and interface, capturing potential users' attention and driving downloads.
Optimizing Accessibility
Optimizing Accessibility
Soon after release, we updated the hero banner design to improve inclusivity.
Auto-scrolling was removed and a 'See All' button added to support users with visual or motor impairments. Validated with the Digital Experience and Accessibility team (DEA) in July, the design meets WCAG 2 standards.
Soon after release, we updated the hero banner design to improve inclusivity.
Auto-scrolling was removed and a 'See All' button added to support users with visual or motor impairments. Validated with the Digital Experience and Accessibility team (DEA) in July, the design meets WCAG 2 standards.
Latest flow of the hero banner (July 2024).