Petrol Meter Application

share on

the project

Petrol Meter, a self produced mobile application was developed to fit a gap in the market for an easy to use way to track business miles. Yeah – that’s right, it’s our own idea!

This particular tool integrates with official HMRC figures to allow for live tracking of your journey – which can later be exported and sent to company accountants to claim travel expenses for a particular journey. At time of production the available method for tracking business miles was calculating the distance travelled using google maps, then multiplying this by the vehicle fuel rate as provided by HMRC.

Image of mouse clicking to illustrate the technical tools we used when creating this animation

technical tools

To begin with, our team began producing a set of user journeys and application wireframes on good old fashioned pen and paper. This allows for optimal creativity – with lots of scribbles to get the creative juices flowing! Later, we migrated these into professional wire framing software Axure which allowed us to refer back to and share neat and tidy wireframe guides with the rest of our team and project stakeholders.

These Axure wireframes were then taken and transformed into detailed mockups in Adobe Illustrator, using invision’s interactive mockup application to present these to stakeholders and other team members. Finally, on completion of these mockups, the application was developed using Xcode (apple’s industry standard IOS development software) and then uploaded onto the app store.

Finally, various marketing campaigns were created using Adobe Premiere, Adobe After Effects, and Adobe Illustrator.

Image of flashing lightbulb with exclamation mark to visually show the process we took when creating the animation

The App Building Process

Once the gap in the market was identified, we dived right into planning our the user process and how we could make revenue from the application. It was decided we would utilise a ‘free app with advertisements’ at various milestone screens to help generate income. Similarly, we would also create a ‘premium’ version of the app which featured no adverts or restrictions.

Once we were happy with the user experience and finalised wireframes, we begun assembling the designs together in illustrator. We then integrated these designs into interactive mockup software – invision. This allowed us to visually click through all of the screens as if the application had been developed, without spending any time coding! It is typical that during the design stage that mockups are continually improving as flaws are spotted with original ideas and designs. Invision allows us to quickly and easily spot these flaws and develop solutions which make getting the end developed app a quick and affordable experience.

These interactive mockups acted as a reference point for the development team who could now better understand our idea and turn it into a reality. The developed app took around five weeks to be fully developed, bug tested and submitted for review to the Apple App Store. As usual, the app store took around two weeks to review and approve the application ready for downloads.

Image of flashing lightbulb with exclamation mark to visually show the process we took when creating the animation

the magic of marketing

Throughout the app building process, we as marketeers were already creating various marketing materials for use when the app was ready for download. These included various short videos – for which the most engagement was seen through the use of iconic car scenes from popular films. These included the likes of James Bond, Batman, and Zoolander. These provided us with a light hearted way for use to pitch the application – without being overly technical or corporate.

These short marketing videos can be found below, and are all examples of our creativity and motion graphics / video editing skills.

Zoolander – here

James Bond – here

Business Miles By Batman – here

Aston Martin Giveaway – here

Explainer Video – here

Along with these short promotional clips we also produced a short explainer video which taught our users the ins and outs of using Petrol Meter – as well as being an additional marketing material we could push to our audience for increased engagement and conversion.

Image of two champagne classes clinking together to show celebration on the outcome of the animation project


The Petrol Meter application was an enjoyable learning curve for us at Dab Hand Digital, allowing us to get into the full process of an application project. From the initial idea, to overall execution of the app – we thoroughly loved the whole time!

our work

say hello!


Attach File (Optional)