Wawa .COM Migration

UX Strategy, Visual Design, & Illustration

Project Background

In 2023 Wawa reinvigorated the design of their marketing website. They applied the same fun retro-modern look-and-feel that they are known for with their mobile app and marketing. Previous to this redesign, Wawa had been using Kentico as their CMS of choice but saw an opportunity with this refresh to implement a new CMS; Amplience.

While the new site design and componentry beautifully expresses Wawa’s brand voice, there were only 10-12 components developed which provided a very limited format to display content with. These limitations made migrating the content of several Kentico pages quite difficult; a lift-and-shift was not possible. At the time, the best solution for Wawa was to migrate the pages that they could easily replicate in Amplience and iFrame in the Kentico pages that they could not. This led to a very disjointed experience for the user.

‍

The Brief

Our goal with this project was to target key pages that remained in Kentico and bring them into the new Amplience site to improve the brand consistency and experience. Since the content would not easily work with the new Amplience components, a reimagining of the content strategy was necessary. We identified 12 key pages to fold in to the Amplience system and we began by conducting stakeholder interviews to learn about the successes and opportunities for improvement for each section. We then worked with our content strategists to create a strategy playbook that informed our UX decisions on how we would lay out the content. Lastly we applied the final visual design layer.

‍

Stakeholder Interviews

View Site

The first step for every page was to conduct stakeholder interviews. We held these virtually in Miro and would pull the live designs for desktop and mobile for us to review while asking our prepared questions. This helped us get a sense of what was working and what needed to be improved.

Example Stakeholder Interview

Content Strategy Playbook

View Site

Our second step was to create a strategy playbook. This was our source of thrush when making decisions on the layout and content strategy for each page. This included our findings from the stakeholder interview, customer & analytics highlights, what was working, what would be improved, and a detailed competitor audit.

UX Strategy

View Site

The new Amplience site only has about 10-12 existing components that we could use for each page. There was no development resourcing allocated to this project, so we had to get creative with what we had to work with. For each page we created 2-3 layout options, each annotated with a different approach to content strategy. We reviewed these options with the stakeholders and together we workshopped a final wireframe to then move forward to copywriting and design.