App Overview

Pockets by ICICI Bank - One Wallet Endless Possibilities. With Pockets, you instantly get a free VISA card that can be used for shopping, retail stores even if the user is not a ICICI Bank customer. App helps in prepaid-postpaid mobile recharge, DTH or utility bills. Send and receive money securely, book movie tickets, purchase gift vouchers with a Pockets savings account. Pockets aim is to become a pioneer in Digital Banking.

I expect a service similar to or better than PayTM which I use on a daily basis. I would imagine that Pockets will cover a multitude of features which I can benefit from.

First Impressions

I’ve downloaded Pockets app and tried to use it for the first time. The apps UI feels cramped, over stuffed from the start. This is recognisable as you land on the splash screen section of the app. Let me walk you through the app features like the initial Launch/splash screen, Walkthrough section, Landing page & the Payment screens to give you a highlight of my thought process to make the app look and feel better which results in better user engagement inside the app.

In this experiment, I'm focussing on improving the UX/UI of the app in a minimal way which can lead to user engagement conversion. As there is no metric data available. I'm going to pitch the UX changes solely based on my Hands-on experience in the design industry.

Splash Screen

Devices come in all shapes and sizes, therefore splash screen needs to be as scalable and viewable in a variety of sizes as well. Splash screen are supposed to highlight the branding of the product. The apps launch screen should be as minimal and light weight as possible to give a subtle experience to the user.

Have a look down below where I’ve posted the current design of the app and a version which I feel works better for the app.

Dezinr-ICICI Pockets-Screen1

My updates to the design

- I’ve reduced the logo size to give it a more central feel to establish branding in the users mind, even though it stays for a brief second.

- The colourful lines have been removed coz they distract the user and reduce the level of focus on the logo when you look at the splash screen.

- I removed the Loader as well because, we can set up a time span after which we can display it when in case, the app hangs up or doesn’t respond through which the focus always stay on the logo.

App Walkthrough Screen

A more than perfect walkthrough is very essential in making users aware of the features and benefits of using the app and to indirectly ease the user into the complexity level of the app.

Let me break it down even deeper into specific points which made me feel what the walkthrough section lacks:

- It doesn’t give a complete integrated and contextual experience.

- UI issues which can be fixed to make it better.

- The app has a timer which makes it auto slide to the next slide, But it doesn’t respond when the user tries to go back or coz of the auto timer, it jumps slides as well, making it a bad experience.

Dezinr-ICICI Pockets-Screen2

My updates to the design

- From the splash screen, the logo animates/transitions and slides to the top of the screen to give space for the artworks.

- The grey lines have been removed from the background to keep the layout clean and minimal to have more focus on the content and the context.

- Title and body text have been worked and spaced out to tell the story better to the users.

- Pagination dots has been greyed out in style to reduce the focus completely and still be present on the screen for information sake.

- Button has been brought front and a bit on top to reduce the friction between the bottom navigation actions from Android platform (the app shares a Metro UI between iOS and Android). It also helps in iOS as the best apps in the market like Facebook, Instagram have changed to a floating button as it reduces friction between the user and the hardware when aligned down.

- The T&C text are very important but are ignored by the users, so have moved it below the button as it can be ignored and present at the screen as well.

Phone Verification

In mobiles, SMS is a core functionality and a mobile device is assumedly always with the owner. When user creates a digital asset or account, they are prompted to enable a two-factor authentication system, apart from the usual username and password. When the user tries to login, the system sends the temporary password to the registered number for user authentication.

In this screen we are trying to register the number with the Account ID for successful app login verification for later use.

Have a look down below where I’ve posted the current design of the app and a version which I feel works better for the app.

Dezinr-ICICI Pockets-Screen3

My updates to the design

- I’ve reduced the navigation bar size to keep it in consistent with other universal apps of 128px including status bar, which gives more real estate for the content below.

- Navigation bar colour has been changed to lighter shade of grey as I wanted to have more focus on the CTA action all across the app UI. More white the better, makes the UI look more visually spacious.

- Artwork has been removed as it adds unnecessary visual clutter to the screen layout. Goal was to push the user to verify his/her mobile number with ease without any distraction. Also having the artwork makes the screen transition jarring as the layout moves to give way for the keyboard.

- White background has been used in the layout area to give more clean look and feel.

- I’ve used the line as a text placeholder to have consistency. In the current build, they use text box and line which breaks the visual language of the app. Also I’ve removed the icon here and added “+91” in grey color to add more emphasis on the mobile number insertion.

- The Important notes section has been completely greyed out as most of the users ignore the section completely. I, on the other hand have spaced in such a manner that it site perfectly below the CTA action without taking much focus from the user.

- I’ve retained the CTA colour (Orange) all across the app as it builds more visual brand identity across the app and also the blue shade which is there in the current design doesn’t add any value as it’s not used anywhere else in the app. Goal is to have and build consistency in every single way possible.

- I’ve tried my best to keep the screen layout in one single view without any movement of elements to give a straight forward frictionless experience to the user.

Authenticate Account

Every ICICI Bank customer are issued a Debit card which contains a grid of numbers linked to specific alphabets which help in authentication for online transactions. The app also uses this authentication for the login/signup purpose, after the mobile number has been verified.

Below, as you can see I’ve designed a layout keeping the content from the current design in mind and reference.

Dezinr-ICICI Pockets-Screen4

My updates to the design

- Toned down the multi title/header bar into one single title “Authenticate Account” and placed it in the nav bar.

- Started the design iteration and by making notes of the primary action required by the user and grouped them accordingly to create better place holders.

- As a image of the card is used in the current design to educate the customer to use the grid numbers, I went a step ahead and created a flat skeuomorphic layout of the card on the design, which also can be used as a real estate content holder for the Account elements and details. This particular design ideation was created to increase user engagement and capture there attention through intuitive UI elements.

- Account number can be viewed and changed on the go as in the current design. User can also add the number to the text boxes as the grid layout matches the physical card layout.

- T&C text content which are always ignored by the users are again placed here in a small but readable text manner with a light grey text colour.

- Floating button keeps things consistent and adds more value to apps UX as mentioned above.

- As mentioned above, I’ve tried my best to keep the screen layout in one single view without any movement of elements to give a straight forward frictionless experience to the user.

Landing Page

The landing page slightly looks intimidating and confusing as there is no specific area of focus to start with. Additionally, I was surprised by the vibrant use of colours for the features. Even though it might have been designed with a youthful personas in mind to make it more enjoyable. It adds a lot of visual load to the eyes while using.

The apps UX can be improved more by making the app feel more lighter as there is a lag while using any type of feature built in the app.

Pockets doesn’t follow any native UI/UX approach as it follows a Metro UI approach to keep it in sync between iOS & Android platform. The app has to be seamless to create better user engagement and should be able to communicate to users from the start.

The app is not perfect. Lot of data driven UX/UI decisions can make it more stronger and to build a lean UI which caters to users needs.

Dezinr-ICICI Pockets-Screen5

My updates to the design

- Orange is the brand color of the ICICI Pockets app, so I used the color to highlight the wallet digital card by using it as a extension of the navigation bar.

- Every card of ICICI has a layout which has been inspired by physical cards, so I thought of creating a white card which can be themed later on as well, depending on the app metrics.

- The reason to use white layout for the wallet card was to make sure that the content on the card is properly highlighted, including the CTA actions as you can see above.

- CTA has been enlarged on the wallet card to push the users more in the direction of using the app and its benefits by adding more funds into the wallet.

- Menu icon has been retained to keep the multi level usage of the app.

- Chat icon has been changed to notification to easily recognise its feature more precisely as there is not chatting or conversing functionality.

- User can also swipe left and right on the card as before to access other cards linked to the ICICI account.

- Tab bar has been introduced to the UI to make the navigation more easier and to build engagement. Features like the bank, shopping, bill splitter has been hidden in the menu bar, which is bad UX behaviour and many apps are trying to get rid of it completely.

- The features related to functions like Pay, Shop & Bank add a lot of visual clutter to the layout as its hard for there to focus on one element at a time. So I’ve toned down the colours completely to create equal emphasis on the features displayed.

- I’ve even removed the horizontal scroll as its a bad UI coz it hides the features which may be required for the user and the layout can easily house 5 elements in a row with pixels to spare for tappable areas. Even icon in the content is around 60px which is good enough to be easily accessed by the user.

- I’ve introduced a Iconography theme to the app to keep it more consistent. Every single icon on the current app doesn’t match each other as the pixels, width, length, height doesn’t match. Matching icons and themes also build a strong visual branding across the app.

- Ads also’ve been made accessible through vertical scroll, which is more easier than the horizontal scroll and creates more engagement as there is less user friction.

Send Money to Friends

I've considered a flow related to transferring the money to friends or peers through the app and tried to do more UX break down to make the apps use case simple and better.

Tapping on the "Send Money" feature on the landing page, gives option for the user to send it through "Mobile number, Registered Bank Accounts, Send through UPI" in a list format which is a native behaviour of both iOS & Android platforms. Current app uses a segment bar which adds a lot of visual load to the layout making it hard to use.

Below is a screenshot, which shows my thought process compared to the current app.

Dezinr-ICICI Pockets-Screen6

My updates to the design

- In the current design user has to tap on the menu and click on the option to move back to landing page, which is nonsensical when it comes to UI flow, so I started iterating the design layout by adding the back arrow first.

- Merged the title and header text into the navigation bar.

- Introduced a dropdown styled textbook which can house the details of the “To“ & “From” account to differentiate from the other text input sections which user has to fill to more forward.

- Screen also has been designed and broken down into pixels to calculate the exact spacing between elements to make it visible in one single view at all times, even with the keyboard on top.

- Icon have been removed as the current app uses colourful icons which takes the focus away from the CTAs. I did try out the greyed out icons but it was adding too much of elements on the screens which made me remove them completely.

- All the CTAs are kept orange in color which user can access like the wallet money, Contacts list, and CTA button to keep it upfront for the user at all times and still minimal to look at.

Transfer Confirmation

The final summary view to completing any type of transaction should be simple and easy. The current design makes it look heavy with a lot of elements showcase in it which are not required.

I’ve breaker down the design which you can see below into a simple UI which makes it look way easier than it is.

Dezinr-ICICI Pockets-Screen7

My updates to the design

- I took a detour from the current app design and created a popup for the confirmation like PayTM, coz this adds a lot of minimal approach to the UI where user can tap on the CTA and proceed or tap on cancel or on the black overlay to return back to the previous screen to edit.

I believe that Pockets might become a successful app of ICICI Bank in the next couple of years. The more data they collect from the users, the more then can ideate to create more user engaging app UI. I do see them as a potential candidate in the digital wallet industry. But for now there is a lot of improvement needed in terms of both Ux/UI within the app to make it more useful to the user. The bugs in the app which makes the app lag is even excruciating to use.

I really wish I could spend more time to create and ideate more concepts of screens and sections to make it a better app. Let me know what you think of my thoughts towards the app.

Thank you for checking my work!