I led the redesign for one of the largest and most actively used mobile wallets in South Asia, called JazzCash. I was onboarded on this project to lead the overall redesign of the application while managing the product/business stakeholders and other partners. I also contributed to this project in an individual contributor capacity, looking after some key experiences and doing hands-on design myself. The below project is one such example.
One of the key things that I did early on was to bring the team under a shared set of values that we can all relate to that are aligned with the overall organizational and business values. These values were to become a cornerstone as we dived into the redesign exercise and something we all kept coming back to whenever we felt lost or needed a reminder of what is the objective was that we all share.
These values were referred in every design critique and every stakeholder presentation. During our review sessions, every designer used to go back to these values and ensure that every experience being redesigned or designed followed these values.
Through our extensive research exercise of interviewing users and our business stakeholders, We uncovered the pain-points of the existing platform, These pain points helped us define our product direction and metrics for success. Key learnings from the user research:
On the other side our business stakeholders wanted to improve on the AARRR, a.k.a Pirate Metrics.
Using a cascading approach to defining UX metrics, we created the following goals and challenges for the design team:
.png)
We re-organized the header area to give the user balance a more central position and to make the related actions clearer and more accessible.
Our research indicated that the functions under the hamburger menu were not understood and there was not a lot of context of what goes in there. We created a new section in the app to manage account and made the function clear and obvious by placing it inside our new header.
We came up with a new dynamic notification area that replaces the username and can be used to notify the user of key account statuses like being eligible for a loan, running on a low balance, etc.
The existing design used too much of yellow and the research conducted previously showed the users leaning against these fully yellow icons, which look more decorative than functional. As a result we placed each service icon inside a container, gave it some elevation to seem tappable like a button and chose a visual language for icons that was less elaborate.
Not every user is the same. People use JazzCash for very different reasons and we wanted people to own their experience. With over 50 sub-services and growing, the users found it difficult to find their most used services if they were not part of the home
We introduced a My JazzCash section at the very center of our new home experience that lets users customize their top four most used services and place them on their homepage without having to go through the hassle of browsing through all the services every time.
We removed the promotional banners from the homepage, as our research indicated that they felt too forced and were not appreciated by the users. But at the same time this was prime real-estate used by Business to promote certain areas of the application and service. So, just below the personalized services area, we introduced the top picks for the users as promoted by the business with an ability to tag some services as either new or hot.
The older experience did not really have a tab bar but rather just three services at the bottom of the homepage. While we wanted to improve this experience, we also wanted to be vary of the fact that a lot of our users are used to finding these services at the bottom of the homepage.
We cleaned up the bottom bar to align it with the standard tab functionality and added a super search that lets users search services and also brought down the In Invite & Earn service to a similar right edge of the screen.
The research indicated that the help was not a very a widely used option from the bottom bar so we found a new place for it at the top of the home experience inside the wallet section to give it more context alongside our new notification center.
JazzCash hosts more than 50 payment services that its users use. We introduced a services drawer much like how the android app drawer works since over 95% of JazzCash users use Android OS and are super familiar with sliding drawers that host all their applications. For non-familiar users, we added affordance in the form of a drawer handle just above the tab bar and also made the functionality clearer through the app onboarding.
Instead of building the design system first, we built our design system along the way with every new screen that we were designing. After locking the initial direction of the home screen, we created re-usable components of the designed elements. With every new user flow to be designed, the designers would go back to the partial design system to see if there were any existing components to leverage. If no existing component was found, a new component or a derivative was created.
For every new addition to the design system, We would have huddles between the team to vet the component and plug it into the system for future use.
The redesigned, accessible icons helped users interact with the actions and find the right service. We conducted multiple SEQ and SUPR-Q tests where the new experience consistently scored between 6 and 7 in SEQ tests, and in the SUPR-Q tests the experience scored 4 and above.
The global search was introduced and designed as an experience to let users use the app in a way that made more sense to them. Helping users access services in a much more natural way.
The services were also logically organized under larger categories, like Money Transfer, Utility Bills, Government Payments, Entertainment, Donations, etc.
The customizable My JazzCash feature very quickly became one of the most used features in the application, with over 85% of users using it and customizing their most used services within the first two months.
The redesigned app header section enabled user to be more aware of their account status and take actions accordingly. According to our SUS studies, 100% of the users found the information to be in easily usable and accessible post the redesign.
