0 → 1 IA transformation enhancing navigation and user adaptability
Timeline
Dec 2022 - Jun 2023
Role
Journey owner
UI & UX designer
Illustrator
Deliverables
Tools
Outcome
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.
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.
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.
Building upon the insights consolidated by our senior designer, 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 ✅
Emphasizes a clean and structured aesthetic focused on functionality and data clarity. It highlights key payment features, such as balances and transaction history, 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
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.
To maintain consistency with the original homepage header banner, I explored design directions that retained our mascot, PayMeow, and the space-themed elements while introducing fresh styles that complemented the new homepage design. I created 15 design variations and presented 3 to the leadership team, allowing stakeholders to evaluate each design's effectiveness within the overall user interface.
I also updated the design guidelines to streamline future workflow and header banner creation, ensuring the team could maintain consistency and efficiency in upcoming projects.
Design guideline - Top banner safe area
1. Implemented a grid design system with padding between sections
2. Introduced a scalable 'Quick Actions' section, making frequently used features just one tap away
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.
