We’d like to show you, step by step, how our team built the CircleK app. A total of 30 specialists were involved in the project, including Backend and Frontend Developers, Testers, Analysts and Designers working onsite in the client’s office or remotely to create an entirely new mobile app that would completely redefined users’ experience on the CircleK gas stations.

Our Role

Our team took care of each stage of the project, including development and launch. We carefully choose people for each project to make sure everything goes as smoothly as possible. Our experience suggests, that it’s not only the technical background that matters – for a team to work well together, their soft skills need to be matched up as well. That’s why, when building teams, we also evaluate each candidate’s character traits, motivation and soft skills that can come in handy during the project.

Project Goals

CircleK needed an expert team to build a “fuel up and go” app which would enable customers to pay for the fuel using a mobile device. One of the most important objectives for the project was to create an app that would be user-friendly, intuitive and possible to implement on other markets that CircleK operates on. Additionally, alongside with the B2C application, there was a B2B one being developed based on the same backend which required the team to carefully plan out the system’s architecture.

Project Timeline

We begin each project by gathering requirements and detailed research. We want to understand our client’s goals and needs as well as the market and users. Then, we move on to the first round of testing the product to consistently receive target user feedback.

Research

For an application to be a success, it was crucial for us to understand the target users – their behaviours, expectations, and habits. The product was meant to first be released at the Danish market, so for the initial research, we focused on this area with our qualitative researchWe map out user flows and user journeys, just like the one you see below, to see how to test the product and where there’s room for further improvements.

MVP

A properly built team can work quicker and be more effective. That’s why we managed to develop the first working version of the app in just 3 months. Building this initial version was crucial, to ensure that the final product meets the requirements and is accepted by the client’s management executives. This first version enabled our team to begin target user tests. Our team faced some issues while testing, because they couldn’t exactly mirror the target user’s environment during tests, so the testers decided to regularly fly into Denmark to conduct tests directly at the CircleK gas stations. For this MVP version, we created a UI style guide that we used throughout the rest of the project. Take a quick look at it below:

UX Testing

Our testers played out test scenarios directly in Denmark to get really detailed and accurate results. We needed to conduct those UX tests in order to move on with the development. The first tests brought us insights that were used to build a new version of the app which could be used and tested by actual consumers. After implementing mobile payments and testing the product, it was clearly a success. It proved to be functional and useful for the gas station clients. Because of that, CircleK decided to add a new functionality that would enable users to not only use their phone to pay for gas but also for the car wash. After we implemented the new feature, the app was introduced in Norway as well. 

Results

The project was a major success. It was introduced to many additional markets after its first launch. But let’s talk numbers. How well did the app do? 

The Final Product

After implementing mobile payments and testing the product, it was clearly a success. It proved to be functional and useful for the gas station clients. Because of that, CircleK decided to add a new functionality that would enable users to not only use their phone to pay for gas but also for the car wash. After the team implemented the new feature, the app was introduced in Norway as well. 

Payment

After CircleK decided to introduce the app onto the Norwegian market, it was necessary to implement a new payment solution. We implemented it so that users in every country could easily add payment methods into the app or directly scan their cards without the need to type anything in.

Main View

We focused the design around the simple experience to create a perfect on-the-go app for drivers. The main screen features all the necessary information and doesn’t have any distracting buttons or notifications.

Car Rent

After some time, the client decided to add a new functionality. We designed and implemented a new car-renting service into the app with pick-up arranged within the CircleK gas stations.

Travel Journal and More

To ensure easy access to travels and historical data, we created a separate travel journal to help the drivers analyze their spending and driving habits. There’s also a traditional setting page along with the journal.

If you are interested in learning more about this project, you can visit our Behance profile for a case study or our Dribbble to see single shots and app screens. Our team is also available for other projects, you can contact us at hello@invotech.co.