Simplified KYC form and Dashboard Design for Indian Oil Website - Personal Project
Responsible for
Team Lead
UI/UX Design
Usability Testing
Team
4 UX Designer
1 Developer
Timeline
2024
IndianOil is India's flagship Maharatna national oil company with business interests straddling the entire hydrocarbon value chain - from refining, pipeline transportation & marketing to exploration & production of crude oil & gas, petrochemicals, gas marketing, alternative energy sources, and globalization of downstream operations.
Problem
A few days ago, I encountered poor UX while applying for a new gas connection on the Indian Oil website. After logging in, I filled out and submitted the form for a new connection and received the application number via text message. While I saw that I could check the status of my application by entering this number, I couldn't find any status option on the website.
For 5 to 7 days, I was confused because there was no clear flow or guidance, leading to frustration for customers trying to reach their goal quickly. It became evident that there were several issues with the navigation and usability of the site.
The Process
Collaboration
We were a team of four members participating in this project. After planning the redesign of certain workflows, I encouraged my colleagues to join this interesting government initiative. Although they had limited availability due to their professional commitments, their enthusiasm for the UI/UX field ultimately led them to participate.
We identified crucial problems that needed impactful solutions. Following this, we conducted numerous meetings to determine the workflows we could improve to enhance user experience. Specifically, we focused on the KYC (Know Your Customer) flow and the dashboard flow, where I had previously encountered challenges.
Usability Testing
There were many usability issues in the KYC flow and dashboard flow, making changes crucial. To address these, we conducted usability testing using heuristic evaluation techniques, as well as heat maps to analyze user engagement, clicks, and scroll behavior.
Analytics Review
Analyzed conversion rates and bounce rates.
Identified which pages users engage with the most.
Examined search terms used by visitors on the website.
Explored keywords to understand the reasons behind user visits and their goals.
Analyzed user demographics, focusing on age groups to better understand our audience.
Social Media Channel (Youtube)
We gathered feedback from the YouTube comments section to understand user issues related to the customer portal, specifically regarding various tasks. We collected valid user pain points concerning new gas connections and the dashboard. After compiling this information, we conducted a thorough analysis to determine the improvements we could implement.
User Interview
We conducted interviews with several local users. Initially, we faced challenges finding users to interview and identify their pain points. However, we realized we could reach out to our relatives who use the Indian Oil customer portal. After convincing them to participate, we held engaging interviews. We prepared questions specifically related to the KYC flow and dashboard.
Ideation Workshop
We held several meetings to define the objectives for each task and discussed all necessary requirements. During these sessions, we encouraged idea generation from all team members. We valued everyone's findings, ideas, suggestions, and feedback. Each workshop concluded with a clear plan for how to move forward after completing a particular task.
Wireframes
Based on our findings and ideation sessions, we created several wireframes for each task, assigning individual responsibilities to all team members. We then held a conclusion meeting to review all wireframes. Based on the feedback received, we iterated on the designs to improve them further.
Before
Problem
The heading conveys a negative message; it should be revised to reflect a more positive tone.
The "Other Services" section is not working, functional, or appropriate to include here.
The "Commercial Connect" button functions the same way as the "Submit KYC" option, which may confuse users.
After
Solution
Easy-to-use and accessible UI
Improved heading with a more positive tone.
Updated the two sections with implemented icons and cleaner content copy.
Before
Problem
Updated the two sections with implemented icons and cleaner content copy.
There is only one option to select, but a radio button is used, which may confuse users.
There should be an additional scheme for Ujjwala, as provided by the government.
The hierarchy is lacking.
After
Solution
Improved the overall UI layout for the two schemes, implementing the Ujjwala scheme so users can easily scan and identify the appropriate option for them.
Enhanced the hierarchy for better clarity.
Improved the button label to "Submit to Get Started."
Added instructional points for better guidance.
Before
Problem
Progress bar appears static and isn't aligned properly in the layout.
Form input fields have a poor layout and lack visual coherence.
"Relative Name" and "Mother's Name" fields are separated and not grouped logically.
Address labels are unclear, and there are repeated labels causing confusion.
Form lacks a clear grouping system for related fields.
"Select Products" option appears as an input field, not as a clickable button, which may confuse users.
After
Solution
Improved the progress bar for better visibility and alignment.
Implemented a grouping system to clearly distinguish between specific input fields.
Updated address labels with clearer text and added appropriate placeholders.
Made the "Select Product" option selectable and accessible.
Enhanced the form layout for a more organized and user-friendly experience.
Before
Problem
When incorrect details are entered in input fields, no clear error message is displayed.
There is no POI (Proof of Identity) image upload option visible on the page. However, once the POI and ID number are filled in, an option to upload a POI file appears ("Add Attachment"), which triggers a pop-up to upload an image. This increases the user's cognitive load.
There is no clear image upload status indicator, leaving users uncertain about the progress of their upload.
After
Solution
When incorrect details are entered in input fields, no clear error message is displayed.
Implemented proper input validation with clear error messages to help users understand and correct mistakes.
Uncovered the ID number input field, allowing users to see and correct any errors when entering the number.
Before
Problem
The page was not easily scannable, as the headings and copy were vague. For example, the "Cash Transfer" section did not clearly indicate that it was for the “Give It Up Scheme.”
Incorrect input fields were provided; for instance, the form requested the upload of scanned copies of a Ration Card but did not provide an upload button.
Incorrect categorization of documents; essential documents (such as photos and the Ration Card) should have been included in the previous step, as they are required.
After
Solution
To make the page more scannable, I implemented a clear visual hierarchy and highlighted the selected box for better focus.
Added clear indicators for mandatory fields to guide users more effectively.
To improve accessibility for users who may not be proficient in English, I included example answers in all input fields. For example, in the "Enter the 10-digit card number" field, I added a placeholder with sample numbers.
Added Overview Page
After filling in the KYC details, there was no overview page. We identified the issue and made the design decision to create this page, allowing users to review and edit their details.
Prototype
We conducted prototype testing with real users, providing them with clear instructions on how to use the prototype. Users were assigned tasks to complete the KYC form from start to finish. This hands-on approach allowed us to gather valuable insights into the user experience and identify any areas for improvement.
Overall Result
Enhanced the entire KYC application flow, leading to significant improvements during user testing of the prototype.
Applied UX principles to optimize each step of the process.
Adjusted typography for improved readability and visual clarity.
Integrated accessibility features to ensure a more inclusive experience.
Increased user engagement, with high levels of satisfaction reported from users.
What I Learned
Led and supported the team to ensure project success.
Managed timelines, resources, and team coordination.
Explored and integrated analytics tools to inform design decisions.
Conducted UX audits to identify and improve user experience.