Responsive web design

Background & Problem Statement

Black Diamond Grill is a local business in Cumming, GA that is a family sports bar. They are known for their events such as Trivia or Bingo, and they are known for their chicken wings. They also include an arcade area in the back where the kids can have fun. Their target market consists of families with kids that live in the Cumming or Alpharetta, GA.

Black Diamond Grill's current website has received complaints from users who find it difficult to navigate. As the online food ordering trend continues to grow, this presents a significant challenge for the sports bar in a competitive industry. By modernizing and redesigning the website, we aim to improve user experience, increase traffic, and gain a competitive advantage. Specific goals include reducing bounce rates, increasing online food orders for pickup, and enhancing community engagement through a more user-friendly website interface.

Problem statement:

Foundational Research

Joe’s sports bar:

  • Having a call-to-action button in the hero section

  • Target market is more for adults

  • Make the process of ordering food quicker

Competitive analysis:

I reviewed each of these competitors and listed out opportunities to differentiate from each competitor.

Cherry Street:

  • Displaying good food options

  • Making the user flow of ordering food cleaner and more concise

  • Making the ordering food for pickup option more of a priority using visual hierarchy

  • Implementing an easy way to navigate menu categories

User interviews:

User interview participants:

  • ⅘ people have mentioned in several questions that they look at the atmosphere of the sports bar before going to eat there

  • They also stated that they appreciate space for big groups and a place with a lot of TVs

  • 5/5 participants all say they value ordering food online

  • They have ordered for pickup a bit more often than they used to

  • 5/5 participants have multiple complaints about the Black Diamond Grill website

  • Their complaints were mostly about the colors, and pictures they used as well as the amount they had on the site, fonts, visual hierarchy, and the organization of information

User interview results:

Themes discovered through Affinity Mapping

User persona:

Define & Design

Ordering food for pickup: Users will be allowed to go through the website and order food to pickup inside the restaurant.

Pictures of the interior and exterior on the website: Users will be able to view the atmosphere and the amount of TVs displayed inside Black Diamond Grill in the website.

Impactful solutions:

Low-fidelity wireframes

Mobile mockups:

Homepage

Menu option 1

Menu option 2

Cart page

Edit food selection page

Gallery

Desktop mockups:

Homepage

Edit food selection page

Gallery

Menu option 1

Menu option 2

Cart page

High-fidelity mobile mockups:

Ordering wings:

These screens show the process of ordering 10 buffalo wings for pickup.

These screens show the process of viewing the interior of Black Diamond Grill.

Viewing interior gallery

High-fidelity desktop mockups:

Usability Testing

  • The following participants have been selected to assist in testing the two task flows I will be analyzing

Usability testing participants:

  • This is shows the game plan going into the usability testing

  • Shorter times indicate more successful results

  • A higher difficulty rating (1-10) correlates with a higher success rate

Usability testing plan:

Usability testing results:

  • For the ordering wings flow, we need to create hybrid card sorting to figure out how the participants would like different foods to be categorized

  • Make shrimp and wings separate categories

  • For the viewing interior gallery flow, Move the gallery page to the homepage to save users time and eliminate the business costs of adding unnecessary content 

  • Use visual hierarchy to make the bar gallery option a higher priority 

Iteration for task #1 (Ordering wings for pickup

Before:

Menu Categories:

  • Appetizers

  • Famous shrimp & wings

  • Fresh salads

  • Baskets

  • Sandwiches & more

  • Burgers

  • Entrées

  • Pastas

  • Side items

  • Kids menu

  • Deserts

After:

Menu Categories:

  • Appetizers

  • Wings

  • Salads

  • Soups

  • Sandwiches

  • Burgers

  • Entrées

  • Seafood

  • Kids menu

  • Deserts

Iteration for task #2 (Viewing interior gallery)

Before:

After: