RaceTrac Petroleum Website

RaceTrac Petroleum

Client

UI/UX Strategy & Design

Role

Timeline

On-going

There's no wrong way to start the day right. – RaceTrac Website

RaceTrac was having issues with their corporate website. Users were having a hard time with the navigation structure, lack of rich information and the design wasn’t very engaging.

They approached us to help lead the strategy & design of the overall experience. Their goals included increasing traffic & session times, enhancing the user experience & findability while using a flexible, modern design that set them apart from the competition.

We began with testing the current site with users to find their pain points as well as other information that they felt was missing or nice to have. Then, we ran ideation workshops with the different stakeholders/departments to gather their needs, both current & future. Once I had compiled all the information I was able to build an optimized site structure, that was tested with end users.

Next, we started to concept and design the site by creating high-fidelity wireframes and flows. For the initial launch, we knew that the users currently were coming to the site to look for careers & locations. However, the business was looking to push their food & beverage offerings. With some quick A/B testing, we were able to land on a solution that resonated with both sides.

Racetrac.com flow example – Fuel Subscription

Based on previous research, we knew that RaceTrac prided itself on the “fun” culture of the company and their mission to “make people’s lives simpler and more enjoyable”. This was to be the focus of the overarching visual design aesthetic. Based on previous research, we knew that RaceTrac prided itself on the “fun” culture of the company and their mission to “make people’s lives simpler and more enjoyable”. This was to be the focus of the overarching visual design aesthetic.

RaceTrac mobile homepage, navigation and store detail

RaceTrac desktop homepage scrolled with mobile app, 5k and hotdog ads

RaceTrac mobile Error 404, Find a Store and Error 500 screens

RaceTrac desktop homepage scrolled with Food & Beverage categories

RaceTrac mobile Fuel Savings, Purchase History and Become a Fuel VIP screens

RaceTrac desktop logged in view of Points & Tiers screen

Throughout the process, we collaborated with the internal product and development teams to define, create and execute on feasible solutions based off user, business and tech requirements. The result, a user-friendly and engaging online experience that has continued to grow through the years.