Portfolio

Website Redesign Concept: Ruby Tuesday

Check out my redesign concept of Ruby Tuesday's website (unsolicited). Includes before and after screenshots and a list of design decisions.

I read on Restaurant Business that Ruby Tuesday closed 120 domestic locations between 2016 and 2019. The article also mentioned that Ruby Tuesday has been trying to recapture their past success by focusing on their strengths (e.g. salad bar, burgers, sandwiches).

However, when I looked at Ruby Tuesday's website, I thought they needed a better strategy.

In this post, I'm going to redesign Ruby Tuesday's website (unsolicited) in Sketch.

Project Brief

Business Goal

Modernize the Ruby Tuesday brand and reestablish the restaurant as one of the most dependable chains by focusing on traditional strengths – American cuisine, the salad bar and to-go orders.

Conversion Goal

Double the number of reward sign-ups and double the number of to-go orders.

Section 1

Before (Designed by Ruby Tuesday)

Section 1 of Ruby Tuesday's website.

After (Designed by Bento Sites)

Section 1 redesign concept of Ruby Tuesday's website.

Since most images on Ruby Tuesday’s website were pixelated on retina screens, I had to use their Instagram account for this website redesign concept.

Design Decisions

Logo

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

Image

  • Removed the textured white background.
  • Removed the image slider that transitions the images/copy. I made this decision because most users are more accustomed to scrolling than swiping, especially since this is the default behavior on Instagram, Facebook and Twitter. Also, users probably won't even notice they can click through the slideshow using the bars at the bottom.
  • Added a background image from Ruby Tuesday's Instagram account.
  • Made the image span the content's width.
  • Added a dark, low opacity overlay to make the text legible.

Top Navigation Bar

  • Removed the icons.
  • Consolidated the links into the bottom navigation.

Bottom Navigation Bar

  • Reorganized the links in the navigation bar.
  • Removed "The Bar," "$7.99 Fajitas" and "Garden Bar" because they clutter the navigation and can be found by clicking on "Menu" or the "See Menu" call to action button.
  • Removed location lookup. Instead, users can look up their location by clicking on "Find Your Ruby Tuesday."

Calls to Action (CTAs)

  • Added a primary CTA (Find Your Ruby Tuesday) button.
  • Removed the "Click to Learn More" call to action button.
  • Made the secondary CTA (Learn More) button larger. Also, I made it white to distinguish it from the primary CTA.

Fonts

  • Replaced the H1 font that's used for Fajita Fiesta with Phosphate (inline). I thought it captured the essence of the Fajita Fiesta meals.
  • Replaced the H2 and H3 fonts as well as body text with Avenir Next (regular, medium and heavy). It's a modern and easy-to-read font.

Colors

Consolidated the color palette to the following HEX colors:

  • #C21132 (red)
  • #231F20 (black)
  • #FFFFFF (white)
  • #B09DA1 (gray)

Copy

  • Wrote the copy.

Section 2

Before (Designed by Ruby Tuesday)

Section 2 of Ruby Tuesday's website.

After (Designed by Bento Sites)

Section 2 redesign concept of Ruby Tuesday's website.

I liked that Ruby Tuesday promotes its restaurant as being family-friendly, but I wanted to emphasize that kids eat free on Tuesday evenings with its own section.

Design Decisions

  • Removed everything.
  • Added an image from Ruby Tuesday's Instagram account.
  • Rewrote the copy.
  • Added a CTA button.

Section 3

New Section (Designed by Bento Sites)

Section 3 redesign concept of Ruby Tuesday's website.

The Restaurant Business article stated that Ruby Tuesday was aiming to recapture their past success by focusing on traditional strengths. Then, why didn't they have images of the Endless Salad Bar or popular burgers (e.g. Smokehouse Burger) on the homepage? I don't know, but I wanted to fix that.

Design Decisions

  • Added a background image from Ruby Tuesday's Instagram account.
  • Made the image span the content's width.
  • Added a dark, low opacity overlay to make the text legible.
  • Wrote the copy.
  • Added a CTA button.

Section 4

New Section (Designed by Bento Sites)

Section 4 redesign concept of Ruby Tuesday's website.

Since my project brief's conversion goal is to double the number of reward sign-ups, the customer rewards section needed to be much improved over the before screenshot in section 2.

In section 2, Ruby Tuesday offers a free appetizer when users join their rewards club called "So Connected." Why did they choose this name? "So Connected" doesn't provide any indication of the club's benefits and isn't branded with the restaurant's name. I needed to fix that.

Design Decisions

  • Changed the club name from “So Connected” to "Ruby Rewards.”
  • Added an image from Ruby Tuesday's Instagram account.
  • Wrote the copy.
  • Added a CTA button.

Section 5

New Section (Designed by Bento Sites)

Section 5 redesign concept of Ruby Tuesday's website.

The before screenshot in section 2 promotes signature cocktails, but I thought that was the wrong benefit to promote. Rather, "$5 Drinks. All Day. Every Day." was the benefit that should be promoted.

Design Decisions

  • Reused some of the copy that’s on "The Bar" page and wrote the rest of the copy.
  • Added a background image from Ruby Tuesday's Instagram account.
  • Added a dark, low opacity overlay to make the text legible.
  • Added a CTA button.

Section 6

New Section (Designed by Bento Sites)

Section 6 redesign concept of Ruby Tuesday's website.

To reach the conversion goals in my project brief, I wanted to add the gift cards to the homepage, but first I needed to redesign them to match Ruby Tuesday's brand colors.

Design Decisions

  • Redesigned the Ruby Tuesday gift card in their primary colors (red, black and white). I also added their slogan – Simple Fresh American Dining. However, I thought it needed to be revised since the slogan used three consecutive adjectives without any comma. I changed it to "Simple. Fresh. American Dining."
  • Wrote the copy.
  • Added a CTA button.

Section 7

New Section (Designed by Bento Sites)

Section 7 redesign concept of Ruby Tuesday's website.

Since one of my conversion goals was to double the number of to-go orders in the project brief, I needed to create a section that promoted catering, delivery and takeout.

Design Decisions

  • Rebranded "Ruby TueGo" to "Ruby To Go." I thought "TueGo" was too gimmicky. Also, I grouped catering, delivery and takeout under the Ruby To Go service.
  • Added a background image from Ruby Tuesday's Instagram account.
  • Added a dark, low opacity overlay to make the text legible.
  • Wrote the copy.
  • Added two food delivery CTA buttons (DoorDash and Grubhub) and one take out CTA button.

Section 8

New Section (Designed by Bento Sites)

Section 8 redesign concept of Ruby Tuesday's website.

To conclude the homepage's marketing story and remind potential customers that Ruby Tuesday is one of the most dependable American restaurant chains, I wanted to combine their slogan with images of several menu items.

Design Decisions

  • Added several images from Ruby Tuesday's Instagram account.
  • Added a dark, low opacity overlay to make the text legible.
  • Divided the Ruby Tuesday's slogan into a four-column layout.

Section 9

Before (Designed by Ruby Tuesday)

Section 9 of Ruby Tuesday's website.

After (Designed by Bento Sites)

Section 9 redesign concept of Ruby Tuesday's website.

The footer is commonly used as a sitemap nowadays, so it should include the links in the navigation bar as well as other links. It's also a great place to add the sign-up form since it'll appear on every page.

Design Decisions

  • Removed everything.
  • Used the black brand color for the background.
  • Divided the footer links into three groups – Company, To Go and Support.
  • Organized the links under new headings.
  • Added the sign-up form for Ruby Rewards to reach my conversion goal of doubling the number of sign-ups.
  • Changed the "Open Door" link to "Hotline" since the link is for reporting concerns, asking questions, etc. I found "Open Door" to be unclear and might even be confused with OpenTable, the online reservation network.
  • Moved the social links to the far right corner.
  • Made social media icons a uniform color.
  • Added a link to a "Terms & Conditions" page.

Wrap Up

You just viewed my website redesign concept for Ruby Tuesday. If you need help with your website, get a Website Audit or learn about starting a web design project.

Website Redesign Concept: Ruby Tuesday first appeared on the Bento Sites Blog by Jeff Shibasaki.

Close-up of Jeff Shibasaki wearing a black hat

Jeff Shibasaki

Jeff's the founder of Bento Sites. He's a strategic web designer that specializes in visual design, content marketing and search engine optimization (SEO) on Webflow and Squarespace.