Re-imagining the UX of MyJio
I had long imagined using an excerpt from Lord of the Rings as the opening salvo in this case study, but since I am yet to succeed in that quest, here are a few disclaimers. The study and redesign are in no way associated with Jio and I took up this project in a personal capacity as a user of the App (who also happens to be keen on Design).
However, if someone from the Jio Team sees this and that helps in improving the product, would be glad that this was of help. I don’t have all the necessary context and business information to know why things are the way they are at the moment, and I have worked under certain assumptions driven by User Research.
What you’ll find below is a case study offering potential solutions to address some of MyJio’s problems, as well as ideas for future development.
Premise
A functional Data pack has become super important, almost a basic necessity in the status quo. And when the pack runs out in the middle of an important lecture, or a work meeting, or in the middle of when a grandfather is finally getting to see his granddaughter in a video call, you are caught flat-footed, followed by a mad scramble to do a quick recharge, and getting back.
There were many instances when I have had to do that, and the SMS reminders are often ill-timed, and not stimulating enough to warrant action.
Important information remains buried under a click, lack of adequate account controls, and it takes much more than a quick scan to find the data you are looking for.
Plus there is significant App Bloat, with offers and Ad banners proliferating on screens and everything bunched together in a quest to be the Super App.
I thought of listing down the issues, get feedback from other users on this, and put together an assessment on how the Product can be improved, which eventually morphed into this redesign.
Flow and Screens
I have preserved most of the Core functionality that people use in the App, and have collated the following information, based on Interviews and Play Store reviews.
The App has recorded over 100M+ downloads from the Play Store. Keeping the demographic in mind, I interviewed 18 individuals (who use the App) from various age groups. Here are some of the findings -
- 16/18 Users need to App to check Data Usage and Recharge.
- 4/18 Users use the new built-in JioPay feature for UPI-based payments.
- Every User had needed to contact support at least once. (contact support viz. Call/Text Customer Care, Visit a Local Store).
- 12/18 Users do not mind Jio adding their other offerings as long as it does not inhibit their Primary purpose viz. check Data usage and other Telecom stats.
- None of the users we interviewed used MyJio as their primary app for entertainment.
Therefore, I condensed down to 3 main purposes that people used the MyJio App for — Track Usage, Pay & Recharge, Access Customer Care, and made 3 Primary screens.
And since this process strips all the other Entertainment components viz. Music, TV, Engage, etc. it can also be rebranded as something like MyJio Lite, as stripping down features would also reduce the Memory footprint.
Pain Points
I listed most of the Pain points that came up in my experience of using the App. I arranged them categorically which would later come handy for designing solutions for more than one at a time.
More Research
18 is obviously a small target set to work with. And coupled with my own opinions, the ideas are likely to be biased and the solutions would not yield the best results. To get a broader view of the areas where the Product can have some improvement, I tapped into one of the likeliest sources — Play Store Reviews. I went through quite a few and collated some of the many that echoed the problems I was solving for.
This led to the conclusion that -
- Not finding the information you’re looking for is quite common.
- The majority of the reviews talk about App Bloat, Network Coverage, and inaccurate Data.
I cannot do much about Network Speeds or coverage but we can take care of the App Bloat and re-do the flow and layouts so that navigating and digesting information in the App becomes easier.
Objectives
After considering the data, user reviews, and the pain points I had identified to work on the improvements, these are the few areas I identified as high-level objectives -
- Reduce the number of screens the user has to go through.
- Reduce scrolls/clicks required to perform a task.
- Keep navigation unidirectional as much as possible (in this case, Vertical scroll)
- Implement a consistent Visual Aesthetic.
Business Objectives
- Improve visibility of the Core offerings.
- Facilitate more transactions in-app.
User Flow
By condensing down the main feature set in 3 primary screens, I tried to ensure that all the necessary user actions are one Swipe/Click from the Home page. Leveraging the Mental Model that people already have from using WhatsApp, I used a 3 tabbed layout with Home as the Landing screen
- Swipe Left to access Support and Care options.
- Swipe Right to access Payments.
- Main utilities viz. Recharge, Call Customer Care, Check Profile, and View Offers are all visible as a persistent Bottom Navbar.
The new Home layout solves most of the Pain Points of the old design. I decided to use Progress Indicators to build a visual widget to show Data Usage as —
- The visual representation led to more people getting to see and understanding the amount of Data left in a glance.
- The Avatar with the number linked to the account and the down caret opened a popup with available accounts and was an intuitive mechanic used to switch through accounts.
- Add Avatar was an Icon floating on the right.
- The number of Sliders also indicates how many Data packs are active and the one on top shows which of the Packs are being used currently — since the spending hierarchy is that Daily quotas are exhausted before moving on to additional Data Vouchers.
- The Horizontal Carousel shows the type of Plan, Call minutes and SMSs left.
- The Recharge For Me and For a Friend is prominently visible in the same place in the opening viewport.
The idea was to collect as much actionable information as we could into the viewport and then add options to check out other peripheral offerings like JioCloud and JioSecure.
You can play around with the Prototype here 👇
The Pay section of the App was pretty much straightforward and did not need a complete overhaul. I removed the Ad Banner that had cropped up in the middle, tweaked the Icons to be more consistent with the overall style of the App, and called it a day.
There are two further issues when it comes to handling Payments in the App -
- There is no mechanism currently to go back and select an alternative mode of Payment. You have to re-do the entire flow right from picking the Voucher/Recharge Pack again.
- You cannot undo wrong Payments or recharge in the wrong numbers.
To address these, we simplified the user journey by adding two components -
- A Back button to go back to select a new voucher/pack.
- A confirmation modal window as a safety hatch.
The old flow forced users to go through the entire process if they wanted to change just one of the selections, and that I figured was problematic and unintuitive.
The new flow just lets you do a simple back and forth to select or re-select your options without having to go through the entire flow all over again.
This makes the process far more intuitive and also helped the user when they want to make a re-selection of a Coucher/Pack/Payment mode.
The addition of the confirmation Modal also ensures that there is far less volume of users hitting the back button after reaching the Payment Info screen, and even then, they can directly land on the Select Payment mode screen to select an alternate Payment mode.
The confirmation modal has 4 main components —
- The Details Card that shows which Voucher is being purchased, till which date is it valid, which number is being recharged.
Certain financial and Tech restrictions might take away our ability to undo wrong recharges, but by adding an extra confirmation layer, we reduce the probability of an error happening. - It shows the mode of Payment that will be used.
- The close button to close the modal and select alternate voucher/pack/mode of payment.
- Proceed takes you to the screen where you enter the payment details.
The Care Section of the Original App looked and felt completely different from the rest of the App. Also, it had its own differently styled Search bar which would lead to fragmentation of the in-app Search infrastructure as well as confusion in the Users’ minds on whether the different kinds of search bars would yield the same information.
I redesigned the Care Section to be more in sync with the visual aesthetic of the rest of the App.
Condensation of the App into its more useful components (resulting in what can become Jio Lite) helped in creating a more cohesive screen architecture instead of the free-flowing unending scrolls of the original App, but we still have to address four main areas -
- Navigation (These 3 screens are accessed by just swiping Left and Right from home) for other screens.
- Notifications (since we have removed the ubiquitous bell from the old action)
- Account Controls.
- Consistency in Iconography.
1. Navigation
Initially, the idea was to use what Jio had originally done. Add more tabs in the top navigation bar, or put the options behind a menu accessed by swiping right from the Edge.
But in the course of the research, we realized that these are the main components that Users want access to all the time, hiding it behind a swipe or click seemed to lack rationale. Hence the Bottom Bar, which persists across most of the screens and gives a one-stop shortcut to Offers (More on this later), Profile, Recharge, and Support.
2. Other Screens
We would look into 2 additional screens that were revamped and some elements from the previous screens were shifted in here — Locate & Offers
Locate (Accessible from Care Screen)
The Locate feature is accessed from the Care screen and is used to find Jio Stores, Service Centers, and Hotspots around the users’ location.
This is an extremely handy feature and we gave it a Google Map-esque treatment to display the nearby outlets.
Outlets appear in a horizontal scroll and the type of outlet that the user is looking for can be switched by using each of the 3 buttons above the carousel.
The Carousel Card went through several iterations before its current avatar, which is -
- Visually similar to Place Detail Cards that appear on Google Maps.
- Has the necessary information and CTAs. The CTAs adhere to the Visual language of the rest of the app.
Offers (Accessible from Shortcut in Bottom Navbar)
It is not possible to separate Shoppers from Offers, or if not shoppers, any user on a Platform that has some sort of ongoing transaction.
And since I had done away with all the Ads and Banners from the other screens, I added a dedicated Offers page accessible from the Navbar Shortcut. Here, the user can browse and go through umpteen different deals, offers, Vouchers that the Platform has to offer, and it is just a click away.
And as per our research, 11/18 users do not leave the app without checking if there are any new offers. This collection of all Offers and Coupons in one place makes it easier for the users to browse and pick the deal that is the sweetest for them.
But the question is, how do we entice them into opening Offers every time to check for new ones? Enter the revamped Notification System.
3. Notifications
For a Product that is supposed to help you perform actions quickly, be it, recharging your Phone or that of your Friends and Family, Notifications are needed to be in your face to deliver a sense of urgency.
Paying Bills, Recharging Phone, etc. these require reminders. At the same time, you need Notifications informing you of Offers to be silently enticing, drawing you to click. To strike a balance for both, we built the Notification System for the app around Notification Dots and Banners (that you can dismiss with a swipe).
- The Notification Dots are supposed to give the sense that you have a notification for something that you should check. They evoke a Primary response for the user to click on that relevant icon or shortcut which would then reveal more detail.
- Banners deliver the detailed information and since they appear on the relevant page where you can take some action corresponding to the Notification.
For example, the Banner for “You have a Bill due tomorrow” will appear on the Pay Page so that you can directly take the relevant action and swipe it away.
I had come across another nice article on designing Notifications that I used as one of the inspirations. Find it here.
4. Account Controls
It was surprising to learn that anyone can log in with someone’s Jio number on a device as long as they can access the verification OTP (as of the time this article was written), and once they get in they have access to all personal and KYC data, financial records, and there is no way to remove that particular device.
Another recurring problem was that the Jio Customer Support was not super helpful in removing these problematic sign-ins from other devices.
To solve this, I added a new screen — accessible from the Profile Screen that allows you to see which devices have logged in with your Jio Number and an option to remove them.
You also get a Notification Dot and Banner that delivers the urgency for the user to see the message and take action.
The Notification Banner coupled with the controls takes care of the issue of Access misuse by letting the users remove any device that seems suspicious.
However, there should ideally be layers viz. authenticating again with a One-Time password or otherwise before doing the action of removing the Device to prevent users from mistakenly removing their own devices.
5. Iconography
The use of Icons in the original app was really inconsistent and multiple glyphs were used at places to express the same item/option.
Furthermore, the styling of the icons differed and the app (last I counted) had around 6 different types of Icons used in different places.
To address this, I crafted a whole new set of icons (not from scratch) with generous help from Feathericons. Taking the relevant vectors as Base, and often mixing and matching icons, I arrived at the new set of icons that have been used throughout the re-design, and this set only has two variants.
Vectors with white lines to be used on dark bases, and the rest of them, colored.
Conclusion
This was a long project, coupled with the research and sketches and took a month to fully materialize. However, the delays that kept pushing it back worked to my advantage as it lends me a fresh perspective every time I went back to the drawing board, picking up one detail or the other that I had missed earlier.
It allowed me to learn in the process, pick up newer bits, and re-evaluate decisions.
Key takeaways
- After doing a user review with 10 of the previous 18 research participants, received some really encouraging feedback. In gist, they loved the do-over, but had a few implementation kinks that would require the Tech Team to intervene (but still, validation, yay)!
- Writing helps. It helps you identify and rationalize certain decisions that you had accepted without question earlier. I found some silly mistakes in the designs when I started writing it down, and that allowed me to course correct.
- Iterations help. But have a base case. Stop after a certain time/iterations and pick the best one. Explore possibilities but with an eye on the clock. It’s easy to spiral down the Rabbit hole.
- Figma Mirror is a blessing. Helped a lot in figuring out the usability and sizing of components.
Thanks for taking the time to read this huge article.
A more visual exploration of this case study would soon be up on Behance. If you think there are some gaps or mistakes, or you have some alternatives and ideas to a few things implemented here, do comment/reach out to me. Would highly appreciate any feedback and/or criticism.
Resources
Here are a few resources that kept on teaching and feeding me nuggets of ideas throughout the process.
