Dated: 30-10-2021
Client: Al Muzaini Exchange
Duration: 6 months
Team size: 2 members
Al Muzaini helps customers send money to over 140 currencies in 200+ countries.
However, there was lack of cross-channel digital products that enable people to transfer money easily on their fingertips while receiving cash worldwide.
Over the years, although Al Muzaini has built global network of agent locations and become famous for cross-border money transfer services, the company now faces the risk of losing the ground in digital business because of:
THE CHALLENGE
COVID-19 pandemic: exchange houses and currency exchange services have experienced temporary closures or disruptions in their operations.
Fast-growing competition: People prefer faster, eariser and more convenient alternatives.
Outdated user experience: The old and domestic only Al Muzaini app was too limited to be scalable or upgraded, and even perceived as obsolete by younger generation of users.
THE GOAL
To offer competitive mobile money transfer product in both domestic and international markets, as a pillar of building an omni channel service, by designing the app from scratch to allow easy, quick and reliable money transfer:
It needs to provide improved and intuitive UX along with modern and thoughtful UI.
It needs to be scalable for localization and international deployment.
It needs to leverage the advantage of massive agent locations for bridging the gap between online payment and offline cash pickup.
THE PROPOSAL
To speed up the process of releasing the new app in the market soon, the product team decided to build a hybrid app that will run on both iOS and Android by using the same code base. This means not only the frontend implementation must be a “one size fits all” solution, but also the app design has to be platform-agnostic.
PROJECT METADATA
My Role (Beyond pushing pixels)
Conducted research to understand user needs, behaviours, and preferences through interviews, surveys, and usability testing.
Structured the information within the product to enhance usability and accessibility.
Created visual representations (wireframes and prototypes) of the user interface to demonstrate the layout, functionality, and flow of the product.
Designed click-through prototypes to showcase how users interact with the product, including defining user flows, creating interactive elements, and ensuring a seamless and intuitive experience.
Conducted usability tests to gather user feedback and identify areas of improvement for the product’s usability.
Tools (Designing & Prototyping): Figma
Frontend Development:
Managed frontend development deliverables
Ensured the frontend code adhere to the design and accessibility guidelines, making the product usable by people with disabilities.
ITERATIVE DESIGN PROCESS
Understand why/why not people choose Al Muzaini and how they use the existing products/services to send money.
Customers don’t want to always wait in lines and fill out paper forms. Ultimately, they just need to send money. Although Al Muzaini locations are broadly accessible everywhere, tapping on the screen is simply preferred by mobile users.
TARGET AUDIENCE
The personas identified through user research reveal customers from three perspectives:
The lapsed
who perceive Al Muzaini as the old-fashioned money transfer service, and they have embraced digital alternatives like PayPal.
The current
Both loyal customers who have been actively using Al Muzaini services, and
those who are passively involved in the money transfer process.
The future
People who recognize the brand and would consider fulfilling their money transfer
needs with Al Muzaini when the time comes.
Live up to the needs, exceed the expectations
The new app needs to be visually modern, process-wise familiar, feature wise capable, yet specialities clear to win the hearts of target customers.
COMPETITIVE ANALYSIS
Among all the online money transfer products in the market,
Fighting for the best fees and exchange rates is too common to make significant differences. Senders often seek the optimal choices of time and convenience, not just cost.
People run into similar processes shaped by legal regulations and compliance policies. It can be painstakingly to go through when identity verification requires multiple documents.
Bank to bank, card to bank transfers are well supported. But paying in cash and receiving cash are underserved in the digital world.
First successful transfer matters when acquiring returning users. Any tedious and frustrating first impression will make customers consider elsewhere right away
Take online approach for granted, plus embracing offline experience
Digital experience doesn’t mean leaving the tangible world behind. Leveraging its advantages to not only serve online users, but also recognise those who need transfers to be taken departure from cash. Also, expedite ID verification by uploading photos, if not totally painless.
INFORMATION ARCHITECTURE & USER FLOWS
After unterstanding who we are designing for and what competitiveness the new app must have, we revisited the existing user flows in our web/app built in the past, by breaking down the information architecture into fundamental pieces. From there we managed to filter out unnecessary steps and redundant elements that won’t benefit fast and easy money tranfer.
Learn from the past, extract the essence, rebuild on top of the legacy
Even what’s new should honor what already works well. Apart from pursuing the insights of what it takes to send money successfully, maintaining what customers are highly used to carries the continuity of user experience between online and offline moments, and gathers momentum of transition from old product to the new one.
To embody the emerging ideas along with the findings, I started the journey of bringing the new app to life.
From sketches on paper to pixels on screen, mood board to color palette, UI components to design style guide, wireframes to mockups, user flows to interactive prototype. Every step strives to provide meaningful and valuable mobile user experience in the ultimate user’s hands.
EARLY SKETCHS/WIREFRAMES
I used skethces and wireframes to visualize ideas, capture inspirations and reflect thinking process, even to understand why existing web experince was designed to be the way it is, and how that’s going to impact Al Muzaini’s future app product.
EXPLORE AND ITERATE WITHIN THE CONSTRAINTS
When exploring the UI and user interactions using low-fidelity mockups, certain critical details emerged to require specific treatment, such as the dynamic dependency between fees and exchange rates related to different countries. As a result, conditional notifications and tooltips must be applied accordingly so as to take necessary disclosures and disclamiers into account .
VALIDATE THE DIRECTION WITH USER TESTING
Testing each iteration against the old experince, as well as its previous version on usertesting.com allows me to identify the priorities of what remains to be fixed. Incremental improvements could make constant rewarding progress, even if just minor content changes.
UI themes from the mood board
Face with so many different users with diverse backgrounds internationally, I developed two sets of color palettes that resonate with the majority of cross-culture customers, to reflect their visual preferences expressed in surveys.
As the building blocks of the app evolve, detailed style guide becomes the must-have for establishing the new standards.
This document grows with the app’s updates over time. Here’s its partial overview. Because of taking the approach of hybird app, the UI elements were designed with the intention of being platform-agnostic. They were inspired by material design and equipped with the spirit of mobile web application.
Be contextual, be detailed, be specific. Flows and interactions must be purposefully crafted beyond showing user experince.
Simple features may be full of complexity behind the scene. Working with product, development, content, and legal teams requires more than dealing with time zone differences, it relies on transparent communication and thorough documentation.
An Interaction Flow Sample: This example diagram shows how user registration in the new Al Muzaini app.
The minimum viable product was released as the pilot for international customers first
Until now, the new app has been used by customers in more than 60 countries worldwide, and it continues to reach more and more people.
Finally, the better product is here, the better design to begin
Design is never really done. The next round of observation, ideation, and action is always on the way. From late 2015 to early 2017, we collected great amount of data and feedback, learned many things, adapted the design to accommodate different languages and various reuglations. One day, the time of replacing the old app in the U.S. came eventually, in order to offer all the best we have achieved to the domestic world where everything originally started.
What did I learn?
Thanks to this project, I was lucky enough to have the opportunity of designing an app which impacts how people send money on such a large scale. When looking back, here is a few things I would like to keep in mind moving forward.
1
Align perspectives with the goal
There are conflicts between user needs and business objectives, product requirements and design principles, technical limitations and desirable outcome. Design does make compromises, but just for the purpose of aligning everyone’s perspectives with the common goal, which brings the team to stay focused.
2
Keep asking why, why not and what if
Questioning a designer himself/herself is no less important than asking questions to a user or a product owner at all. There would be challenges of balancing “think out of the box” and “play it safe”. We need to keep questioning ourselves until knowing what really matters the most before making a design decision.
3
Consistency, not uniformity
In the process of establishing the UI paradigms, what was built before has its reasons to be the way it is, and what is designed now also has its time and place to set the standards. When applying them, define clear rules so that people understand how to use them consistently instead of too literally in a given context.
4
Scalability comes first, trade-offs may follow
The app needs to accommodate English, Chinese, Spanish, German, French and other languages. Sometimes localization inevitably doubles the length of available content. Reducing content iteself is one obvious way, but not at the cost of losing its meaning. Fundamentally, scalability should take higher priority than the most ideal visual result if they cannot be achieved at the same time.