David Porter

Contact

Black Hog BBQ

Website Design

A full redesign and rebuild of Black Hog BBQ’s website to support multiple locations, simplify ordering, and better reflect the brand.

Visit Website

Case Study

About the Client

Black Hog BBQ is a growing barbecue restaurant brand known for its craft approach, strong visual identity, and location-specific offerings. As the brand expanded to multiple locations, their website needed to evolve alongside it. The existing site no longer reflected recent brand updates and made it difficult for users to quickly find menus, ordering options, or location details.

Goals

Black Hog BBQ needed a website that could scale with their growth while remaining easy to use for both customers and internal staff. I guided the project from research and strategy through design and WordPress development, focusing on clarity, flexibility, and conversion-focused UX.

Tools I Used

  • Google Analytics
  • Semrush
  • Figma
  • Photoshop
  • Illustrator
  • WordPress
  • Elementor

01

Analyzing the Existing Website

An in-depth study was done with a focus on content structure, accessibility, SEO, and user flow.

What I found

The site did not reflect recent brand updates or visual direction.

Menus were difficult to manage and could not easily support location-specific differences.

Navigation presented too many options when most users had just a few core goals.

Conclusion

The website needed a clearer hierarchy, fewer decision points, and a more flexible system for managing menus and location content.

02

Researching the BBQ Restaurant Space

To understand how similar brands approached digital experiences, I studied websites from Black’s Barbecue and Rodney Scott’s Whole Hog BBQ.

Key Insights

Successful BBQ restaurant websites focus heavily on food imagery and location-specific content.

Navigation is typically minimal, with online ordering clearly emphasized.

Location landing pages often include curated actions such as ordering, directions, menus, and specials.

What Analytics Showed:

Publicly available analytics data suggested that simplified structures increased engagement and reduced bounce rates.

03

Collaborating on Messaging and Sitemap

Working closely with the Black Hog team, I helped clarify what content mattered most and how users should move through the site. The primary conversion goal was helping users find and visit their nearest Black Hog location. Secondary goals included online ordering and email newsletter signups.

Content Priorities

Menus tailored to each location

Catering information and ordering options

Individual location pages with maps, hours, contact details, and ordering links

Clear pathways to online ordering and newsletter signups

Sitemap Approach

The primary navigation structure ensured users could quickly answer three core questions: what to eat, how to order, and where to go.

Secondary content such as company info, gift cards, rewards, and the blog would be accessed through in-page callouts and footer navigation

Primary Sitemap

  1. Menu
  2. Locations
  3. Catering
  4. Online Ordering

Secondary Sitemap

  1. Company
  2. Behind the Smoke (Blog)
  3. Rewards
  4. Gift Certificates

04

Wireframing the Streamlined Experience

I created low fidelity wireframes in Figma to establish content hierarchy and user flow across key pages.

Wireframe Focus Areas

Clear navigation paths across header, footer, and page content

Defined layouts for homepage, menu selection, location pages, and blog content

Step-by-step access to location-specific menus and ordering

Clear explanations for the client around content order and UX intent

05

Designing High Fidelity Mockups

Using the approved wireframes, I designed key pages and templates in Figma.

Design Strategy

A cohesive design system built around Black Hog’s brand colors, typography, and tone

Accessible color contrast and clear visual hierarchy

Bold imagery and typographic contrast used to draw attention to primary actions

Food menu layouts designed to align closely with Black Hog’s printed menus

Design System Included:

  • An accessible and brand-aligned color palette.
  • An extensive legible typography system that worked well across screen sizes.
  • Reusable components such as buttons, cards and feature blocks.

06

Developing the Website in WordPress

The site was developed in WordPress with flexibility and ease of maintenance in mind.

Development Highlights

Elementor was used for page structure and reusable templates

Custom HTML, CSS, and JavaScript were applied where Elementor alone was insufficient

Templates reduced redundant development and ensured consistency

Food menu elements were built to allow Black Hog’s marketing team to manage updates in-house

Results

The redesigned website gave Black Hog BBQ a strong digital foundation that matched their brand and supported continued growth. Users can now quickly find menus, ordering options, and location details without friction, while the internal team benefits from a flexible and maintainable system.

This project reinforced the value of pairing research-driven UX strategy with thoughtful design systems to create a website that works just as hard as the brand behind it.

Positive Outcomes

  • Simplified navigation and clearer user journeys
  • Scalable location and menu management
  • Strong alignment with updated brand identity
  • Improved accessibility and usability
  • A conversion-focused structure that supports in-store visits and online ordering