Create a cutting edge, dynamic data driven, crossplatform fuel ﬁnder app that pushes the capabilities of mobile
Fuel pricing and location apps like GasBuddy were already on the market, but they relied on crowd sourced information. This could mean that the price you were seeing could be days out of date, or worse, there was no gas available at that location.*
Fleet Drivers (Primary User) General Public (Secondary User)
Information Architecture; Interface Design; Prototyping; Usability Testing; CSS
The app needed to be deployed to both iOS and Android devices. Drivers should be able to save favorite fuel types including octane.
We started this project with a solid understanding of what was needed to meet our stakeholders needs. Take the example of a segment leading fuel finder app, and clone it with a dynamic datadriven back end to inform fuel pricing and availability. We quickly mocked this up in BalsamIQ & vailadated usability, while the development team worked on building out the API connection.
Step 2 // Subject Matter Experts
We had a strategic advantage in that one of our founders (me) was a fleet delivery driver before entering tech. I didn’t think it was going to be very easy to navigate a map route, with a phone in hand, while driving. With this in mind, we took the mock up & tested it real time in as we drove (ask me how.) We quickly realized we needed to add some additional features to keep drivers eyes on the road. So we added a Text to Speech feature, and tested that.
note: This app was developed before the SDK was available to put driving directions directly into your apps. This was cutting edge stuff in 2011, and before hands free laws were created.
Step 3 // Prototype & Test; Rinse & Repeat
We made a LOT of prototypes. Prototypes not just for the core functionality, but also for advertising, coupons & offers, & a fleet manager version. We spiked on walkie talkie functionality, gamification. There was a lot that didn’t make it into the app, and that’s a good thing.
This wireframe demonstrates the processes of saving a prefered search, selecting a location, & how to get turn by turn directions
Step 4 // High Fidelity Mocks
One of the most difficult challenges to overcome happened late in the process. The stakeholders were insistent on specific design patterns. So we built multiple iterations & tested those. What we ended up with worked, but also left room for improvement in future versions.
These mockups were used for usability testing different Interface layouts.
*"Octane became a critical resource for drivers during Hurricane Katrina relief efforts by providing real time information on fuel availability in storm ravaged areas."
WEX Inc. Recognized by InformationWeek as a Top 500 Technology Innovator—WEX was recognized for “Octane,” the ﬁrst fuel site locator mobile app to combine real-time fuel price data & text-to-speech capabilities to direct drivers to the lowest fuel prices in the area.
This project was an exercise in Lean UX process. Both the product team & stakeholders would identify new assumptions on a regular basis. We learned early that we could quickly build out prototypes and spikes to test and validate these assumptions.