HPCL Webportal
Problem Statement
The problem at hand is to develop a generic, consolidated platform for Group OEMs and industrial customers who have large requirements or operate across multiple locations. This platform is envisioned as a comprehensive solution that differentiates itself as a unique service offering. The proposed web-based application should effectively manage customers' indents and track product availability across various plants. Additionally, it should provide customers with real-time tracking capabilities for their indents, enabling HPCL to assign orders to the appropriate plants and coordinate supplies efficiently.
Understanding Current Scenario
Krishak, owner of deepak Public LTD wants to place indents for HPCL Lubricant from nearest supplier.
He thought of having a look on the online platform he heard from his business collegues from mass product supplier.
He got swamped with the mulitple products and no prising and different terminology types of product he never heard of.
He tries again how to contact customer care or pricing of product but could’nt understand how place indent and proceed forward. so closed the site down.
He some how gets the contact number. and register himself as customer as per the customer service told him and created account.
Get the product id and cost manually since its not mentioned on website visited office and got all details written on paper.
somehow he places the indent but was not able to track the indent so he called again and again in the office for updates.
At the end he get the package deliverred but after a lot of confusion and hassele.
Introduction
Role
UX Designer
Team
Vaibhav Doifode - UX (Myself)
Duration
Apr 2021 - Jun 2021
Proposal for New Web portal
User Persona
Based on the interview I conducted(and thanks to them for their precious time they spent answering to my numerous personal and professional questions) I created these personas:
1) Company
Deepak Nitrite Limited
ID: 11556600
Employee account handler
Madhur desai
Age: 37
Location
Navi Mumbai
Issues faced
-New user login action not availble
-Can’t track package live status
-Supplier dont pick up calls
-Frequent visit to supplier
-Not language friendly
-Can't access it on phone
-Indent copy hard to read/understand
2) Company-
K group and sons
ID-11221344
Employee account handler
Atharva Kondai
Age- 28
Location
Navi Mumbai
Issues faced
-Cant track indent
-Frequent visit to supplier
-Not user-friendly UI
-Need an app to place indent quickly
-Graphical view of history to understand past records and quantity
3) Company
Milan industries
ID-112443212
Employee account handler
Ashok Chaudhari
Age- 32
Location
Utter Pradesh
Issues faced
-Supplier location not available
-New user login action not available
-Not language friendly
-Cant track indent
-Frequent visit to supplier
-Mobile app to place indent quickly
Summary of problems faced by users on old portal !
The key insights from the two user research methods are as follows:
-Users often seek alternative websites to complete their tasks.
-The website lacks support for multiple languages.
-There is no available contact for customer support.
-The page hierarchy is ineffective.
-The website does not offer a personal profile page for users.
-There is no live tracking feature for order status.
-There is no direct interaction option for customer support.
-There are scalability issues, such as font sizes being too small.
User Flow
Considering the data I collected, I made a flow chart for user’s journey and then the wireframes which I iterated through and through before reaching onto Prototype phase. I planned to make a very simple clean webpage that should be easy for the users of rural/urban India.
Use Case Diagram
The Use case diagram of the online web portal contains the scope of the system, the list of system functionalities, and the total vision of the possible interactions between the system and the actors of this system.
The main actors identifying here are:
Customer: The customer represents the primary actor for this system. The web portal offers an online service to place indent for the customer in different locations.
System operator: The general operator and the administrators are the two actors and these are the generalizations of system actors.
General Operator: This type of actor supports the system to complete the main flow of events to achieve the goal. It takes care to deliver the shipment order to the requested customer.
Administrator: The administrator of the system is responsible for several interactions with the system to reach the objectives. As an example administrator can delete the customer order at any time with proper reasoning.
Database Server: A Database server act to store the customer authentication information and it’s also added the new customer’s information when a new customer-user registration occurs.
Web Server: Web server take care of new user registration, user authentication, ask proof, check identification, fix the final cost, automated email and collecting shipping address.
Hi-Fidelity mockups
I’ve tried to make make the new users understand the online web portal system easily. Thus it is a dynamic web page customers will be able to upload/update their account information bank details and delivery location easily. Also, be able to create their own account. And could order according to the requirement by given sizes with a price. And then he/she could be able to proceed to the checkout. Now I’ll explain the total system point of users' view.
I made my Final Prototype with the help of FIGMA shared the prototype link for user testing. Thanks to FIGMA app, I could provide almost real experience for operating webpage. So I could see user operating app on smartphone and could gain more insights on how users operate PC and deal with an website which is totally new to them.
Account Panel mockups
Account section page: This the page where customer can update change bank account check all transactions and keep a record of all in this section.
Below is the list of all features available on this panel:
- Profile Information
- Manage address
- PAN Card details
- All Transactions
- Current Account
- +Add New Bank Account
- E-mail Zimbra
- Tax Collection Syntax
- Statement of Account
Navigation Bar
Contains all the necessary details along with 3 main subpages i.e Account,My Order & HP Distributors.
Opening section
Iconic HPCL Oil Man with the HPCL tag line with the about us section which will guide new users specify what is HPCL.
where user can see the chat bot as well were customer can solve all the issues or even direct contact the sales or delivery support.
Product and services
Customers can easily navigate and look for all category of products available and supplied by HPCL and find all of them under one portal.
With constant research and innovation at HPCL new products are also launched for next generation EV vehicle under R&D section.
Feedback
This is the most important section for a new user to gain his/her trust but looking at liv feedback from our regular customer. which will reassure the quality and delivery of indents by supplier.
YouTube
With regular YouTube video update it is easy for user to track it from portal which will help in marketing our product because consumers like it because it's easy to digest, entertaining and engaging, and marketers like it because it can give a potentially huge return on investment (ROI) through many channels. Video is also very accessible to anyone with internet access, both to watch and to produce.
HP Buddy
All the features available on web portal can also be accessed from android as well as IOS mobile and the download link is mentioned below for direct download from Google Play store.
Locate HP/Query form
Here from the live google map view its easy for user to trace nearest supplier of headquarters which will be linked to the users IP address so in case the user is from Mumbai this map will be default and in case its from Delhi IP address them Delhi suppliers and headquarters will be displayed
Footer
All site map is available for new users incase if the users could find that he/she is trying to find, this footer will navigate them easily.
Profile Information
As you can see here we collect the organization detail as well as the profile handling employee to keep track of the organization and the call receiver. This will be all saved in our database for future safety and record purpose.
Manage Address
This is the organization address and the delivery location where users are allowed to add more than 1 address sot that while placing an indent it will be easy for customers to choose a particular address while checking out easily.
All Transaction page: This is for the user to track their daily orders for a span of 31 days total costing and all the items expenditure. With sure analyzed data representation will help not only the user but us to keep the record for users location wise and track the demand and supply ratio for a particular area.
Since user is done with placing indent so they can check and cancel the indent from this section also on clicking over the placed indent an over will appear on the screen which indicates all the indent details like transaction details DD no, invoice no, amount etc.
