Work | Gasoline Grill — WordPress to Webflow migration, UX/UI updates

Migrating from WordPress to Webflow, in a rebuild to enable total self-management, improve customer navigation, enhance user experience, and deliver a performant site with great SEO capabilities.

TOOLS:

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" viewBox="0 0 66.67 100"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M66.67,16.67h0c0-9.2-7.46-16.67-16.67-16.67H16.67C7.46,0,0,7.46,0,16.67h0c0,9.2,7.46,16.67,16.67,16.67C7.46,33.33,0,40.8,0,50h0c0,9.2,7.46,16.67,16.67,16.67-9.2,0-16.67,7.46-16.67,16.67s7.46,16.67,16.67,16.67h0c9.2,0,16.67-7.46,16.67-16.67v-33.33c0,9.2,7.46,16.67,16.67,16.67s16.67-7.46,16.67-16.67h0c0-9.2-7.46-16.67-16.67-16.67s-16.67,7.46-16.67,16.67v-16.67h16.67c9.2,0,16.67-7.46,16.67-16.67Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 62.45"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <g id="_7kFvLm" data-name="7kFvLm"> <path class="cls-1" d="M23.35,26.87c-7.35,0-14.71-.02-22.06.02C.32,26.89,0,26.64,0,25.63.04,17.48.03,9.34,0,1.19,0,.29.27.02,1.18.02c8.3.03,16.6.03,24.91,0,1,0,1.21.34,1.19,1.26-.15,6.87-.34,13.75-.41,20.62.09.04.19.08.28.12,3.86-6.58,6.89-13.73,10.39-20.54C38.05.41,38.63-.01,39.86,0c6.32.07,12.64.05,18.96.01.95,0,1.15.28,1.09,1.18-.43,6.88-.98,13.75-1.28,20.64.09.03.18.06.27.09,3.97-6.74,7.27-13.93,10.96-20.84.4-.77.85-1.07,1.74-1.07,9.48.08,18.92-.08,28.4.08-10.16,20.17-20.59,40.19-30.8,60.34-.59,1.15-1.25,1.53-2.52,1.52-9.45-.14-18.84.13-28.29-.13,4.37-8.43,8.65-16.69,12.93-24.95-.07-.06-.15-.13-.22-.19-12.08,15.56-30.73,24.02-50.1,25.74-.78.12-.99-.15-.99-.89.02-7.89.02-15.79,0-23.68,0-.82.37-.95,1.07-1.04,8.26-1.01,16.3-3.8,22.43-9.66-.05-.09-.1-.18-.15-.28Z"/> </g> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 60.15 44.95"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M23.25,1.83C20.57.6,17.72.13,14.8.03c-1.89-.06-3.77-.03-5.66.02C6.37.12,3.59.18.82.25.04.26,0,.29,0,1.09c0,7,0,14.01,0,21.01s0,13.98,0,20.97c0,.17,0,.35,0,.52.03.32.16.44.49.47.11,0,.22,0,.33,0,2.46,0,4.91,0,7.37,0,.13,0,.25,0,.38,0,.27-.04.43-.19.45-.46.01-.14,0-.29,0-.43,0-3.79,0-7.58,0-11.36,0-.44.01-.89,0-1.33,0-.24.07-.34.32-.33.55.02,1.11.02,1.66.04,2.7.11,5.39.01,8.05-.5,1.96-.38,3.84-.97,5.56-2,2.64-1.57,4.63-3.72,5.78-6.6.6-1.5.89-3.06,1.02-4.67.21-2.54-.1-5-1.06-7.36-1.38-3.39-3.83-5.73-7.12-7.23ZM22.17,17.27c-.24,1.03-.76,1.9-1.53,2.63-1,.95-2.2,1.53-3.52,1.88-1.36.36-2.73.57-4.13.57-1.17,0-2.35.05-3.52-.06-.38-.04-.38-.02-.38-.43,0-2.2,0-4.41,0-6.61,0-2.16,0-4.31,0-6.47,0-.6-.01-.48.51-.55.51-.07,1.01,0,1.52-.01,1.46-.03,2.92-.1,4.37.05,1.21.13,2.37.41,3.47.94,1.99.96,3.07,2.59,3.38,4.74.16,1.11.08,2.21-.18,3.3Z"/> <path class="cls-1" d="M59.91,32.13c-.51-2.46-2.02-4.22-4.1-5.54-1.77-1.12-3.65-2.04-5.63-2.74-1.24-.44-2.43-1-3.6-1.6-.54-.27-1.03-.63-1.42-1.1-.55-.66-.61-1.48-.16-2.21.28-.46.71-.72,1.21-.86.72-.2,1.45-.31,2.2-.32,1.88-.02,3.73.22,5.56.65,1.18.28,2.3.69,3.38,1.24.68.35,1.07.1,1.08-.64,0-.02,0-.03,0-.05,0-2.06,0-4.12,0-6.18,0-.13,0-.25,0-.38-.01-.39-.19-.66-.57-.79-.46-.16-.92-.34-1.39-.47-1.42-.42-2.89-.57-4.36-.7-2.12-.18-4.24-.2-6.36.12-1.99.3-3.85.94-5.49,2.12-3.36,2.41-4.7,5.73-4.07,9.78.4,2.61,1.96,4.53,4.07,6.01,1.69,1.19,3.54,2.1,5.48,2.82,1.2.45,2.39.92,3.53,1.52.54.28,1.03.62,1.42,1.09.91,1.07.29,2.38-.54,2.81-.22.12-.46.21-.7.29-.79.27-1.61.34-2.44.36-2.89.06-5.67-.5-8.35-1.57-.75-.3-1.46-.68-2.17-1.07-.32-.18-.51-.07-.55.3-.01.11,0,.22,0,.33,0,1.11,0,2.22,0,3.33,0,1.14.02,2.28,0,3.42-.02.56.22.88.72,1.09.79.33,1.59.64,2.42.86,3.19.81,6.43,1.07,9.71.77,1.88-.17,3.69-.58,5.41-1.36,4.56-2.08,6.71-6.48,5.71-11.34Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 55.53 47.27"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M25.98,3.99c-.22-.62-.52-.85-1.17-.83-1.61.04-3.23.01-4.84.01s-3.39.02-5.08,0c-.57,0-.78.19-.78.77,0,1.07-.12,2.13-.47,3.15-1.73,5.01-3.46,10.02-5.2,15.03C5.69,30.05,2.93,37.98.18,45.91c-.36,1.04-.25,1.18.85,1.18,2.29,0,4.58-.03,6.87.02.76.01,1.12-.27,1.35-.98.9-2.88,1.86-5.74,2.75-8.61.19-.61.43-.85,1.12-.84,4.61.04,9.22.03,13.83,0,.62,0,.9.16,1.11.77.97,2.94,2,5.85,3,8.78.16.46.33.87.93.87,2.81,0,5.62,0,8.44,0,1.29,0,.06-1.75-.06-2.45-4.8-13.55-9.6-27.09-14.38-40.64ZM24.48,28.25c-3.24-.05-6.46-.01-9.71-.02,1.68-5.76,3.65-11.37,5.22-17.15,1.54,5.49,3.32,10.91,5.06,16.34.19.58.21.84-.57.83Z"/> <path class="cls-1" d="M53.97,13.95c-2.47.04-4.94.04-7.42,0-.72-.01-.97.22-.96.93.01,10.46,0,20.92.01,31.38,0,.89.14,1.01,1.07,1.01,2.39,0,4.79,0,7.18,0,1.07,0,1.08,0,1.08-1.1,0-5.18,0-10.36,0-15.53,0-5.23-.01-10.46.01-15.69,0-.74-.21-1.01-.97-.99Z"/> <path class="cls-1" d="M50.32,10.44c3,.02,5.17-2.1,5.21-5.1.24-7.12-10.3-7.04-10.38-.19-.02,3.15,2.05,5.26,5.17,5.29Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 61.58 61.57"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <g id="_8urvU2" data-name="8urvU2"> <g> <path class="cls-1" d="M.02,43.39V0h26.25v8.82H9.51v25.61h16.73v8.96H.02Z"/> <path class="cls-1" d="M35.65,18.17h25.91v7.21h-16.39v11.22h12.78v6.97h-12.75v17.99h-9.55V18.17Z"/> <path class="cls-1" d="M0,61.48v-8.69h26.46v8.69H0Z"/> <path class="cls-1" d="M35.62,8.67V.04h25.96v8.63h-25.96Z"/> </g> </g> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48.71 42.04"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M48.71.02c-3.06,13.1-6.06,25.98-9.08,38.9-.4,1.73-1.95,2.96-3.73,2.96h-12.98c.17-.82.31-1.55.47-2.27,3.17-13.76,9.08-26.37,16.28-38.43.31-.51,1-1.09,1.55-1.12,2.38-.12,4.78-.05,7.49-.05Z"/> <path class="cls-1" d="M26.07.02c-1.03,4.47-2,8.75-2.99,13.02-2.08,8.94-4.2,17.88-6.22,26.83-.35,1.57-.9,2.23-2.65,2.17-4.58-.15-9.16-.05-14.2-.05,1.43-4.82,2.63-9.37,4.13-13.82C7.34,18.62,11.97,9.73,17.12,1.11c.28-.47.91-1.02,1.39-1.04,2.45-.11,4.9-.05,7.56-.05Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 70.33 100"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M66,19.02c-4.43-8.68-11.19-14.59-20.63-17.28h0C16.89-7.89-10.19,24.4,3.8,51.41c3.62,8.53,10.11,15.37,15.76,22.57,5.35,7.14,10.06,14.61,12.39,23.36.39,1.47,1.34,2.59,2.99,2.65,4.67-.44,4.05-7.18,6.1-10.38,11.1-22.85,40.24-42.2,24.97-70.6ZM22.18,29.87c-.02.07-.03.14-.03.22,0,0,0,0,0,0h0c0-.08,0-.16.03-.22ZM34.88,48.33c-17.61-.08-17.61-26.85,0-26.93,17.61.08,17.6,26.85,0,26.93Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <polygon class="cls-1" points="18.38 31.62 18.38 31.62 50 0 68.38 18.38 36.77 50 68.38 81.62 50 100 0 50 18.38 31.62"/> <polygon class="cls-1" points="81.62 31.62 81.62 31.62 50 0 31.62 18.38 63.23 50 31.62 81.62 50 100 100 50 81.62 31.62"/> </svg>

The project:
Project goal Copenhagen's favourite burger joint, Gasoline Grill, were finding their Wordpress site to be slow, visually inconsistent, disorganised, and hard to self-manage.

Having previously worked with the team on their Delivery App UI, I pitched a new website solution to address these pains. After talking with the team and evaluating some options, we decided that the best solution that would add real value in the short and long term would be to migrate Gasoline Grill's website from WordPress to Webflow; a platform that would put them back in the driver's seat.

Deliverables:
New site architecture, some UI updates, Google Maps API + CMS integration, Webflow build, launch and training.

Role:
Frontend Developer, moderate UX

See it online:
‍www.gasolinegrill.com

Strong, bold core branding (pre-existing)

Gasoline Grill updated landing page screens on mobile and desktop. — Responsive landing page

Gasoline Grill custom Google Maps API integration with the Locations CMS in Webflow. — CMS-driven dynamic Google Maps integration

We re-built the site, starting with a brand-new site structure maps and architecture.
We wire-framed it up in Figma, approved the prototype and began development.

New features and value-adds include:

Custom CMS-driven dynamic Google Maps API integration
CMS Collections that easily manage Burgers, Locations, and Catering Services from one place, sitewide
User-friendly SEO controls
Upgraded UI, sitewide
Improved UX based on customer intention
Custom coded carousels and sliders
CSS framework and style guide to help the team remain consistent and on-brand

In the first week post-launch, the team had already begun to create new pages, edit SEO and tweak copy as needed on their snappy new responsive Webflow site — the proof of another successful outcome!

Gasoline Grill website navigation is simplified, bold, and ordered by user-intent. — Navigation UI updates for better usability

Gasoline grill sitemap and page structure planning diagram. — New and improved site structure and architecture

Gasoline Grill new websote responsive mobile views on three devices, showing locations, forms and app downloads. — Mobile-first approach

Gasoline Grill website menu page with custom CMS-powered slider showing burgers. — Dynamic CMS sliders and components

"Our goal was to migrate from Wordpress to a better platform where we could make our own changes to our website, and some performance and UI updates. Jonny was very pleasant and informative. Great info along the way. The integration of Google maps API with out CMS was a standout feature!"

Klaus

CEO, Gasoline Grill

Gasoline Grill now serving up fresh pixels

Migrating from WordPress to Webflow, in a rebuild to enable total self-management, improve customer navigation, enhance user experience, and deliver a performant site with great SEO capabilities.

Related projects