FuelOn App


FuelOn is an aspiring start-up company in New Zealand looking to provide users with accurate fuel prices for all stations across New Zealand. Other apps out there provide crowd-sourced fuel prices, which are not always accurate and they are here to fix that up! Along with solving the problem of accuracy, FuelOn also aims to become an integral part of fuel stations business models, driving in more foot traffic and reducing queues


FuelOn was a vision-to-reality project. Our clients vision was to give the public of New Zealand reliable and real-time fuel price data and with this also introduce a new avenue of marketing for gas stations by increasing foot-traffic.

Before we started development we got to work with an informal solutions assessment, which is where we discussed user persona’s, user stories, and the overall business plan of where the app/business should be ideally within the next 2 years. From that, we determined what an MVP version of the project should be and then started moving towards the UX/UI of application, where we prototyped, tested, refined, prototyped, tested, refined, prototyped, tested, refined until we felt that we nailed it.

The system has 2 applications:

  1. A web portal that was strictly accessible by gas station owners.
  2. An iOS mobile app that was accessible by everyone via the App Store. We opted in for an iOS first approach, as the requirements for the apps functionality and UI demanded native code. Instead of spending extra resources on Android, the idea was to refine the experience and functionality of the app on iOS to reduce the overall engineering hours used to build it.


Login Screen: We’ve integrated Facebook and Google+ logins for easier registration to the app. Users may also register manually through a simple 3 step process.

Dashboard Screen: This is where the core functionality of the app can be utilised. Users may see petrol prices in their selected fuel type over this map view across all of New Zealand. Users can zoom in and zoom and tailor the view to the focus area the user prefers.

Dashboard Screen (Lowest Price): Users may also find the cheapest price of fuel based on the fuel stations showing in their map view by clicking the “$” button. This is flexible for users, where they are given control to move the map around and find the cheapest price of fuel for the areas the map is focused on. In addition to this, users can segment this result based on fuel type.

Dashboard Screen (Open Drawer): Users can also select a fuel station and learn more about the fuel prices at that station and navigate to the station.

My Stations Screen: Users have the ability to save certain stations as favourites to the “My Stations” section of this app, giving them easier access to the station’s details. Users will also receive push notification updates from fuel stations that are saved in the “My Stations” section.

Selected Station (My Station) Screen: When a user selects a station from the “My Stations” screen, they are directed to this screen. This screen enables the user to view fuel prices, remove the station from “My Stations” and navigate to the station.