Established a Scalable IA Framework for PayMe app homepage:
Relocated utility entry points to the new 'Quick actions' section for improved user flow
Implemented Consumer Presented QR Code (CPQR) functionality within the bottom navigation for a seamless payment experience
Categorized and designed dedicated sections to better organize rewards and offers, enhancing discoverability
Developed new voucher components, enabling users to claim vouchers effortlessly with a single tap
PayMe App Screenshot (May 2022)
(1)
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 or grid system.
(3)
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.
Building upon the insights consolidated by Senior Product Designer, Bharat, I extended the wireframing process to optimize the grouping and create new components.
I prepared two versions of moodboards before moving into the UI design stage:
Moodboard v1 focuses on a clean, professional aesthetic with an emphasis on functionality and data presentation. It highlights key features of a payment app, such as account balances and transaction history, using a structured layout and minimalist design elements to ensure clarity and usability. This version resonated with the team as the preferred direction, aligning with the app's goal of delivering a polished and efficient user experience.
In contrast, Moodboard v2 adopts a more vibrant, user-friendly approach with playful colors, illustrations, and card-based layouts. It emphasizes personalization and feature discoverability, creating an engaging and approachable experience. While visually appealing, this direction was ultimately deemed less suitable for the professional tone of the PayMe app.
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:
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.
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
To maintain consistency with the original homepage header banner, I explored the design direction by retaining our mascot, PayMeow, along with the space and universe elements in the iterations. This approach preserved the established visual narrative while introducing fresh styles that complemented the new homepage design, resulting in a dynamic and engaging user experience that upheld the app's core visual identity.
In total, I created 15 design variations and presented 3 of them to the leadership team. These mockups allowed stakeholders to evaluate the effectiveness of each design within the context of the overall user interface, ensuring alignment with both user experience goals and brand consistency.
Final Design
The redesigned homepage effectively addresses the previous challenges through several key improvements. A well-structured layout, streamlined navigation, and a clear content hierarchy work together to enhance usability and discoverability. These enhancements not only create a more intuitive user experience, but also strengthen the app’s overall functionality and appeal.
(1) Implemented a grid design system with padding between sections
(2) Introduced a scalable 'Quick actions' section with frequently used features
(3) Enabled a one-tap payment option via the enhanced 'Pay businesses' button at the bottom navigation
(4) Designed new vouchers components with a "Grab now" call-to-action button
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.
Soon after release, we updated the hero banner design to improve inclusivity. The auto-scrolling animation was removed to accommodate users with visual impairments or motor difficulties, and a 'See All' button was added to allow browsing at their own pace. Finalized in July after validation with the Digital Experience and Accessibility (DEA) team, the design aligns with WCAG 2 standards and reinforces our commitment to accessibility and usability.