Reshaping xCurrency App Navigation for Feature Exposure
Reshaping a variety of cross-border financial services through both bridge pages and bottom navigation, while achieving stylistic consistency.
Solution overview
An iterated bridge page solution - balancing smooth interaction, business exposure and expandability
Currency Convertor
Service Homepage
Remittance Service
Project background
What is xCurrency?
Currency Converting Tool
Most of the user of xCurrency’s mobile app would answer: “a currency conversion calculator”.
International Remittance Service
A small amount of international users would answer: “a remittance tool with minimal fees and simple process”.
Exchange Rate API Provider
xCurrency offers a flexible API for commercial data integration, allowing business users to obtain exchange rates in the shortest time and at the lowest cost.
The problem
Is “xCurrency” a currency converting tool, or a cross-border financial services? What do we want the user perception to be?
Previously, driven by a larger user amount, the currency converting tool is the default interface after entering the application, and the channel of introducing the remittance (xRemit) service is unclear.
desk research & brain dump
While balancing design and business growth, we aim to elevate users’ perception of xCurrency from just a “currency convertor” to a comprehensive “hub for cross-border financial services”
Help Users
Ensuring smooth currency conversion experience and as always
Help xCurrency
Exposing the remittance business by making the experience easy to navigate, and extensible to new users
Help Growth
Optimizing navigation as part of the engine for remittance service growth
What would be the best way to introduce? Competitive analysis provided insights.
When a mature mobile application has been long understood by users to have a single functionality, when trying to enhancing the visibility of a new feature, a few methods are typically employed -
Onboarding Tutorials
Introduce the new feature using splash screens, pop-up windows, or educational cards.
Feature Highlights
Add subtle hints or labels for the new feature within the app, such as "New" or blinking icons, to draw user attention.
Promotions & Rewards
Encourage users to try out the new feature by offering temporary promotions or in-app rewards.
We noticed none of the 3 directions would provide a long-term, sustainable visibility to the feature.
As an interaction designer, I frequently consider how users behave and navigate within interfaces. Aiming for a UI structural revise and moving beyond the typical marketing campaign mindset, I brainstormed and undertook extensive desktop research, resulting in several proposed solutions.
Interface Adjustment
Modify the app's main interface layout to ensure the new feature is easily accessible. This could involve introducing a new navigation menu or adding an icon to the app's bottom bar.
Modular Design
Breaking the app down into smaller modules or sections, each with its specific purpose. Then, assemble them as needed. This approach provides greater flexibility when adding or adjusting features.
What are the "Interface Adjustments" we could implement? Navigation.
The navigation structure update for the xCurrency app has been a long-overdue design request. Let’s take a look at what the previous experience was like.
previous experience
Different functions and services are having different priorities, interface logic are unclear
Parallel functions, different priorities
user research
Smooth Convertor, Easy Remit Service, Better Exposure, Consistent Visual Style
Through user research (interview + survey), we gathered stakeholders’ core needs and wants, as well as essential business goals.
“I want smooth and quick convertor services as always.” - User P1
JTBD 1: Ensuring smooth, straightforward currency conversion experience as always.
“I need a convenient and fast remittance service.” - User P2
JTBD 2: A remittance service (xRemit) that is easily accessible.
“We need more exposure of remittance service and other services moving on.” - BD
“We want our navigation to be expandable and afford more services in the future.” - PM
JTBD 3: A navigation solution that balances among exposure to xRemit, expandability, and consistent interface aesthetics
To sum everything up, we wish to deliver a navigation revamp that fulfill or facilitate four visions ↘
01 Smooth Convertor
02 Easy Remit Service
03 Better Exposure
04 Consistent Visual Aesthetics
Design / 1st attempt
Bottom Navigation - Strong exposure, sacrificed convertor experience
A first draft was born after ideation incorporating research insights. We decided to apply a navigation solution that is commonly seen in most mobile applications - bottom navigation.
Parallel priorities, direct exposure
Currency Convertor
landing page
Currency Market Trends
Remittance Service
Despite aligning well with business goals, such iteration has a significant issue with unintentional clicks. We were able to locate the issue through usability research.
Evaluative and usability research
Unintentional Clicks :(
Usability testing revealed that the bottom navigation caused “converter-only” users to inadvertently click on bottom navigation tabs they didn't initially intend to engage with, while operating the calculator.
Before
After
An additional row blending into the calculator keyboard, which triggered the unintentional clicks
Design / 2nd attempt
Service Homepage - a bridge page solution balancing smooth interaction, business exposure and expandability
Taking research insights into consideration, we incorporated the concept of “service homepage”.
“Mini apps” inside a bridge page
Each service/feature serves like a mini app nested under this homepage, with parallel priorities scrolling all the way to the right. It also allows new service expansion, without need to taking care of interface space.
Currency Convertor
landing page
Service Homepage
bridge page
Remittance Service
result & impact
The redesign is now live and making a difference for users worldwide.
Ultimately, the design team has successfully developed a revamped solution that not only harmonizes seamless interaction, business visibility, and scalability while enhancing the consistency of visual design, but also fulfills the following four key visions -
Smooth Convertor
Easy Remit Service
Better Exposure
Consistent Visual Aesthetics
After moving the design to development and launching it, we've seen positive feedback from users all over the world. The new design hasn't just improved user satisfaction; it's also had a noticeable positive impact on our business results.
User Feedbacks on App Store
Shawn Wang
Seattle, WA
January, 2024