FTFY: Getting Started with The Gyro Spot

by Aug 26, 2018Fixed That For You, The Gyro Spot

Background

After my brain surgery I ended up staying in Bedford, NH to recover. I wasn’t able to do much on my own at first. I needed help with everything. Since I normally do the cooking and meal planning that meant we were stuck getting a lot of takeout and prepared foods.

One of the places we quickly became addicted to was The Gyro Spot. Not to be insulting or crass, but it’s kind of like Chipotle but instead of burritos they make gyros. So, basically Greek burritos I guess.

They make really good food and are extremely popular. The locals run with the innuendo and call it the G-Spot. I’ve seen lines out the door during the day and late at night. It makes a lot of sense when you try their food. The rotisserie style meat is perfectly seasoned and juicy, the fries are cooked perfectly to order, and all of the toppings are fresh. I even got addicted to their avgelemono, which is a rich but tangy chicken and rice soup.

One of the biggest draws for me was that I could order from the G-Spot online. With my memory and attention span suffering I was always anxious to order in-store if there were a lot of people. So we’d place orders ahead when we knew it’d be busy.

First impression

The moment I saw the website, I thought to myself, “This place deserves way better.” You can get around the site fine enough and complete the actions that you want to complete. So at the very least the site was usable.

But I can tell without even testing that they probably lose a lot of new customers and potential upsells because they don’t have good photo content. They have two locations open and a business model that supports franchising but the impact of their brand – or lack thereof – probably holds them back when it shouldn’t.

I really loved this place. The G-spot sustained me through the roughest part of my recovery. So I decided that I was going to make this my first FTFY project.

Doing a web audit

The first step to fixing any website is doing a thorough assessment of what’s working and what’s not. I’ve been writing 15-30 page audits for clients for years now, so it’s an easy process for me. I look at a few key areas of a brand’s impact in-person and online and work from there.

The most important things with the G-Spot are mobile optimization and speed because most of their orders will be coming from smartphones and tablets. I also need to understand the stack I’m going to be working in and the design deficiencies that need to be addressed.

Once I have an audit written up I can move forward with brainstorming and mocking up design ideas. I’ll include some of the highlights in this post.

Mobile and speed optimization

The G-Spot’s website is extremely slow-loading on both desktop and mobile. While it gets a decent quantitative mobile optimization score of 80/100 for mobile from PageSpeed Insights – a qualitative assessment reveals some serious issues.

  • The first call to action a user sees is to download an app from Zuppler. This action isn’t required to place an order online so in addition to being an eyesore it’s also getting in the user’s way.
  • The next calls to action have appropriate tap-target sizes but they’re all jammed together and have identical styles. This makes performing an action confusing to the user.
  • The font size of the site is also smaller than it should be, and leading (line-height) isn’t as wide as it should be either. This makes the site difficult for the user to read and comprehend – and that in turn makes them less likely to stay and perform an action.
  • The copy above the mobile fold is also well above 40-characters, which is generally viewed as the idea limit on how much text should be in front of a call to action.
  • The logo takes up a substantial amount of real estate and there are no photos of the G-Spot’s flagship gyros to entice the user. Instead, the header image is a picture of the counter in their Manchester location.

The stack

The G-Spot has a pretty basic stack. They run on WordPress with an online ordering plugin made by Zuppler. This was best-case scenario for me because Zuppler is incredibly easy to work with and WordPress is one of my favorite content management systems.

I noticed that the site relied on some useless plugins that aren’t necessary if you’re using a quality super theme. I personally like to work with Divi by ElegantThemes because that team is constantly improving and expanding the functionality of the theme.

This is a pretty simple stack that will really only require me to work minimally with the following technologies:

  • HTML5
  • CSS3
  • JavaScript
  • PHP
  • Apache
  • Linux

The design

The G-Spot’s website really just suffers from a case of the yawns. It’s boring. The colors, the pictures, the copy, the fonts are all a giant snooze-fest. A new design needed to focus on the following areas:

  • Color: The site needs a bright, vibrant color scheme to match its fun atmosphere and bold personality.
  • Typography: The site was mixing two different humanist sans-serifs. There were decent heading fonts to call attention to anything.
  • Photos: The G-Spot’s food is incredibly photogenic, but you don’t get a chance to see it until you scroll down. It seems weird that you’d have to find the G in G-Spot on the website.
  • Copy: The site needed to dial up the risque and innuendo just a little bit. You can’t half ass innuendo. You can be nuanced and you can be clever – but you have to commit to it.

Getting going

I’ve put together a more comprehensive audit as a Google Doc that will help me get through this project. I’ve also set up a project in JIRA to keep track of my work and keep myself organized.

Tomorrow I’ll start working on the design and branding goals for this project. After that I’ll get an installation of WordPress setup on my server and start working on fixing up the content.

NEXT UP

FTFY: Branding The Gyro Spot