DESIGN CONSULTING

Home experience

Submitted vendor design candidates A and F were selected by Chevron for my review and feedback.

Two primary objectives for this screen:

• Show the current, or closest Chevron location
• Get the consumer to start the fueling process

Two secondary functions:

• Allow the user to change the location
• Provide access to the menu

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.

Design Suggestions

• Cleaner, more white space.
• Focus is now on the two prime features, current location and begin fueling.
• Less emphasis on the menu. It’s safe to assume users understand the burger style menu icon so no need to distract with colour.
• The Chevron map pin is now grouped with the location as it should be.
• No need for a confusing secondary map icon, use simple text instead.
• Try a more action-oriented phrase like ‘Begin Fueling’ instead. It would be good to test button labels at some point.
• Added a link to the tutorial in case users forget what to do.

FUELING experience

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:
‍

• I see payment is being authorized only if I pay attention to the grey text (even though that’s the most important element on the screen).
• Nothing changes except the text now changes to ‘reserving pump’, OK, that makes sense…
• Next I see a new image (red car with pump) and the text changes to ‘start fueling’. An icon is also shown solely on this screen. Why do I see these new elements when I didn’t on the previous screen?
• Lastly, the car suddenly changes colour; does that mean something?

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.

Design Suggestions

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.