ExpressCNG UIUX Project

UI/UX ExpressCNG
UI/UX ExpressCNG
UI/UX ExpressCNG

ExpressCNG Re-Design

Overview: CNG-powered vehicles are economical and environmentally friendly, but users often struggle with finding filling stations and checking gas availability. The ExpressCNG app was redesigned to address these issues and improve user experience.

Inspiration: Personal challenges with existing apps, including outdated information and difficulties finding gas stations, motivated the development of ExpressCNG to provide a better solution.

Problem Statement: Users need a dependable way to locate CNG filling stations and verify the availability of gas to avoid inconvenience and save time.

Goals:

  • Simplify the process of finding the nearest CNG station.

  • Provide real-time updates on gas availability.

  • Offer additional station details such as operating hours and contact information.

  • Integrate with navigation apps for seamless directions.

Design Process:

  1. Empathize - Understand user needs through research.

  2. Define - Pinpoint core issues and challenges.

  3. Ideate - Develop potential solutions.

  4. Design - Create wireframes and prototypes.

  5. Test - Refine based on user feedback.

User Research:

  • Target Audience: CNG vehicle users and those considering a CNG-powered vehicle.

  • Research Methods: Conducted quantitative surveys and qualitative interviews.

    • Quantitative Research: Surveys via Google Forms and WhatsApp Groups gathered insights from 17 respondents. Findings included:

      • 53% are CNG vehicle owners.

      • 83% use apps to find filling stations.

      • 100% currently use the Nawgati app.

      • Desired features: real-time gas status updates, navigation integration, and contact details for stations.

    • Qualitative Research: In-depth interviews revealed frustration with outdated station information and poor navigation.

Wireframes and Prototypes:

  • Low Fidelity: Initial sketches and wireframes focused on basic layout and functionality. Usability testing with 10 participants highlighted issues with navigation, particularly in state and district selection, and oversized navigation bars.

  • High Fidelity: Based on feedback, high-fidelity designs incorporated refined UI elements and interactive components. Changes included improved navigation, adjusted font sizes, and enhanced visual appeal.

Conclusion: What I Learned The ExpressCNG Re-Design project underscored the importance of incorporating user feedback into design processes. Key takeaways include:

  • User-Centered Design: Thorough research and user testing are crucial for identifying and addressing real-world problems.

  • Iterative Design: Low and high fidelity prototypes help in refining designs based on user feedback and testing.

  • Continuous Improvement: Feedback loops and iterative design processes are essential for creating effective, user-friendly solutions.