Background

  • One is the state government ‘service aggregator’ providing access to 3,500+ services at the citizens’ fingertips.
  • Services pool is a mix of government services like utility bill payments, income and property tax payment, etc. and private services in the categories of healthcare, banking, travel, legal, agriculture and other areas.

Objectives

  • To analyse the existing application and identify improvement areas
  • To improve the user experience of the same

Research (via online reviews)

For research, I planned to analyze the reviews from Play Store and iOS App Store. This helped me to find what user primarily use the application for, which are –

  • To pay bills (Water, electricity)
  • To top up their Metro cards
  • Find other services like Police Stations, etc.

The app mandated the users to connect their mobile number to any bill services they use, which was a deterrent for many users who were worried about privacy.

Then, I focussed on their navigation structure and process flow for bill payments.

Analysis and Recommendations

Navigation

There were many critical usability issues in the navigation –

Reference screen with Annotations
  1. No “Search” Functionality to narrow down the list of options
  2. No logical sorting of Categories (e.g. Utilities) and Services Providers (ex: Aadhaar)
  3. Critical functionalities were hidden in the hamburger menu (“Quick return to Home” and “Help”)
  4. Navigation elements are unclear

a. Back option is incorrectly labelled as “More categories”

b. There is lack of pagination with the current style of presentation of services

Karnataka One has a website too (https://www.karnatakaone.gov.in/). I found that to be much more user-friendly.

Comparison of Web and Mobile Navigation patterns

Based on this analysis, I propose a “tabbed” navigation structure for the mobile app.

Redesigned navigation for the application

Sign-Up form 

The sign-up had following issues –

  1. Placeholder text disappears when user types into it, which could make it difficult to know which input is required.
  2. Disclaimer text can be hyperlinked as a modal to reduce the form length as it sent the “Register” button to 3rd fold.
  3. Usage of red colour in text can confuse user as it is commonly used for error messages.
  4. All textboxes should look identical and labels should always be above the text.

Usage of adaptive labels should make the form easier to fill up. Color palette could be aligned to the web version to make it consistent experience across devices.

Redesigned Sign-up form

Utility Bill Payment process flow redesign

Current process for payment of an utility bill was tedious. As a user, you had to choose city specific service provider, then, register the account on the app. This also required users to remember the appropriate service provider, which was an additional cognitive load.

Hence, I designed the screens for bill payment process. This shortened the process by 25%. Also, as it picks up the city based on your location, you do not need to choose a service provider, just the utility.

Colour and Type

The mobile app currently had a darker tone across the color palette. Also, it was not in line with the visual identity of their website. Hence, I decided to use the color palette from the site.

Changed color palette is much more vibrant

The typeface of the mobile app is Arial, whereas the website uses Avenir. Again, for consistent experience across web and mobile app, I decided to use Avenir as typeface for my redesign.

Prototype

I designed my screens in Sketch and created my prototype in InVision. Check it out here –

It was a lot of fun doing this project, but I’m sure I could have done things better and I want to improve my process, so feel free to leave a comment or send me a message if you have any suggestions. Shout out to the designers of the icons, which I sourced from Noun project. Thanks a lot for reading!



Source link https://uxdesign.cc/redesign-of-karnataka-one-mobile-app-2c7747dc1fce?source=rss—-138adf9c44c—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here