Menu

Z Energy

Digital identity and robust design system for a new Z mobile experience
Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek
Date
2018
Client
Z Energy
Agency
Rush Digital
Responsibilities
  • UX Design
  • UI Design
  • Mobile App Design
  • Interaction Design
Development
Rush Digital
Website
apple.co/2BMFknY

In late 2017 Rush Digital brought me in to assist their team in designing a brand new Z mobile experience. My job was to expand on the existing Z digital brand guidelines to create a consistent mobile design system. This work laid the foundation of proper colour use, iconography, text hierarchy, navigation, data inputs, selection mechanisms, and screen transitions, which could be applied across all existing and future app functions.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

The Z Energy app design, as part of the wider Z Fastlane trial experience, received Best Awards Gold in 2018 for User Experience.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

Z Espress

The most complex part of the interface was the Z Espress mobile coffee and food ordering experience. Z needed to keep up with BP in this space, but they were adamant that they wanted to ship nothing short of an exceptional user experience. I helped Rush simplify and polish the coffee ordering experience, creating a set of flexible selection mechanisms that allow for product options, pickup time, and Z location to be chosen with ease. We also ensured applying vouchers, entering payment methods, and loyalty rewards were baked in.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

Fastlane

The other exciting new feature within the app was Z's innovative Fastlane experience, who's onboarding and sign up process we redesigned from the ground up. By entering your plate number, and selecting fuel type and payment method, you can now breeze straight through the Z pump without getting out of your vehicle or stopping for payment.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

Find a Z

I also worked to refine the Z store finding experience, with robust location mapping, searching, and filtering so you can easily find your local favourite or a new pitstop when you're on the road.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

Loyalty

An integral part of Z's mobile and in-store experience was creating easier loyalty options for repeat customers. The app allows you to link loyalty cards like Airpoints and Fly Buys, in addition to managing and spending fuel and drink vouchers with a simple mobile scanning experience.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

Design system documentation

In addition to designing most of the in-app experience, I created extensive documentation of this new design system as a single source of truth for the Rush design team to evolve and deploy through future app versions. This included guidelines on colour, type, icons, imagery, layout, scaling, navigation, transitions, buttons & links, form controls, selectors, panels, modals, footers & bottom sheets, mapping & locations, products through to checkout, as well as loyalty and rewards punchcards.

Z Energy – Digital identity and robust design system for a new Z mobile experience // Benek

I'm proud to have worked with the ambitious team at Rush, and an innovative client like Z Energy, as part of this award-winning mobile product and in-store user experience.

More Work