Improving the home screen user experience on the 'Apex energy' application for B2B & B2C customers
To improve ABC Petroluem's app home screen for B2B and B2C users, prioritize intuitive navigation, personalized content, and easy access to key features.
My Role
Ideation . Visual Design . Prototype . Creating Style guide
Time
Team
40 Days
Solo Designer
Industry
Oil & Petroluem
Customer Segment
B2B & B2C
ABOUT
Apex Energy
Apex Energy is a prominent player in India's oil and gas sector, contributing significantly to the nation's energy landscape. With a rich legacy spanning several decades, Apex Energy has established itself as a leader in the refining, marketing, and distribution of petroleum products.
ABOUT
FuelMate
FuelMate aims to streamline the customer experience by providing a comprehensive platform for managing various Apex energy -related services conveniently from a mobile device.
Why do B2C users use the application?
Order LPG
Drive
FillFuel
Users can order LPG from the application. Also can book any of the services regarding the cylinder ordered.
Apex's Drive is a digital wallet designed for quick and contactless fuel payments.
An automated fueling technology that generates a real-time QR code which can be used at the fuel station to automatically dispense the exact amount of fuel paid for, enhancing convenience.
FillOil
Payment
Other Services
It is a high-quality oil and grease used in various sectors. Users can check the genuineness of the product and businesses can also sell the product.
Users can use the application to pay for various features including buying LPG, paying for fuel and more.
Finding nearby petrol pumps, managing FillOil coupons, and accessing various business solutions.
Why do B2B users use the application?
TruckDrive
Payment
Other Services
TruckDrive program is designed for efficient and cost-conscious fleet owners, providing a combination of convenience and security for fuel management.
Users can use the application to pay for various features including buying LPG, paying for fuel and more.
Managing FillOil coupons, and accessing various business solutions such as Petro Corporate for corporate fuel purchases and Zip Fuel for diesel delivery.
UNDERSTAND
All about the users
Let's clarify the user base for the application and identify the features each group would utilize.
B2C Users
B2B Users
ISSUE FACED
FuelMate is witnessing organic traffic but with high drop-offs; which signifies app experience needs a fix.
INSIGHTS FROM RESEARCH
Presentation and
Application Visuals
Text-heavy screens lead to cognitive load on the user where the clear benefits & actions are not highlighted. Competition apps have clear CTAs for every user action for ease of discoverability
Navigation on
Application
Inconsistent movement on the app with multiple landing pages with actions separated across pages. A clear navigation panel & categorization of actions is seen on the competition apps
Interactions with
the Application
App screen real estate is occupied by non-clickable buttons or banners, confusing the users.
BUSINESS GOALS
Increase Sales Conversion Rate
Improve the application experience and reduce drop-off rates at key points also increase online transactions for key features like TruckDrive, and FillFuel.
Measure of Success: Achieve a 20% increase in transactions within 1 year.
Improve Application’s Reception
Redesign the app to improve the user’s perception and increase the usability for them.So the business can move to an online first company.
Measure of Success: Increase app visits by 15% and increase positive reviews in three months.
Boost Customer Retention
Reduce the app uninstalls and increase the services used inside the application.Also, increase in the loyalty program used.
Measure of Success: Increase repeat purchase rate by 10% and loyalty program sign-ups by 20% over 1 year.
REDEFINED PROBLEM STATEMENT
The app's text-heavy screens, and inconsistent navigation, are leading to high drop-off rates, requiring a redesign to improve usability, enhance user perception, and increase transactions and loyalty program sign-ups
EXPLORING
Styleguide
Colors and text used and finding out why?
To modernize the app and stay true to the brand's core values, we aim to introduce vibrant, pop colors.
To reduce cognitive load and optimize screen space, Poppins was the preferred typeface. Poppin's clean, geometrical, and highly scalable design helps to read better and helps in conveying a playful and professional message that supports our design direction.
To meet our release timeline, we decided to publish the homepage first and use our current tech stack as it stands, so changes to the technology are not feasible at this stage.
Visual Seperation
The interface includes quick actions prominently placed at the top, making them easy to access and reducing cognitive load. This design minimizes the steps users need to take, improving efficiency and streamlining the experience.
Quick Actions
The interface includes quick actions prominently placed at the top, making them easy to access and reducing cognitive load. This design minimizes the steps users need to take, improving efficiency and streamlining the experience.
Details upfront
The design displays details and actions together for each segment, reducing clicks and speeding up access to information. This setup improves efficiency by minimizing the need for extra navigation.
Visual appeal in pictures
The earlier design lacked visual appeal, which reduced user engagement. The updated version uses more attractive images and optimizes space, requiring less scrolling. This improves both aesthetics and usability, making content more accessible.
EXPLORING
Final Screens
