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.
TIMELINE
Dec 2022 - Jun 2023
ROLE
Journey owner
UI & UX designer
Illustrator
DELIVERABLES
E2E journey
UI design
Illustration
TOOLS
Figma
Adobe Illustrator
Outcome
Outcome
Accessibility
Implemented Pay businesses QR Code within the bottom navigation for a seamless payment flow.
Accessibility
Implemented Pay businesses QR Code within the bottom navigation for a seamless payment flow.
Discoverability
Created dedicated sections to better structure rewards and offers, improving user access and engagement.
Usability
Consolidated utility entry points into a new “Quick Actions” section to streamline navigation and improve user flow.
Existing pain points
Existing pain points
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
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.
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.
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 3 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 3 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.
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 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.
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.
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.
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
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).