Jara rewards consumers with cashbacks in the form of discount vouchers when they pay routine bills (e.g. airtime, internet subscription, PHCN, etc), while helping retail brands market effectively to these users.
- For consumers: They pay their routine bills conveniently and get discount vouchers for their other lifestyle activities, every time they do so.
- For brands: They acquire customers innovatively by offering discounts on their products and services through the app.
- Social Impact: A percentage of commissions made from transactions on Jara goes toward education of underprivileged children in the society.
Discovery -> User Research -> Extract Insights -> Ideate & Sketch -> Design & Prototype -> Test & Refine -> Build
Pen & paper, JustInMind, Sketch, Invision and Zeplin
A former colleague at Andela approached me with this project. He mentioned that a loyalty app startup needed to revamp their product for the following reasons:
- The user flow and interface were neither user-centric nor visually appealing
- They believed they could reach more users if the app existed as a Progressive Web App. Think about it; PWAs allows users to access certain parts of the app even if they have no network connection plus they can save the app to their home screen and it will function like a mobile app. So it was like killing two birds with one stone.
Former Jara app interface
02. User Research
Before the redesigning any digital product, I first like to evaluate to product i.e. the flow, user interface, performance and overall feel. This is what I did with the help of the UI/UX developer on the team. The following things stood out for both of us:
- There were no serious performance issues e.g. lagging, not loading on some devices, compatibility issues, etc.
- The flow was a bit confusing; no proper onboarding for users, the goals of the app were not clear and how to get from one point to another on the app was absent. The learning curve was long and annoying.
- The user interface was not fluid and was too cluttered.
The next step I took was to go through reviews of the app, talk to some active users and those who had used the app at some point and abandoned it.
03. Extract Insights
The research phase proved useful as the team was able to see things from the users’ perspectives and understand their pain points. It also helped us validate certain assumptions, discard others and identify new probelem areas. Using an affinity map, we were able to triage the main issues we needed to tackle:
- Improve service delivery and communication with users
- Create an easier and more intuitive user experience
- Design a user interface that is simple, consistent and aesthetically appealing
Affinity map of collated user pain points
I also used the insights from the research phase to create user personas based on our target and current audience. These users belonged to the following categories:
- 18–35 years old
- Smartphone users
- Students and young professionals.
- Maintain somewhat active lifestyles
04. Ideate & Sketch
As the team had already established, the flow for the app had to change in order to provide a simpler and more intuitive experience. I designed some sketches, then low-fi user flow wireframes and later designed the mid-fi wireframes.
Lo-fi app wireframes
There were different meetings were we tweaked the flow of the app based of our analysis of things and feedback from some users with whom we had carried out tests. Finally we reached a consensus and I designed the high fidelity app screens.
Hi-fi app screens
This project was interesting, to say the least. It did take a while to complete as there was a lot of back and forth with stakeholders. But it taught me how to be patient and communicate better.