Portfolio

TGI Fridays

See how Bento Sites improved the visual design of TGI Fridays' website by focusing on the benefits of their registered slogan (unsolicited).

Redesigned header of TGI Fridays' website.

I used to visit TGI Fridays once a month when I lived in South Korea.

The restaurant was comforting nostalgia at a time when I lived so far from home. Antique Radio Flyer wagons and worn baseball gloves hung on the walls next to faded pictures of 1970s American gas stations.

Now, that I live in the United States, though, TGI Fridays reminds me of my time in Korea. Isn’t that ironic?

Recently, I visited TGI Fridays' website to see how they were doing. I found their business and conversion goals to be poorly executed and thought the website lacked an impactful visual design. I wanted to design a better website.

In this post, I'm going to redesign TGI Fridays' website (unsolicited).

Project Brief

Business Goal‍

Improve the structure, usability and visual design of TGI Fridays' website by focusing on the benefits of their registered slogan — "In here, it’s always Friday."

Conversion Goal‍

Increase reservations, walk-ins and online orders, plus grow the email list to market directly to customers.

Section 1

Before (Designed by TGI Fridays)

Section 1 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 1 redesign concept of TGI Fridays' website.

The header is the most important part of the homepage. So, this section is where I spent most of the redesign, improving the hierarchy of information and giving space for each element to breathe.

Design Decisions

Logo

  • Made the logo larger.
  • Aligned the logo in the top left corner because it's the accepted standard for websites.

Image

  • Removed the image slider that transitions the images/copy. I made this decision because most users won't stay long enough for the slide to transition and probably won't even notice they can click through the slideshow using the stripes at the bottom of the section.
  • Added Fridays Feast as the background image.
  • Moved the remaining images (not visible in the before screenshot) from the slider to sections 2 and 3.
  • Reduced the background image's brightness to make the copy easy to read.
  • Added a gradient behind the navigation bar to darken the background, so the logo, links and CTA button pop off the page.

Navigation Bar

  • Reorganized the links in the navigation bar.
  • Renamed "Our Craft" to "About" because it's easier for users to understand.
  • Added a "Find Your Fridays" call to action button in the navigation bar. This way, as users scroll the page, the CTA remains visible (i.e. fixed navigation).
  • Made the call to action button the same height as the logo.

Calls to Action (CTAs)

  • Added a primary CTA (Find Your Fridays) button.
  • Made the secondary CTA (Learn More) button larger and made it white to distinguish it from the primary CTA.

Typefaces

  • Removed all of the typefaces except Arial because it's a web-safe font that loads quickly and is easy to read.
  • Added Anton for all H1, H2 and H3 headings. I think Anton looks more modern, attractive and easier to read than TGI Fridays' current typeface.

Copy

  • Condensed the copy, eliminating the uneven white space and removing the orphan ($20), which is when a single word or part of a word is bumped to another line.
  • Removed "Terms Apply" because this should be on the page that details the offer.

Accessibility Button

  • Removed the "Enter Accessibility" bar that spanned the width of the top of the section.
  • Added the same UserWay widget that I use on my website. This widget ensures a comprehensive legal and regulatory compliance framework covering ADA, Section 508, WCAG 2.1 AA and more.

Section 2

Before (Designed by TGI Fridays)

Section 2 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 2 redesign concept of TGI Fridays' website.

TGI Fridays uses this section to show popular menu items that are based on a user's location. However, even when I used different browsers and blocked my location, I was always presented with the same four dishes.

Furthermore, these four images are part of an image slider, but the slider only works on mobile. On desktop computers, the red stripe to indicate an image isn't clickable and, therefore, is just a leftover component that distracts and confuses users.

Design Decisions

  • Removed everything.
  • Added the daily special images that were hidden in the section 1's image slider.
  • Added a large "$5" to entice users to these weekly affordable specials.
  • Added two CTA buttons — "Order Online" and "See Menu."
  • Used TGI Fridays registered slogan (In here, it's always Friday) to introduce the daily specials. This registered slogan hadn't been used anywhere on the homepage.

Section 3

Before (Designed by TGI Fridays)

Section 3 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 3 redesign concept of TGI Fridays' website.

I liked the idea of using the TGI Fridays stripes that are used in the restaurant's logo, but only against a white background. The stripes don't look right over the image. I also thought the body copy needed to be larger and rewritten.

Design Decisions

  • Removed everything.
  • Added the image of drink specials that had been hidden in the section 1's image slider.
  • Added a black background.
  • Rewrote the copy.
  • Added a call to action button.
  • Left-aligned the copy and CTA button.

Section 4

Before (Designed by TGI Fridays)

Section 4 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 4 redesign concept of TGI Fridays' website.

Just like in section 3, the TGI Fridays stripes are used again across an image, but this time with a different shade of red. Actually, TGI Fridays uses several shades of red that are inconsistent with the color in the logo.

Design Decisions

  • Cropped the brownie image to remove the TGI Fridays stripes.
  • Added a red background color – the same color that's in the logo.
  • Rewrote the copy.
  • Added the service mark symbol.
  • Changed the call to action button from "Learn More" to "Get Rewarded." It sounds more enticing.
  • Left-aligned the copy and CTA button.

Section 5

New Section (Designed by Bento Sites)

Section 5 redesign concept of TGI Fridays' website.

I added this section because I thought there needed to be an area to promote gift cards on the homepage.

Design Decisions

  • Duplicated the red background from section 4 and flipped its position.
  • Added the chicken salad image that TGI Fridays uses in section 3, but lowered its opacity.
  • Layered the gift cards over the chicken salad image.
  • Wrote the copy.
  • Added a call to action button.
  • Left-aligned the copy and CTA button.

Section 6

New Section (Designed by Bento Sites)

Section 6 redesign concept of TGI Fridays' website.

I thought there needed to be a section on the homepage that differentiated TGI Fridays from the competition like Applebees or Chili's. TGI Fridays attempted to do this by linking to "Our Craft" in the navigation bar and adding several more links in the footer. Nevertheless, I found the organization and copy on those pages to be poorly done.

Design Decisions

  • Added the image from the "Our Craft" page for the background image.
  • Added a dark gradient over the background image, so the text and CTA button pop off the page.
  • Reused the copy that had been in the section 1's announcement bar (break away from the status quo).
  • Wrote additional copy that helps to differentiate TGI Fridays from the competition.
  • Added a call to action button.
  • Reused the TGI Fridays stripes, but made them a tint of the red logo. These stripes help to emphasize what makes TGI Fridays unique.

Section 7

Before (Designed by TGI Fridays)

Section 7 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 7 redesign concept of TGI Fridays' website.

I wasn't sure what TGI Fridays wanted to achieve with this background image that didn't contain any compelling copy. They didn't even mention that this menu item is the Half Rack Whiskey-Glazed Ribs (I think). Well, I wanted to replace this image with something that would help users complete the website's goal — Find Your Fridays.

Design Decisions

  • Removed everything.
  • Summarized the main benefits of the TGI Fridays app.
  • Added a screenshot of the app on an iPhone.
  • Added app store badges for users to click.

Section 8

Before (Designed by TGI Fridays)

After (Designed by Bento Sites)

This final section before the footer needed to remind users of the TGI Fridays brand. It also needed to remind users to "Find Your Fridays" or move them into a marketing funnel by encouraging them to sign up to the newsletter for news and offers.

Design Decisions

  • Removed the newsletter icon that confusingly looked more like a "Contact" button.
  • Replaced the black background with the striped background that TGI Fridays uses in section 3. The stripes also allude to the stripes in the TGI Fridays' logo.
  • Branded the newsletter as the "TGIF Newsletter."
  • Rewrote the microcopy.
  • Made the "Fridays terms of use" link color the same color as the primary CTA buttons — red.
  • Made the form larger and accessibility-friendly by adding a form label (Email Address).

Section 9

Before (Designed by TGI Fridays)

Section 9 of TGI Fridays' website.

After (Designed by Bento Sites)

Section 9 redesign concept of TGI Fridays' website.

I didn't understand why the links below "Our Craft" were lowercase and gray while the other footer links were uppercase and white. Links need to be consistently styled. I also didn't like separating the information with two horizontal lines.

Design Decisions

  • Moved the app store badges to section 7.
  • Removed the horizontal lines.
  • Divided the footer links into two groups — Company and Support
  • Organized the links under new headings.
  • Moved the social links to the far right, simplified the copyright notices and right-aligned the legal notices.
  • Repositioned the logo for "Drink Responsibly. Drive Responsibly."

Wrap Up

You just viewed my website redesign for TGI Fridays. If you need help with your website, contact me learn about a website audit or start a web design project.

TGI Fridays first appeared on the Bento Sites Blog by Jeff Shibasaki.

Close-up of Jeff Shibasaki wearing a black hat.

Jeff Shibasaki

I’m an Atlanta web designer that specializes in website design and development on Webflow and Squarespace.

Get exclusive design and marketing tips.