Zakera Wadud

Confirmng

Confirmng

Confirmng

Helping users find the most affordable fuel prices effortlessly.

Helping users find the most affordable fuel prices effortlessly.

Helping users find the most affordable fuel prices effortlessly.

Roles

Roles

Roles

I assumed the following roles designing this app:

I assumed the following roles designing this app:

I assumed the following roles designing this app:

  • User Experience (UX) Designer

  • Interaction (lxD) Designer

  • User Interface (IJI) Designer

  • Visual Designer

  • User Experience (UX) Designer

  • Interaction (lxD) Designer

  • User Interface (IJI) Designer

  • Visual Designer

  • User Experience (UX) Designer

  • Interaction (lxD) Designer

  • User Interface (IJI) Designer

  • Visual Designer

Deliverables

Deliverables

Deliverables

Interaction Design:

Interaction Design:

  • High-fidelity interactive prototypes

  • High-fidelity interactive prototypes

  • High-fidelity interactive prototypes

UI/UX Design:

UI/UX Design:

  • User Journey and Task Flow

  • Site Map

  • Low Fidelity Wireframes

  • High-fidelity mockups and prototypes

  • Design system and UI kit

  • User Journey and Task Flow

  • Site Map

  • Low Fidelity Wireframes

  • High-fidelity mockups and prototypes

  • Design system and UI kit

  • User Journey and Task Flow

  • Site Map

  • Low Fidelity Wireframes

  • High-fidelity mockups and prototypes

  • Design system and UI kit

Tools

Tools

Tools

  • Figma

  • Slack

  • Photoshop

  • Illustrator

  • Figma

  • Slack

  • Photoshop

  • Illustrator

  • Figma

  • Slack

  • Photoshop

  • Illustrator

Overview

Overview

In an ever-changing global economy, where various factors can have a significant impact on our daily lives, there's one element that touches almost every aspect – fuel. Whether you're a commuter, a business owner, or simply someone who cares about making informed choices, the fluctuations in fuel prices can't be ignored.

In an ever-changing global economy, where various factors can have a significant impact on our daily lives, there's one element that touches almost every aspect – fuel. Whether you're a commuter, a business owner, or simply someone who cares about making informed choices, the fluctuations in fuel prices can't be ignored.

Realizing how important fuel is in our lives, the idea of ConfirmNG was born - a visionary service designed to make finding gas stations and comparing fuel prices a breeze for drivers on the go.

Realizing how important fuel is in our lives, the idea of ConfirmNG was born - a visionary service designed to make finding gas stations and comparing fuel prices a breeze for drivers on the go.

Business Goals

Business Goals

Business Goals

  • Increase user engagement

  • Expand user base

  • Increase user engagement

  • Expand user base

  • Increase user engagement

  • Expand user base

Users Goals

Users Goals

Users Goals

  • Find fuel effeciently

  • Compare fuel prices

  • Easy to use

  • Get detailed station information, including amenities, and user reviews

  • Find fuel effeciently

  • Compare fuel prices

  • Easy to use

  • Get detailed station information, including amenities, and user reviews

  • Find fuel effeciently

  • Compare fuel prices

  • Easy to use

  • Get detailed station information, including amenities, and user reviews

By using ConfirmNG, drivers can track fuel prices in real time, allowing them to refuel strategically at the most affordable stations. For example, a user might fill up at a discounted station one week, monitor price trends, and then plan their next refill at another location offering better savings. Over time, this helps users optimize their fuel expenses and maximize cost efficiency.

By using ConfirmNG, drivers can track fuel prices in real time, allowing them to refuel strategically at the most affordable stations. For example, a user might fill up at a discounted station one week, monitor price trends, and then plan their next refill at another location offering better savings. Over time, this helps users optimize their fuel expenses and maximize cost efficiency.

By using ConfirmNG, drivers can track fuel prices in real time, allowing them to refuel strategically at the most affordable stations. For example, a user might fill up at a discounted station one week, monitor price trends, and then plan their next refill at another location offering better savings. Over time, this helps users optimize their fuel expenses and maximize cost efficiency.

From Research to Prototype:
A User-Centered Journey

From Research to Prototype:
A User-Centered Journey

Research

Research

To understand how existing fuel price comparison apps function, I conducted secondary research by reviewing popular apps such as GasBuddy, GetUpside, Gas Guru, Fuelio, Dosh, and MapQuest. This helped me analyze their features, strengths, and weaknesses while identifying gaps in user experience.


Through this research, I gained valuable insights into user expectations, pain points, and opportunities for improvement in the fuel-finding and price comparison space.

To understand how existing fuel price comparison apps function, I conducted secondary research by reviewing popular apps such as GasBuddy, GetUpside, Gas Guru, Fuelio, Dosh, and MapQuest. This helped me analyze their features, strengths, and weaknesses while identifying gaps in user experience.


Through this research, I gained valuable insights into user expectations, pain points, and opportunities for improvement in the fuel-finding and price comparison space.

Research Insights

Research Insights

  • User Experience Gaps

  • User Experience Gaps

Many apps lacked easy-to-use filters for finding fuel types like diesel or E85, making searches frustrating. Cluttered interfaces with excessive ads also distracted users.

Many apps lacked easy-to-use filters for finding fuel types like diesel or E85, making searches frustrating. Cluttered interfaces with excessive ads also distracted users.

  • User Feedback Insights

  • User Feedback Insights

The apps are not fun or engaging, so users don’t feel motivated to share price updates.

The apps are not fun or engaging, so users don’t feel motivated to share price updates.

  • Price Comparison

  • Price Comparison

Different apps show different fuel prices, making it hard to know which one is correct.

Different apps show different fuel prices, making it hard to know which one is correct.

  • Lack of Real-Time Updates

  • Lack of Real-Time Updates

Prices don’t update in real-time, so users often find outdated prices when they get to a station.

Prices don’t update in real-time, so users often find outdated prices when they get to a station.

  • Navigation & Accessibility Issues

  • Navigation & Accessibility Issues

Some features are hard to use, making it difficult for everyone to navigate the app easily.

Some features are hard to use, making it difficult for everyone to navigate the app easily.

Mapping User Flows for Seamless Interactions

Mapping User Flows for Seamless Interactions

Mapping User Flows for Seamless Interactions

To ensure ConfirmNG delivered an efficient and intuitive experience, I mapped user flows to analyze how users navigate through key tasks and identify friction points:


  • Locating the nearest affordable gas station

  • Verifying and updating fuel prices collaboratively

  • Participating in the reward system for engagement


These user flows helped refine the information architecture, streamline task completion, and enhance navigation clarity, ensuring that users could efficiently accomplish their goals with minimal effort.

To ensure ConfirmNG delivered an efficient and intuitive experience, I mapped user flows to analyze how users navigate through key tasks and identify friction points:


  • Locating the nearest affordable gas station

  • Verifying and updating fuel prices collaboratively

  • Participating in the reward system for engagement


These user flows helped refine the information architecture, streamline task completion, and enhance navigation clarity, ensuring that users could efficiently accomplish their goals with minimal effort.

Creating Structure: Wireframes for an Enhanced User Experience

Creating Structure: Wireframes for an Enhanced User Experience

Creating Structure: Wireframes for an Enhanced User Experience

Before designing the final look of the app, I created wireframes to plan the structure and layout. Wireframing helped me:


Organize Information Clearly: Made sure important features, like finding fuel prices, were easy to access.


Simplify Navigation: Designed a smooth flow so users could move through the app without confusion.


Make Quick Changes: Allowed me to test different layouts and improve them before finalizing the design.


Ensure Accessibility: Placed buttons, text, and features where they are easy for everyone to use.


Wireframing was a key step in making the app simple, user-friendly, and easy to navigate before adding colors and final visuals.

Before designing the final look of the app, I created wireframes to plan the structure and layout. Wireframing helped me:


Organize Information Clearly: Made sure important features, like finding fuel prices, were easy to access.


Simplify Navigation: Designed a smooth flow so users could move through the app without confusion.


Make Quick Changes: Allowed me to test different layouts and improve them before finalizing the design.


Ensure Accessibility: Placed buttons, text, and features where they are easy for everyone to use.


Wireframing was a key step in making the app simple, user-friendly, and easy to navigate before adding colors and final visuals.

Polishing the UI: High-Fidelity Designs

Polishing the UI: High-Fidelity Designs

Polishing the UI: High-Fidelity Designs

The final UI was designed with a modern, clean layout, prioritizing clarity, accessibility, and ease of use. To ensure a seamless user experience, I developed a comprehensive design system that maintained consistency across all screens.


Key Enhancements in the Design System:


  • Color Palette: Used high-contrast colors to make text easy to read and keep the design clear. Follows accessibility rules (WCAG standards).


  • Typography: Chose simple, modern fonts with clear sizes for headings, subheadings, and body text, making content easy to scan.


  • Component Library: Created reusable buttons, forms, and navigation elements to keep the design consistent across the app.


  • Spacing & Layout: Followed an 8-pixel grid system to ensure proper alignment, structured spacing, and a clean, clutter-free interface.


  • Dark & Light Modes: Added both light and dark modes to reduce eye strain and work well in different lighting conditions.


  • Larger Interactive Elements: Made sure buttons and interactive elements are big enough for easy tapping on mobile devices.

The final UI was designed with a modern, clean layout, prioritizing clarity, accessibility, and ease of use. To ensure a seamless user experience, I developed a comprehensive design system that maintained consistency across all screens.


Key Enhancements in the Design System:


  • Color Palette: Used high-contrast colors to make text easy to read and keep the design clear. Follows accessibility rules (WCAG standards).


  • Typography: Chose simple, modern fonts with clear sizes for headings, subheadings, and body text, making content easy to scan.


  • Component Library: Created reusable buttons, forms, and navigation elements to keep the design consistent across the app.


  • Spacing & Layout: Followed an 8-pixel grid system to ensure proper alignment, structured spacing, and a clean, clutter-free interface.


  • Dark & Light Modes: Added both light and dark modes to reduce eye strain and work well in different lighting conditions.


  • Larger Interactive Elements: Made sure buttons and interactive elements are big enough for easy tapping on mobile devices.

UX Strategy & Design Solutions:
Enhancing Usability, Engagement, and Accessibility

UX Strategy & Design Solutions:
Enhancing Usability, Engagement, and Accessibility

Problem

Problem

Problem

  • Fuel prices were unreliable with no system to check updates.


  • Different apps showed different prices, making it hard to trust.

  • Fuel prices were unreliable with no system to check updates.


  • Different apps showed different prices, making it hard to trust.

Solution : Crowdsourced Verification System for Price Accuracy

Solution : Crowdsourced Verification System for Price Accuracy

Solution : Crowdsourced Verification System for Price Accuracy

  • To help users find the most accurate fuel prices, I added a crowdsourced verification system where users can confirm and update prices in real time.


  • I made it faster for users to update prices, so more people would participate.


  • I highlighted verified updates from users to make the information more reliable.

  • To help users find the most accurate fuel prices, I added a crowdsourced verification system where users can confirm and update prices in real time.


  • I made it faster for users to update prices, so more people would participate.


  • I highlighted verified updates from users to make the information more reliable.

By focusing on trust and ease of use, I made sure users could rely on the app for up-to-date and verified fuel prices.

By focusing on trust and ease of use, I made sure users could rely on the app for up-to-date and verified fuel prices.

Problem

Problem

Problem

  • Users often found outdated fuel prices, leading to frustration.

  • Users often found outdated fuel prices, leading to frustration.

Solution : Real-Time Price Updates

Solution : Real-Time Price Updates

Solution : Real-Time Price Updates

  • To help users find the most up-to-date fuel prices quickly, I added a system that Lets users confirm or correct prices, making the data more accurate and reliable. This helps build trust and reduces frustration.


  • Organizes prices in a simple, easy-to-read format, reducing clutter.

  • To help users find the most up-to-date fuel prices quickly, I added a system that Lets users confirm or correct prices, making the data more accurate and reliable. This helps build trust and reduces frustration.


  • Organizes prices in a simple, easy-to-read format, reducing clutter.

By making price updates quick and simple, users now spend less time searching and can trust the information they see, making the app much more useful.

By making price updates quick and simple, users now spend less time searching and can trust the information they see, making the app much more useful.

Problem

Problem

Problem

  • The apps are not engaging, so users don’t feel motivated to share price updates.

  • The apps are not engaging, so users don’t feel motivated to share price updates.

Solution : Gamification for User Engagement

Solution : Gamification for User Engagement

Solution : Gamification for User Engagement

  • To make the app more fun and engaging, I added game-like features that encourage users to update fuel prices more often.


  • The leaderboard shows the top contributors, making users want to stay active and compete for the top spots.


  • By adding points and achievements, users now have a reason to update fuel prices regularly, which helps keep the data fresh.


  • These features make users feel like they are part of something bigger, making them more likely to stay engaged and return to the app.

  • To make the app more fun and engaging, I added game-like features that encourage users to update fuel prices more often.


  • The leaderboard shows the top contributors, making users want to stay active and compete for the top spots.


  • By adding points and achievements, users now have a reason to update fuel prices regularly, which helps keep the data fresh.


  • These features make users feel like they are part of something bigger, making them more likely to stay engaged and return to the app.

Research suggests gamification features can boost user engagement by 30-50% in similar platforms. By implementing these, more users are expected to participate, update prices more often, and make the app feel more engaging over time.

Research suggests gamification features can boost user engagement by 30-50% in similar platforms. By implementing these, more users are expected to participate, update prices more often, and make the app feel more engaging over time.

Problem

Problem

Problem

  • Users often found outdated fuel prices, leading to frustration.

  • Users often found outdated fuel prices, leading to frustration.

Solution : Simplified Navigation & UI Enhancements

Solution : Simplified Navigation & UI Enhancements

Solution : Simplified Navigation & UI Enhancements

  • I reduced cognitive load by redesigning the home screen as a navigation hub, making key actions like searching for gas stations and updating fuel prices easier to access. This cut down extra clicks and helped users complete tasks faster with less effort.


  • I also improved the information layout so key details like station info and pricing are easy to see at a glance, reducing frustration.

  • I reduced cognitive load by redesigning the home screen as a navigation hub, making key actions like searching for gas stations and updating fuel prices easier to access. This cut down extra clicks and helped users complete tasks faster with less effort.


  • I also improved the information layout so key details like station info and pricing are easy to see at a glance, reducing frustration.

Using structured layouts and consistent UI patterns, I ensured that users could quickly identify key features and move through the app 30% faster than before.

Using structured layouts and consistent UI patterns, I ensured that users could quickly identify key features and move through the app 30% faster than before.

Lessons Learned

Lessons Learned

Lessons Learned

User Needs Go Beyond Basic Functionality



Initially, I assumed users only needed a simple way to compare fuel prices. However, I quickly realized they were looking for deeper insights—such as identifying trends, optimizing their routes, and understanding how fuel prices impact their spending habits.


Trust is a Key Factor in User Adoption



Some users were hesitant to provide location data due to privacy concerns. This highlighted the importance of transparent messaging about data security, giving users control over what they share and explaining why certain permissions enhance their experience.


Customization is Crucial for Decision-Making



While designing the filtering system, I found that users wanted more control over how they searched for gas stations—beyond just price. They valued features like filtering by amenities, fuel type, and user ratings to make the best choice based on their specific needs.

User Needs Go Beyond Basic Functionality



Initially, I assumed users only needed a simple way to compare fuel prices. However, I quickly realized they were looking for deeper insights—such as identifying trends, optimizing their routes, and understanding how fuel prices impact their spending habits.


Trust is a Key Factor in User Adoption



Some users were hesitant to provide location data due to privacy concerns. This highlighted the importance of transparent messaging about data security, giving users control over what they share and explaining why certain permissions enhance their experience.


Customization is Crucial for Decision-Making



While designing the filtering system, I found that users wanted more control over how they searched for gas stations—beyond just price. They valued features like filtering by amenities, fuel type, and user ratings to make the best choice based on their specific needs.