Home /Work /

JazzCash Mobile Wallet Redesign (Home)

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.

Bringing the team under a shared set of values

One of the key things that I did early on was to introduce a shared set values to the team that we can all relate to and our also inline 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 that we all share.

JazzCash Redesign Design Values

More than just words

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 re-designed or designed was following these values.

Research Findings

After a rigorous research exercise by the team, we were shared the following findings to base our designs and design decisions on:

  • Users are drawn to design which is more contemporary, and a little more playful.
  • Too much information on one screen of one place creates asense of confusion.
  • Meaningful icons and high contrast logos are importantaids to navigation.
  • Practicality is key, Interface should exhibitstraightforwardness.
  • Simplicity and minimalism allows users to focus on what they arelooking for, visual alignment and balance is crucial.

Early Concepts

JazzCash Home Concepts
Swipe-up Drawer Interaction:
Scroll down below to view the home experience transition from old to new in the left column.
The animation in the left column corresponds to the page scroll and description on the right side. (Hint: Scroll slowly)

Final Transformation

Improved profile and balance visibility

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.

From hamburger menu to My Account

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.

Dynamic Notification Area

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.

All new service icons

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.

Personalization for user and promoted services from business

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

My JazzCash for users

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.

Top picks from business

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.

A functional tab bar

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.

Services Drawer

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.

Light/Dark theme Ready

The re-imagined JazzCash also supports Light and Dark theme in line with the new design language.
JazzCash Haseeb Danyal Home-LightJazzCash Haseeb Danyal Home-Dark
⬅️ Go back to Haseeb's Work