Akron: UI Animations

Client: Akron

Agency: Pentasoft Spain

Role: Design & Animation

Gas stations around Spain were going through a digital transformation, with self-service stations all around the country. The Madrid-based tech company, Pentasoft reached out to me to create a series of UI animations that would make the process of refueling as easier as possible.

Brief

The idea was to create a series of micro-animations that could guide the user through the refueling and payment process removing the friction of each task, especially in the most rural areas.

These animations would run inside the software installed in the gas machines themselves. Flexibility was a must as they needed to be rebranded with each brand color, and of course, the file size was determinant.

Considering all these, each animation was meticulously created in After Effects and exported to JSON files. Colors could be changed with two lines of code -one for strokes and one for fills- in the stylesheet and each JSON file would be 32kb on average, where the biggest one is only 113kb.

Enjoy!