Dashboard
Our quest to redefine user experiences began with instilling a shared set of values within our team. These values served as our North Star, guiding us through the intricacies of design and stakeholder interactions.Through meticulous research and data-driven insights, we unearthed pain points and charted a course toward our goals. From enhancing accessibility to streamlining transactions, every decision was rooted in improving the user journey.
Date : 10 Mar 2024
Bringing the team under a shared set of goals and 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.
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 and Metrics
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. Some of the pain-points included:
- Users were unable to find settings for their account unless they were told where they were.
- Finding the right service was difficult.
- People found it differentiate between decorative design and functional UI elements.
- Marketing ad banner at the top was distracting.
On the other side our business stakeholders wanted to improve on the AARRR a.k.a Pirate Metrics.
- How are people discovering the services and offerings in the product?
- Are these people taking the actions that they want them to E.g. Putting money in their account?
- Do users like to engage with the product?
- Do users like the product enough to tell others ?
- Do users like the product enough to spend money on our platform than our competition?
Using a cascading approach to defining UX metrics, we created the following goals and challenges for the design team:
- Make information and actions more accessible.
- Improve service discoverability
- Allow users to be in more control over their experience
- Make user journeys more closer to the user’s mental models
- Make completing a transactions even more easier.
- Give more importance to actions around the account balance.
Early Concepts
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.
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.
