I was hired by the Chevron app team to work in a consultative Product Design role with an external vendor building their consumer fueling app. Collaborating with the vendor’s designer, I reviewed all designs and provided feedback, and alternate design ideas.
Submitted vendor design candidates A and F were selected by Chevron for my review and feedback.
Two primary objectives for this screen:
Two secondary functions:
The designs are overly colourful, busy and the animated map pin confused me. It doesn’t actually do anything if you tap it, so why animate it to draw attention to it? It’s also not grouped with the actual mapping feature which is lost on the screen.
The vendor submitted alternates A, B, and C for review and feedback.
The objective of this flow is solely to inform the user which step of the process is happening or that they need to take an action e.g. “Begin Fueling”.
I feel the changing images are a distraction from the core focus, to inform the user of the changing stage of the fueling flow.
The user flow would be something like this:
Including a specific pump number (5) on the screen could cause confusion.
I’m not a fan of the all lower case messaging.
The faded ‘road’ imagery was removed from the home screen and looks busy here, too.
This series of screens are going to be the ones the consumer is most engaged with. An ideal and appropriate time to remind them that they made a smart choice by choosing a Chevron station with Techron. We should include strong Techron branding.
I created several alternate flows but ultimately this was the selected version.
I liked the inclusion of an icon to visually communicate the fueling phase, so use consistently.
I made the pump larger, removed the pump number, and implemented the Techron corner for more subtle branding.
Subtle animation might be a nice effect. Maybe the icon circle flips around to show the next stage as the text slides up from below? We could also potentially animate the ellipses (...) to show a waiting state.