Research, Design & Interaction
UX, UI & Protoype
Muawin is a micro-lending service that provides loans to small shops and corner stores.
But instead of giving cash loans, they collaborate with manufacturers to stock these stores, and they pay Muawin back for this inventory over the next few months.
Muawin approached us with what seemed like a relatively straightforward brief: translate their English app into Urdu to make it more accessible.
From subsequent discussions with their team, it became clear that a simple translation would not be enough.
The hope with translating the app was thus:
Understanding the language -> improved accessibility and usability -> increase in loan applications and loan repayments
But language was only one barrier to access: most of Muawin’s clients were novice technology users, and did not have the same mental models that make it easier for experienced users to adapt to an unfamiliar app.
So in addition to the translation, we worked on an expanded problem set that directly addressed the end goals:
We started by reviewing existing research on designing for low-literacy users.
With a tight timeline and a modest budget, we could not test all of our design choices, so we relied on what was already tested by others.
There are several existing apps that focus on small retailers and low-confidence users: Bazaar, Tajir, Retailo, Jugnu, Dastgyr, and Bykea, to name a few.
Since our users were already accustomed to many of these apps, we collected screenshots and used them as a reference for where to begin - for app interactions as well as translations.
Armed with this base knowledge from secondary research, we then went out to observe Muawin users in their stores.
We wanted to understand their lifestyles and workflows, how they interacted with other technology, and how Muawin fit into all of this.
Once we had a decent idea of what sort of users we were designing for, we wanted to know how they interacted with Muawin's salesmen.
So we took out a day to shadow one of Muawin’s on-ground salesmen across three different clients.
We saw how the salesman approached new customers, made his pitch, and in case of a successful pitch, how he onboarded them to the platform.
From these initial interviews and visits, we had enough information to make a customer journey map for what an ideal user flow would look like.
This also gave us a handy reference for what screens we needed to design for each step of the journey; and how we could achieve our initial goals through non-UI interventions as well.
From these trips, we realized that we were actually designing for not one, but two distinct users: the retailers and the salesmen.
The retailers needed to use the app to apply for loans and to pay them back.
The salesmen, on the other hand, were using the same app to onboard retailers manually, since the retailers could not reasonably be expected to sign up on their own.
Salesmen were much more comfortable with using the app and could adapt to changes quickly.
So to achieve a reduction in onboarding time, we needed to optimize the sign up process for the salesman and the rest of the app for the retailer.
With our ideas now rooted in solid research, we began with the actual manifestation of our design process.
Rapid prototyping and usability testing
It was clear that we wouldn’t be able to just put out one design and hope that it worked.
So we spent several rounds designing prototypes, testing them with users, addressing usability problems, and iterating on our prototypes again.
Usability testing proved particularly difficult with shopkeepers.
Since they were often the only ones minding their stores, we were frequently interrupted by customers that needed tending to; and there were also challenges with their availability.
Eventually we did manage to scrape together enough data to be confident in re-doing our designs.
For our final design, we focused on three key areas:
We noticed that for most of our users, the home screen was the only page that mattered.
They tended not to explore the app, and if something was buried under a sub-menu or a different tab, it may as well not have existed.
So we brought out key information about their loans and put it all on the home page.
This came at the expense of an information-dense screen, but we felt this was necessary - and even preferable - for our users who did not seem to appreciate the minimalist style that many Western designs strive for.
To design for low-literacy users, we used a four-pronged approach for understanding key information:
1. Translation: translating the app to make it accessible was the original goal, but we found it had additional benefits.
Muawin had to explain to prospective users how their loans were Shariah-compliant, and they seemed to trust the Urdu app more than the English version.
2. Illustrations: we commissioned illustrations that depicted what action the user was going to take by pressing a certain button.
We considered using real-life photographs for this purpose, but our secondary research indicated that illustrations seem to work better than photos.
3. Colors: we used distinctly colored cards to aid memory and recall.
We had noticed in our tests that users often did not understand button labels or icons, but knew to press "the orange button" or "the blue botton" for a specific action. So we used different colors for different types of information.
4. Audio: Some of our users could not read at all, so we added audio clips to narrate important on-screen information.
Many of these people regularly used WhatsApp via the voice notes feature, so we mimicked the style of the WhatsApp voice note playback icon to indicate audio narration.
Here's a closer look at the illustrations.
From our research, we found that these should be detailed enough to provide as much context as possible.
For example, the shopkeeper has products behind him to indicate who this is supposed to be; and the Muawin salesman is wearing a distinctly-colored shirt and cap to indicate this is a company representative - cues that even those who can't read were able to pick up on.
Instead of trying to cram everything in the app and hoping it worked, we also gave Muawin advice for product design and development, for alternative methods of interaction.
Many retailers tended to conserve their limited mobile data, or turn off Wifi.
Some had removed the Muawin app if their phones were low on storage (or were hoping that deleting the app would also wipe away their loan).
Instead of relying on the app or its push notifications, we recommended including SMS reminders, as they do not require an internet connection, and have a higher opening rate.
Some users did not own smartphones at all. For those with feature phones, we recommended implementing USSD services.
This allows users to achieve basic tasks and retrieve information on any phone, without needing an internet connection.
We saw that many were already using USSD codes to use services like JazzCash and EasyPaisa for their payments, so convincing them to adopt this for Muawin would be relatively straightforward.
Yes and no.
At the time of writing, the redesigned app has just been launched, so data is limited; but early feedback seems promising.
The Urdu app is immediately more useful and usable for a larger proportion of retailers. They are better able to understand what they owe, and when.
And based on qualitative feedback, salesmen, in particular, appreciate the time saved in their onboarding workflow, since it allows them to sign up more customers in a given shift.
However, we are still some way off fully autonomous use of the app to apply for loans.
This is a complex problem space that we don’t expect to tackle in one swoop, made more difficult by the fearfulness of making mistakes when it comes to financial dealings.
But in this version of the app, we think the groundwork has been laid for additional improvements over time to work towards that goal.
Want to know about all the stuff we had to trim from this case study?
Working on something similar and need to bounce off ideas?
Get in touch! We'll have lots to talk about.