How not to design an experience — Paytm: App Review
A comprehensive review & analysis of the UX design in India’s favourite online wallet app.
Paytm has become something of a phenomenon in India. With a catchy name and very recognisable brand identity, Paytm has become one of the most used and accepted phone-based services across the country in the past 9 years, garnering a user base of over 200 million people.
In this review, I will go through the entire Paytm experience and try to summarise what contributes to a good experience and what doesn’t.
Disclaimer: This review is entirely from a UX standpoint. This should in no way be mistaken for a service review.
In this review, I go in-depth with some of the tiniest subtleties of UX design, which might seem insignificant and futile to readers with no background in the discipline.
Too Cluttered
When you launch the Paytm app, the first screen you’re greeted with is this:
The way UX has evolved, we have been moving in the direction of minimalism since forever. Up until about 15–20 years ago, the rule of thumb used to be you should be able to get from anywhere to anywhere in an interface with a maximum of 2 clicks or selections. The problem with this practice was that designers ended up putting too much content on every screen in order to fit everything into a 2 click radius from everywhere, making the interface too overwhelming for the user. Soon, this rule lost its significance and interfaces everywhere made a shift towards minimalism.
Paytm’s home screen itself presents a truckload of options, many of which are avoidable as I will show you ahead. This creates a poor user experience, as the user is overwhelmed with options and doesn’t see a clear path of flow of control or any sort of hierarchy or prioritising in terms of which functionalities are more important than the others.
The 5–9 Rule
According to the research of users and behavioural sciences, humans can remember only about 7 things at a time in their short term memory. Designers were therefore encouraged to provide just 7 ± 2 options (5–9) at a time on any given interface to the users.
Paytm doesn’t obey this rule. The home screen (image attached above) shows that there 18 choosable buttons on the first screen itself.
Redundant Buttons
Many of the buttons available on the home screen have been added without any added benefit. These duplicate buttons are redundant and add to the unnecessary clutter.
- Pay and Scan:
Both of these options do the same job and are accessible at the highest level of navigation (“Pay” is technically not at the highest level of navigation but when a user opens the app to make a payment, the homepage is the default screen so practically “Pay” can be treated as top-level navigation).
2. Shopping and Mall
Again, both of these options do the same job and are practically accessible at the same level of navigation.
3. Passbook
Poor Information Architecture (Inadequate Navigation Menus)
The purpose of navigation menus is to envelop options and buttons that aren’t essential to display to the user at that point. They help reduce clutter and set up an obvious hierarchy of functionalities. Navigation menus can be dropdown menus, hamburger menus, etc. Information architecture is the sorting of content and functionalities into menus and hierarchies.
The concept can be illustrated with an example. Imagine a designer needs to design a website with the following list of features:
Instead of creating a link to each of these functionalities on the top-level navigation menu at the top of the website, the designer creates a hierarchy as shown below and adds a link to only “Home” in the top-level menu, adds a link to services in Home, and so on.
Paytm has been unsuccessful in capitalising on the benefits of a robust navigation menu system. Paytm has laid out all the possible second-level options on the top-level itself. For example, Paytm has a feature called “Recharges & Bill Payments.” It’s possible to recharge your phone balance, pay your electricity bills, etc in the Paytm app itself.
A portion of the home screen looks like this:
The options “Mobile prepaid”, “Mobile postpaid”, “DTH” and “Electricity”, all come under the Recharges & Bills Payments feature. Upon tapping on any of these, we find this screen:
In this screen, we have the choice to go to any of the top-level options (which had individual buttons on the previous screen). “Mobile”, “DTH”, “Credit Card”, “Electricity” are all available here in the segmented control at the top of the screen.
It would make for a much richer experience if the (first) home page wasn’t crowded with so many secondary options and the home page just had one button for “Recharges & Bill Payments”, after which we find this screen and choose the type of payment we wish to make.
Similarly, the Paytm Travel options “Train tickets” and “Bus” in the second row of image 1 can be enveloped into a single button for Paytm Travel on the home screen and all the secondary options in a segmented control on the “Paytm travel” screen.
A portion of the home page of Paytm’s current information architecture (sitemap) looks something like this:
There are only two levels of navigation — cramming the page with too many options at the same time. My proposed version of the sitemap this same section with a multi-levelled hierarchical structure would be:
Here there are 2–3 levels of navigation, providing fewer options at once.
Paytm should work towards filtering the volume of options so that the user is exposed to only a small number of choices at any given point in the experience.
The search bar on the home screen
The home screen contains a search bar at the top for users to search for features within the app. There are two problems with this.
Why is there a search bar?
First off, you know an app experience is poor when the developer needs to provide a search bar to look for features within the app. The point of UI/UX design is to make an interface so intuitive that the user doesn’t require any assistance in finding the feature he is looking for. Search bars are good for searching in a database or sifting through a large set of data, but definitely not to search for functionalities or content built into the app.
Even if they do feel the need to provide a search bar, it would make for better user experience if it were hidden and only appeared once it was directly called.
Unintuitive design
Leaving aside the fact that Paytm felt the need to build an in-app feature searching tool, let us examine the search bar itself.
The search bar bears almost no resemblance to the conventional search bar. There is no magnifying glass glyph/icon, no placeholder text, no label. The only resemblance it holds is the white container text field. Typically speaking, search bars aren’t covered by 100% opacity blue coloured brand logos. I didn’t even realise that this is a search bar until I accidentally tapped on it.
The problem here is that a user wouldn’t be expecting a search bar at this point in the first place, and much less one that is presented so poorly.
Poor UX writing
One of the 5 tab bar options in this app reads “Inbox”. Judging from the word, one would expect that inbox is some sort of direct message or chat functionality or maybe even just a personal notification centre, but that expectation is not met. What you find is a generalised news feed about what’s up around you and a section for games.
These tab bar titles are supposed to summarise what you would find in that tab but “inbox” gives a completely different expectation from what you find.
Here are a few instances of the “inbox” title being used in popular apps, and what you find upon tapping on it.
1. Outlook
Inbox here contains all the emails that the user received on that address.
2. Gmail
Again, inbox here contains all the personal emails that the user has received.
3. YouTube
Here, the inbox tab contains personal messages and personalised notifications.
4. Nike Training Club & Nike Running Club
Here too, the inbox contains personal messages and notifications.
I think it is evident from all of these examples that the word “Inbox” has a familiar tinge to it and sets an expectation in the users’ mind, which Paytm fails to meet. When someone reads “Inbox”, they definitely don’t expect to find a generalised news feed and gaming console.
Not optimised for the newer iPhones
The app hasn’t been designed to suit screens of iPhones from iPhone X onwards. The notch at the top in the newer iPhones needs to be considered while designing apps in today’s landscape.
There is no margin left at the top of the container in these screens. The Paytm logo is placed too close to the boundary. This might seem inconsequential, but what I am stressing on here is the implication of this design flaw. It is indicative of the lack of consideration towards newer iPhones while designing this app in general.
French composer Claude Debussy said that music is the space between the notes. The same can be said about whitespaces and transitions in design. What builds a good experience is the subtleties that come between the visuals.
You might think that this seems like an extremely insignificant error, but these are the tiny things that make the app seem off and subconsciously ruin the experience.
Not a fluid experience — lack of elasticity (bounciness)
One of the principles of making a fluid interface is to make sure the container has got some elasticity. When you’re scrolling against the edge of a screen it should feel like you’ve reached the edge of the screen. It shouldn’t feel like a frozen screen.
Paytm doesn’t abide by this principle. The screen doesn’t bounce back once it reaches an edge to indicate that there is no more to scroll through. The app looks frozen:
An example of a scrolling view that obeys this principle is shown below for the sake of clarity:
This elasticity is especially important because it makes the interface feel more natural, and therefore more fluid — like an extension of the self.
These tiny details are what contribute to rich user experience.
3D touch (iOS)
The purpose of 3D touch is to augment and quicken the experience by adding options for rapid usability. It provides a short cut to functionalities. In the home screen, each app ideally has its own 3D touch side menu which should provide quick access to the most essential features of the app. Not every app manages to filter out and select the most critical functionalities accurately, but Paytm totally nails this.
The wallet and the scan & pay options are what lies close to Paytm’s core and so it is extremely fitting that the 3D touch menu provide these two options for quick access.
Kudos to Paytm for this, but unfortunately this is all the 3D touch there is in the app. Whenever an app perfectly nails the external 3D touch menu, it sets up an expectation that the entire app integrates 3D touch perfectly everywhere. Like WhatsApp does, for example. Or Instagram. But to my dismay, 3D touch isn’t visible anywhere else in the entire app.
Other poor UX decisions
Miscellaneous instances of goof-ups in the Paytm app UX.
1. Darkening of background with sliding overlay menu
A darkened layer on the background seems to slide up along with the overlay as opposed to an organic self-darkening visual, which seems more natural as demonstrated below:
2. Too many options in sliding segmented control
Segmented controls are supposed to have only a limited number of options. Up to 4–5 options is a lot. Any more than that and it gets frustrating to navigate and keep track of what all the options are.
In the Recharges & Bill Payments screen, Paytm has built a segmented control with 14 options. This makes usability especially difficult.
Normally when a larger number of options are to be provided at once, a drop-down menu or picker is used. The options are more easily scannable in these formats.
3. Absence of seamless transitioning.
Transitions and whitespaces do the same function. They are to design what the spaces between notes are to music.
In the gif below, the transition from home to notifications looks too mechanical. There is no animation. This makes the experience feel less natural.
Web design practices in the app’s design
It is evident that the mobile app has been heavily modelled after the Paytm website. Lesser emphasis on transitions, less fluid interface, lack of device-specific optimisation, and even more cluttered interfaces — these are all practices employed in web design.
Web design and app design have some very different requirements because of the difference between the contexts of the two platforms.
For instance, at the bottom of the home page, there are 4 “footer” links. This is a design convention encountered in almost every website. This convention does not normally apply to mobile app design. This seems to have been taken right out of the website.
The Paytm app home screen is a long scroll view presenting a lot of horizontal scrolling collection views with offer details and items and services Paytm provides. It has been designed to showcase to the user a preview of what to expect from the entire app. This, again, is a web design practice. Apps are built to be more functionality-oriented and less content-oriented. Apps show rather than tell.
It seems like this is the fundamental problem with the entire app’s UX design. The Paytm design team has confused web design practices with app design practices, producing an experience that would’ve worked much better on the web. It is no wonder that the Paytm website is absolutely perfect by conventional UI/UX Web design standards.
Consistency
This is one area where I have no criticism. Paytm has built an extremely consistent system in terms of look & feel. Paytm has maintained a rhythmic combination of dark blue (#002E6E)and light blue (#00B9F1) and thematic arrangement of visual elements all over the app. The feel of the app is more rigid and choppy rather than fluid, but it is consistent nonetheless.
The two primary parameters of any app are usefulness and usability. Usefulness has to do with how useful the core functionalities of the app are — how useful is the idea. Usability has to do with how well executed is the app — how intuitive it is, how good the experience is. When it comes to usefulness, Paytm has absolutely nailed it. The app idea and functionalities are extremely useful and are obviously the reason for their success. The usability of the app, however, needs work in some areas.
I hope that this review might’ve helped shed some light on the areas where Paytm should be directing their resources to produce a richer experience, and at the same time has helped you understand what not to do while designing your own interfaces.
