Akron: UI Animations

Client: Pentasoft

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!

Animation_insert_coins
Animation_contactless
Animation_insert_card-1
Animation_insert_bills-1
Animation_coin_dispenser
Animation_pinpad
Animation_qrcode-1
Animation_fueling_1
Animation_fueling_2
Animation_fueling_3-2

Selected Work

AvenifyMotion Design

Most Wins in F1 RecordMotion Design

Loom ProMotion Design

Rugby Player LoadMotion Design

Royal Ascot 2019Motion Design

ANEFP - ChristmasMotion Design

AbancaMotion Design

Interested in working together? Get in touch!

hello@robdiaz.com´╗┐