Design Thinking
Competitor Analysis
Wireframing & Prototyping
Usability Testing
Z Energy is one of New Zealand's leading fuel and convenience retailers, serving drivers through a nationwide network of service stations.
This UX redesign project focused on improving the mobile website by streamlining the process of finding nearby stations, comparing fuel prices and station details, and creating a clearer, more intuitive navigation experience to help users make informed decisions quickly while on the go.
Z Energy
Z Energy
Z Energy
Filters / Advanced search
Filters icon and Advanced Search text link were not visually obvious
Both functions were confusing to participants, hard to tell apart
Participant were able to see prices clearly but got confused with price increase/ decrease rates
Would like to see prices on location pins
Expected more information in each location popup
Some did not not see/click, or were hesitant to click the expand icon
Participants faced friction with the tab layout
They expected several stations shown as a list
View stations info
Comparing
Other findings
Filters / Advanced search
View station info
Filters icon and Advanced Search text link were not visually obvious
Both functions were confusing to participants, hard to tell apart
Participant were able to see prices clearly but got confused with price increase/decrease rates
Would like to see prices on location pins
Expected more information in each location popup
Some did not not see/click, or were hesitant to click the expand icon
Participants faced friction with the tab layout
They expected several stations shown as a list
Comparing stations
Other findings
Filters icon and Advanced Search text link were not visually obvious
Both functions were confusing to participants, hard to tell apart
Filters / Advanced search
Some did not not see/click, or were hesitant to click the expand icon
View stations info
Participants faced friction with the tab layout
They expected several stations shown as a list
Comparing
Participant were able to see prices clearly but got confused with price increase/decrease rates
Would like to see prices on location pins
Expected more information in each location popup
Other findings
≥80% task success on task 1-6
Mean SEQ ≥5 for each scored task
CES ≥5 overall
SUS: >80 = excellent, 68 = average, <51 = poor
≥80% task success on task 1-6
Mean SEQ ≥5 for each scored task
CES ≥5 overall
SUS: >80 = excellent, 68 = average, <51 = poor
Pain points
Pain point 1
Hard to filter stations by services such as car wash. It should be easy and intuitive.
Pain point 2
Cannot view fuel prices on the map to compare stations by price and location.
Pain point 3
No quick way to compare information across stations — must call or check multiple sites.
Pain point 4
Mobile site is cramped, requires constant zooming in/out.
Problem statement
Alex Adams, a road trip enthusiast and freelance photographer, needs to search on mobile, select and visit specific gas stations with ease by checking their locations, prices and service offerings such as car wash. He needs to complete these tasks smoothly so that he can plan his journeys around New Zealand more conveniently.
User stories
Station locator
As a driver, I want to quickly find the nearest Z Energy stations so I can refuel easily during my trip.
Filtering services
As a customer, I want to filter stations by available services so I can quickly find one that meets my needs.
Viewing prices
As a customer, I want to see fuel prices on the map so I can choose the most cost-effective station.
Mobile experiences
As a mobile user and traveler, I want to easily use Z Energy on my phone without switching to desktop.
How might we enable users to see information on prices and services at specific stations more conveniently?
How might we make it easier for our customers to quickly locate gas stations with the services we provide?
How might we help our customers compare fuel prices across different stations in a clear and convenient way?
How might we
Competitor analysis
(1/3)
Effective dropdown navigation
Comprehensive station information
Competitor analysis
(2/3)
Fuel type icons
Competitor analysis
(3/3)
Pain point 1
Hard to filter stations by services such as car wash. It should be easy and intuitive.
Pain point 2
Cannot view fuel prices on the map to compare stations by price and location.
Pain point 3
No quick way to compare information across stations — must call or check multiple sites.
Pain point 4
Mobile site is cramped, requires constant zooming in/out.
Pain points
Problem statement
Alex Adams, a road trip enthusiast and freelance photographer, needs to search on mobile, select and visit specific gas stations with ease by checking their locations, prices and service offerings such as car wash. He needs to complete these tasks smoothly so that he can plan his journeys around New Zealand more conveniently.
User stories
Station locator
As a driver, I want to quickly find the nearest Z Energy stations so I can refuel easily during my trip.
Filtering services
As a customer, I want to filter stations by available services so I can quickly find one that meets my needs.
Mobile experiences
As a mobile user and traveler, I want to easily use Z Energy on my phone without switching to desktop.
Viewing prices
As a customer, I want to see fuel prices on the map so I can choose the most cost-effective station.
How might we
How might we enable users to see information on prices and services at specific stations more conveniently?
How might we make it easier for our customers to quickly locate gas stations with the services we provide?
How might we help our customers compare fuel prices across different stations in a clear and convenient way?
Competitor analysis
Effective dropdown navigation
Comprehensive station information
Fuel type icons
Pain point 1
Hard to filter stations by services such as car wash. It should be easy and intuitive.
Pain point 2
Cannot view fuel prices on the map to compare stations by price and location.
Pain point 3
No quick way to compare information across stations — must call or check multiple sites.
Pain point 4
Mobile site is cramped, requires constant zooming in/out.
Pain points
Problem statement
Alex Adams, a road trip enthusiast and freelance photographer, needs to search on mobile, select and visit specific gas stations with ease by checking their locations, prices and service offerings such as car wash. He needs to complete these tasks smoothly so that he can plan his journeys around New Zealand more conveniently.
User stories
Station locator
As a driver, I want to quickly find the nearest Z Energy stations so I can refuel easily during my trip.
Filtering services
As a customer, I want to filter stations by available services so I can quickly find one that meets my needs.
Mobile experiences
As a mobile user and traveler, I want to easily use Z Energy on my phone without switching to desktop.
Viewing prices
As a customer, I want to see fuel prices on the map so I can choose the most cost-effective station.
How might we
How might we enable users to see information on prices and services at specific stations more conveniently?
How might we make it easier for our customers to quickly locate gas stations with the services we provide?
How might we help our customers compare fuel prices across different stations in a clear and convenient way?
Competitor analysis
Effective dropdown navigation
Comprehensive station information
Fuel type icons
Solutions
Streamlined Station Discovery: Redesigned the station locator with improved navigation, filtering, and location browsing to help users find service stations more efficiently.
Simplified Fuel Price Comparison: Improved fuel price visibility and introduced an intuitive comparison experience through a high-fidelity Figma prototype, creating a seamless and informative user journey.
Problem
People travelling across New Zealand often rely on the Z Energy website to locate service stations and compare fuel prices. However, the station locator and fuel price features make these tasks unnecessarily difficult.
Role: UX/UI Design, UX Research
Duration: 3 weeks
Problem
People travelling across New Zealand often rely on the Z Energy website to locate service stations and compare fuel prices. However, the station locator and fuel price features make these tasks unnecessarily difficult.
Solutions
Streamlined Station Discovery: Redesigned the station locator with improved navigation, filtering, and location browsing to help users find service stations more efficiently.
Simplified Fuel Price Comparison: Improved fuel price visibility and introduced an intuitive comparison experience through a high-fidelity Figma prototype, creating a seamless and informative user journey.
Research
Research
Design Thinking
Competitor Analysis
Wireframing & Prototyping
Usability Testing
To identify user needs and pain points, the team created a user persona and user journey map to better understand the experience from the user's perspective. These insights revealed key usability issues with the existing mobile website and informed the prioritisation of the most impactful design opportunities. Competitor analysis further identified best practices in station locators, navigation, and filtering, while revealing gaps in live fuel pricing and station comparison that the redesign could address.
To identify user needs and pain points, the team created a user persona and user journey map to better understand the experience from the user's perspective. These insights revealed key usability issues with the existing mobile website and informed the prioritisation of the most impactful design opportunities. Competitor analysis further identified best practices in station locators, navigation, and filtering, while revealing gaps in live fuel pricing and station comparison that the redesign could address.
"Trying to filter for stations that offer specific services like a car wash is frustrating. It should be easy, but it's not intuitive at all."
"Why can't I see the fuel prices at different stations on the map?”
"There's no way to quickly compare fuel prices across stations."
"The site is a nightmare to navigate on my phone. Everything is so cramped, and I can't easily select what I need."
"Trying to filter for stations that offer specific services like a car wash is frustrating. It should be easy, but it's not intuitive at all."
"Why can't I see the fuel prices at different stations on the map?”
"There's no way to quickly compare fuel prices across stations."
"The site is a nightmare to navigate on my phone. Everything is so cramped, and I can't easily select what I need."
"Trying to filter for stations that offer specific services like a car wash is frustrating. It should be easy, but it's not intuitive at all."
"Why can't I see the fuel prices at different stations on the map?”
"There's no way to quickly compare fuel prices across stations."
"The site is a nightmare to navigate on my phone. Everything is so cramped, and I can't easily select what I need."
Process
Process
The team generated ideas through brainstorming sessions based on the How Might We statements. The most promising and feasible ideas were selected and organised into a user flow that mapped the pages required to complete key tasks on the mobile website. This user flow informed the creation of low-fidelity wireframes, which were connected in Figma to produce an MVP prototype for user testing.
Ideation
User Flow
Tab function to compare multiple stations.
Detailed info about fuel prices, max fill-up cost, and car fuel door indicator for customers’ convenience.
Advanced search option and full screen map view added.
Station tag overlays added on location pins for quick info about stations.
Low-fidelity Wireframes
Advanced search option and full screen map view added.
Station tag overlays added on location pins for quick info about stations.
Tab function to compare multiple stations.
Detailed info about fuel prices, max fill-up cost, and car fuel door indicator for customers’ convenience.
Detailed info about fuel prices, max fill-up cost, and car fuel door indicator for customers’ convenience.
Tab function to compare multiple stations.
Station tag overlays added on location pins for quick info about stations.
Advanced search option and full screen map view added.
Low-fidelity Wireframes
Usability Tests
We conducted usability testing on our low-fidelity prototype to evaluate how easily participants could complete key tasks and identify features that worked well or needed improvement. Five participants completed 5–7 tasks, with task difficulty measured using the Single Ease Question (SEQ) and Customer Effort Score (CES), while overall usability was assessed using the System Usability Scale (SUS). The results indicated that the design was on the right track but highlighted several opportunities for improvement.
Improvements & High-fidelity Prototype
The results from the usability testing sessions helped the team prioritise changes and improvements to make. We added the improved features to our high-fidelity prototype.
Improvements & High-fidelity Prototype
The results from the usability testing sessions helped the team prioritise changes and improvements to make. We added the improved features to our high-fidelity prototype.
Dropdown menu in the search bar for shortcuts
Filter option (with icon) was added to the search bar
Filters / Advanced search
View station info
Comparing stations
Other findings
Prices added on location pins
Station info tag relocated to the bottom for a simpler feel
Modified station info tag with a ‘See more’ button
Comparing stations made more convenient to view
Horizontal scrolling function added to see service info
Fuel type section simplified to decrease cognitive load
Re-organised info layout for smoother flow
Prominent view for fuel prices and total fill up cost
Dropdown menu in the search bar for shortcuts
Filter option (with icon) was added to the search bar
Filters / Advanced search
Prices added on location pins
Station info tag relocated to the bottom for a simpler feel
Modified station info tag with a ‘See more’ button
View stations info
Comparing stations made more convenient to view
Horizontal scrolling function added to see service info
Comparing
Fuel type section simplified to decrease cognitive load
Re-organised info layout for smoother flow
Prominent view for fuel prices and total fill up cost
Other findings
Fuel type section simplified to decrease cognitive load
Re-organised info layout for smoother flow
Prominent view for fuel prices and total fill up cost
Comparing stations made more convenient to view
Horizontal scrolling function added to see service info
Prices added on location pins
Station info tag relocated to the bottom for a simpler feel
Modified station info tag with a ‘See more’ button
Dropdown menu in the search bar for shortcuts
Filter option (with icon) was added to the search bar
View stations info
Comparing
Other findings
Filters / Advanced search
Outcomes
Outcomes
Streamlined Station Discovery: Redesigned the station locator with improved navigation, filtering, and location browsing to help users find service stations more efficiently.
Simplified Fuel Price Comparison: Improved fuel price visibility and introduced an intuitive comparison experience through a high-fidelity Figma prototype, creating a seamless and informative user journey.
Reflecting back on the solutions to the user problems, the team made sure that the main pain points were addressed and that our final design aligned with the requirements from the project briefing.
Our next steps are to collaborate more closely with developers to discuss feasibility, further modifications, and to stay updated on development progress.