Website Design Case Study
Black Hog BBQ
A full redesign and rebuild of Black Hog BBQ’s website to support multiple locations, simplify ordering, and better reflect the brand.
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
Analyzing the Existing Website
An in-depth study was done with a focus on content structure, accessibility, SEO, and user flow.
What I found
01
The site did not reflect recent brand updates or visual direction.
02
Menus were difficult to manage and could not easily support location-specific differences.
03
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.
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
01
Successful BBQ restaurant websites focus heavily on food imagery and location-specific content.
02
Navigation is typically minimal, with online ordering clearly emphasized.
03
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.
Sitemap Strategy
The primary navigation structure ensured users could quickly answer three core questions: what to eat, how to order, and where to go.
- Menu
- Locations
- Catering
- Online Ordering
Secondary content such as company info, gift cards, rewards, and the blog would be accessed through in-page callouts and footer navigation
Collaborating on Messaging
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
01
Menus tailored to each location
02
Catering information and ordering options
03
Individual location pages with maps, hours, contact details, and ordering links
04
Clear pathways to online ordering and newsletter signups
Wireframing the New Experience
I created low fidelity wireframes in Figma to establish content hierarchy and user flow across key pages.
Wireframe Focus Areas
01
Clear navigation paths across header, footer, and page content
02
Defined layouts for homepage, menu selection, location pages, and blog content
03
Step-by-step access to location-specific menus and ordering
04
Clear explanations for the client around content order and UX intent
Designing High Fidelity Mockups
Using the approved wireframes, I designed key pages and templates in Figma.
Design Strategy
01
A cohesive design system built around Black Hog’s brand colors, typography, and tone
02
Accessible color contrast and clear visual hierarchy
03
Bold imagery and typographic contrast used to draw attention to primary actions
04
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.
Developing the Website in WordPress
The site was developed in WordPress with flexibility and ease of maintenance in mind.
Development Highlights
01
Elementor was used for page structure and reusable templates
02
Custom HTML, CSS, and JavaScript were applied where Elementor alone was insufficient
03
Templates reduced redundant development and ensured consistency
04
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