Burger Joint Web Design
Top Burger never competed online and relied heavily on older, non-tech customers. The users would primarily access the website on mobile so it needed to be traditional yet appeal to younger customers. The website needed to increase conversions but without much of a budget and a very quick turnaround time. Thus leaving no time or budget for research.
To make an easy-to-use mobile friendly website with the goal of increasing UberEats Orders. To design & develope a simple three step ordering system made with functions recognized by non-tech savy users.
Top Burger had a logo already but no clear brand guidelines. The logo was in Portuguese and with an unappealing color palette for their goals. A logo Redesign was needed to reflect the shift in the company. We changed the overall burgundy color to a more dominant red in order to stand out and give people the feeling of hunger. Please Visit Branding Section for more details on Top Burger’s Brand Guidelines
Research:
54% of Brazilians between the ages of 35-44 use Mobile Phones only to access the internet.
58% of Brazilians between the ages of 45-59 use Mobile Phones only to access the internet.
65% of Brazilians over the age of 60 use Mobile Phones only to access the internet.
Therefore a mobile first design approach was a no brainer. The goal was to make ordering as fast and seamless as possible. In less than 3 steps you can make your order via the website link. The menu would be displayed on the home screen, while the order now button would follow a user across the whole site.
For a little bit of context, there are a total of 4 restaurants in the area alone offering the same cuisine. In order for Top Burger to stand out, not only did the design need to be user focused but the art direction needed to be more appealing than the competition.
Enter our very own food stylist.
Items that received food photography saw an uptick of a 50.5% average in purchases within the first 90 days. With one outlier item increasing 2,025%. This can be attributed to the fact that customers didn’t know what this item was prior to photos.
The goal was for the design to feel like other platforms that most users know. Sites like Instagram, Facebook, UberEats, and iFood (Food delivery App in Brazil) were all used as inspiration. There needed to be a balance of classic and modern. As mentioned in the wireframing section, it was important to keep the process as simple as possible. The client didn’t have the budget for an online ordering system, so a link to meal ordering services was the best option. The menu needed to be easy to use and straight to the point. In order to achieve this the menu had to be simplified from 200 items to 30 to keep the process less overwhelming on the user.
Topburgernj.com was launched at the end of March 2021. On average, Top Burger saw an increase of 63% in that 4 month period in contrast to the previous year. 52% of those customers were new customers.
May saw an overall increase of 104%
June saw an overall increase of 60%
July saw an overall increase of 18%
August saw an overall increase of a staggering 171%
While September saw an 80% increase on UberEats alone.
In Average Top Burger saw an increase of 63% in that 4 month period in contrast to the previous year. 52% of those customers were new customers.
Disclaimer: It is important to mention that Top Burger also implemented a two month social media campaign with Taurist on instagram upon the launch of their website.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Be ready to be taken in a journey where projects are always on time and customer satisfaction is always high. Tell us a little bit about yourself and your project.
👇
Be ready to be taken in a journey where projects are always on time and customer satisfaction is always high.
Tell us a little bit about yourself and your project.
