About
Mobile top-up is a feature on the Be app that allows users to recharge their phones for free calls and internet access.
Challenge
The current version resembles a simple wireframe. Lacks the appeal and functionality compared to other market offerings.
Impact
Redesigned the entire user interface to make the app more intuitive and user-friendly. Integrated new functionalities directly into the app to enhance the user experience and provide more value.
Team
Me as a Designer
Product owner
BE team / FE team
My role
User research & analysis
UX and UI redesign (applying new DS)
Timeline
October, 2023 (project still under development stage)
The evolution
After finishing the project and seeing the before-and-after results, you'll feel completely satisfied and rewarded. It was one of the last projects that still forms part of the legacy
Before redesigned
After redesigned
What methods of UX research will I use to help drive clarity and focus to my solution, and why?
As a project to revamp an existing feature, the primary goal of this product is to reduce the steps for a top-up phone and make it more beautiful. I used the heuristic evaluation method and market research to analyze the strengths and weaknesses of the current production version.
There's a bias called the 🌻 Fresh Start Effect, which describes why people can be motivated by new beginnings.
It's useful when you want your users to purge their old failures, and "start fresh".
The inverse of this, would be a fresh start problem—a psychological cost of starting again.
See about the problems I found below
Overall Simplicity: The current feature appears rudimentary and lacks visual appeal, requiring UI improvements.
Information Overload: The current layout of data and phone top-up packages is inconsistent and cluttered. This makes it difficult for users to quickly scan and understand the information. Inconsistent package naming lengths further complicate matters, causing text to overflow and appear like bugs.
Reflecting on the issues the project has been facing, it struck me that despite having a user base exceeding 10 million, the active users for this feature were surprisingly low. When I saw the actual numbers, I knew we needed to rethink our approach.
While engagement and conversion rates show potential with peaks, further investigation and targeted improvement strategies are needed to unlock their full potential.
Feature Clarity: Some features, like auto-selection, aren't clearly identified. Users might miss them or misunderstand their function.
Purchase Process: While the purchase steps are clear, the number of clicks could be optimized for a smoother user experience
Purchase behavior and active user. Higher spending per visit in engaged months confirms this. But user churn is a concern. We need to understand why active users are leaving.
The auto-recharge function is a great addition! However, Introducing new features is important, but timing is crucial. Don't overwhelm users with information that might distract them from completing their purchase
4 areas for improvement
Let's face it, tackling problems without clear priorities is a recipe for getting lost in the weeds. We end up spreading ourselves too thin and lacking direction.
Fortunately, based on the current state of the product and the data we have, the key issues are clear. To ensure we're laser-focused before diving deeper into research, I've identified the following areas for initial investigation.
1
Improve visual hierachy
2
Redesign clunky scanning UX
3
Simply and reducing the step
4
Introduce missing loyaty
By analyzing competitors, what key learnings can I gain and what business opportunities can I identify?
To gain insights into competing products similar to Be in the market, I am curious to understand:
Why do users choose other applications instead of Be?
How can I accurately identify competitors and select their strengths for learning?
How can I introduce this feature to over 10 million active Be users without requiring them to use another app?
To address these questions, I have clearly defined the key objectives before delving into in-depth research:
Identifying Key Competitors
The competitive landscape is heating up! We have major players like Momo and Zalo Pay offering a wide array of features and competitive pricing. On top of that, international players like Shopee, Grab, and Gojek are also setting the bar high with their innovative solutions.
✌️There's a lot of nuance, and at times it's imperfect. But understanding why theirs works, will help you refine your own.
💡 Zalo Pay - key insight
Zalo Pay maximizes sales by highlighting promotions with badges, flash sales, and eye-catching banners can significantly improve deal awareness.
The current card layout is very effective in presenting information clearly and scannable. On a positive note, the cards excel at personalization by leveraging user data to suggest relevant packages. The elements like 'your promotions' and 'you might like' are particularly successful in enhancing the user experience.
Auto-recharge is a separate, easily discoverable feature. Perhaps we could promote it on a dedicated settings page. This approach streamlines the checkout process for users who don't require auto-recharge, while still providing easy access to those who find it valuable.
👎 The current layout with multiple tabs might be hindering user engagement with later options. Additionally, the number of package choices could be overwhelming for users' decision-making process.
💡 Momo - key insight
MoMo stands out for its user-friendly interface compared to ZaloPay. Their approach prioritizes simplicity and clarity by offering essential features categorized into clear tabs, reducing cognitive load for users.
They also prioritize core user experience principles. Their emphasis on features like auto-select, recent top-ups, and recent searches demonstrates a commitment to user convenience and streamlining the user journey.
😕 One area where MoMo could potentially improve is the confirmation process. Having the price confirmation at the bottom necessitates extra clicks – one for the carrier, another for the package selection, and finally the confirmation button itself. A streamlined approach with confirmation closer to the package selection could expedite the top-up process.
On another hand, displaying data top-up content creates whitespace and increases the need for scrolling.
✅
Best practice for Be
Convenience:
Allow auto-select for my number and the same value at the same time.
Detect the provider when filling in the phone number.
Display recent searches and suggest recently searched numbers.
Show recent top-up values for quick selection.
Prioritize the feature for setting up automatic top-ups.
Content Discovery: Focus on promoting good deals, sales prices, and flash sales.
Personalization / Suggestions: Identify which package suits the phone number and may be of interest (for users with promotions and without).
Ideations for improvements
After identify strength and weekness from competitors, also compared with be’s current version, listed down all the potential ideas
Convenient
Focus on function that offer user can finish the task faster
Contents focus
Offering more valuable package to push sale
Personalizations
Suggest right packages that suitable user needs
How do I break down the design process to focus on adding more valuable features?
I think focusing on what we already have and making it better before considering entirely new features might be a good start. I can then break down the process into four steps...
Define structure as the same patterns and applying design system
During the design process, I prioritized identifying frequently recurring patterns within the feature. By reorganizing the information structure, I aimed to present it in the most understandable manner possible
Simplify choose carrier
I did a few design options for the carrier field. It was initially separated from the phone number input to distinguish between selecting a carrier and entering a phone number. However, this separation consumed unnecessary screen space.
To address this, I retained the existing design but modified the display method. A checkmark no longer indicates the selected carrier to avoid confusing users and ensure they understand how to change their selection. I used the “pen” icon to show it can be edited
Relocate "Recent" section: Shift the "Recent" section downward to direct user focus towards the phone number input, prioritizing the primary action.
Consolidate carrier logos: Within the phone/data card, consolidate the carrier logos into a single box to maintain consistency with the layout of other carrier input fields.
Redesign recharge packages
To avoid confusion about final payment amounts, we discussed showing both the original and discounted prices for promotions (e.g., 50,000đ product marked down to 48,000đ)
ZaloPay's approach of displaying separate prices for the product and cashback is a good example.
Color consistency is key for quick information scanning. While highlighting discounted prices with colors like orange in "Your Combo" cards can grab attention, it shouldn't cause confusion.
Drawing inspiration from Momo's reference. I've redesigned the layout to minimize screen space
Data and Combo package layout by dividing it into left and right sections. The left section presents detailed package information (in a short way) and allows the user to open the bottom sheet to see more info, while the right section displays the price and CTA (Call to Action) button.
Other refinement I did during the need for improvement
Flows redesign - How did I simplify step for user to recharge phone
Four Main Screens of the Phone Top-Up Feature
Refined Design for Enhanced User Engagement: The revamped structure largely retains the current version's layout. However, the primary goal of this revamp is to enhance user engagement. This involves refreshing the interface and refining essential details to encourage repeat usage.
Consistent Design for Seamless Navigation: A well-organized and consistent design across all feature screens ensures a seamless user experience. The top navigation bar maintains consistency with other app services, reinforcing Be's brand identity.
To streamline the user experience and minimize screen space, the title section for carrier selection has been removed. This ensures user comprehension and ease of use without compromising clarity.
Simple flow with only 1 click to payment
To expedite the phone top-up process, I have eliminated the step of selecting a card and confirming the transaction in a bottom sheet. This decision was carefully considered to ensure a seamless user experience without compromising decision-making clarity or introducing confusion.
Optimize Display Space
Addressing Data Plan Overload: One common issue observed in competitors' data plan displays is the overwhelming presentation of numerous options, often requiring excessive scrolling. To address this, I have implemented a sub-tabbed structure to group data plans based on shared value tiers.
Acknowledging Trade-Offs: this approach introduces an additional step of tab switching for users. However, this also can help me to place another function for auto-recharge
Boost the convenience of the top-up feature
The "Recent Top-Ups" section is prominently displayed, allowing users to easily revisit and top up frequently used phone numbers.
Suggests recently topped-up phone numbers, saving users time and effort when initiating new top-ups.
Auto recharge feature
In this revision, we decided to keep toggle on for Auto Recharge but acknowledge that
There are a few issues to consider, particularly during the payment confirmation step: Confirmation Conflict, there are situations where payment is successful but setup fails, or vice versa. And it’s also a bit difficult for the testing process to manage all cases.
Solution for future improvements
Elevating the Core Feature: Phone Top-Up: I have repositioned the auto-recharge feature to enhance user focus on the primary phone top-up functionality. In the current version, auto-recharge is attached to the CTA button, creating visual noise and potentially distracting users from the core task. By placing auto-recharge above the main content area, we aim to:
Reduce Noise and Clarify Priorities: Separating auto-recharge from the CTA button visually declutters the interface and directs user attention towards the primary action - topping up their phone.
Minimize Distractions: By placing auto-recharge in a less prominent position, we reduce the likelihood of users being drawn away from the core task. This allows them to focus on completing the top-up process seamlessly.
Maintain Accessibility: Auto-recharge remains readily accessible for users who prefer this option. Its placement above the main content ensures it's still easily discoverable while not dominating the visual hierarchy.