Find and activate charging
stations from an app

Client: DATS24 -  My role: UX Designer / UX Researcher  -  Date: 2018-2019

Replacing fuel and charge cards with a smart, intuitive, and personalized app. DATS24 wants to offer its B2B customers a digital alternative to traditional fuel cards. The focus is on creating a better experience for their customers and thus having an advantage over competitors by being the first Belgian fuel and charging stations operator to offer such a service. 

Design rationale

We, that is me and my colleagues at Achilles Design at the time, started by challenging the concept. We created a prototype focussing on what we believed to be the easiest flow and went out testing with users. It worked but we also discovered several pitfalls in the process. We set up meetings with internal parties that weren’t involved at first (e.g Signage team) to guarantee the success of the app. Next, we organized several hands-on cocreation workshops with the solution architects and the development party. We created a big Figma file with wireflows that became the source of truth of the project. Once stories were defined and problems solved, we went into UI design. We’ve used the existing DATS24 design system but we had to modernize and update a big part of it. The final design was then validated in 3 usability tests before a handover to development

Field testing

We went out to one of the stations, interviewed customers, and let them go through our prototype. I was in minus 2 degrees for the entire day, talk about commitment to user needs research!

Usability testing

We conducted three usability tests with various prototypes to learn what works and what doesn't.. 

Wireflows

This board in Figma that I created and maintained, became the source of truth between all parties involved. It was later updated with the UI designs before being translated into development tickets. 

UI Design

I was in charge of the look&feel of the interface and implemented a more modern-looking version of the existing DATS24 Design system. The image below shows only a few visual mockups of the entire app. These are the onboarding screens when you first start out using the app. 

Design System update

Because we were modernizing the UI look&feel, we also updated, modernized and cleaned up the DATS24 design system.