Smoked Meeting Express

Responsive Design

Project Overview

Smoked Meeting Express is a barbeque food service. The main goal was to create a responsive website that will help simplify the online ordering experience for customers and increase sales.

Project Duration

3 weeks

My Role

UX/UI Designer
Smoked Meeting needed to find a solution for customers to order their food and use their services they did not have a standard online ordering system in place.

Competitive Analysis

We started with competitor analysis. We were able to identify new opportunities and see what worked and what didn't work for their direct competitors. We developed a swot table, brand comparison, and market positioning map.

Market Positioning Map

This helped us to understand the direct relationship of Smoked Meeting with their competitors as far as item choices, services and store locations.

Feature competitive analysis

We compared the website features of five direct competitors. We noticed that all the competitors had a menu in their website and that most of them didn't have a search bar.

User Interviews

We interviewed 5 meat lovers. We were able to gather targeted information about the user and understand their goals and pains. With the collected data information we were able to create an affinity diagram and an user persona.

Affinity Diagram

We gathered the insights of our interviews into an affinity diagram. Where we group the insights by themes.

User persona

Our user persona was based on the behaviors and motivations of the users we encountered in our research.

User Persona

Information Architecture

To help organize our content and the structure of the website we created a site map and a user flow.

User Flow

With a user flow, we were able to define the steps necessary that the user needed to take to go from point A to Point B. We chose the online ordering flow for our happy path.
User Flow

Low-Fidelity Wireframes

We started with concept sketches and later moved to low-fidelity wireframes. Each wireframe was tested with 5 users and changes were made to each version according to our findings and possible pain points in the user flow.

Usability Findings

When testing the low-fidelity wireframes we were able to gather information about the flow. Some of our findings were:

  • The confirmation order needed more details about the buyer (delivery time, address, etc.)
  • Users were not able to see their menu easily.
  • Users had a hard time finding the cart.

Mood Board

Our main brand attributes were: Rustic, Welcoming, Approachable, Tasty, and Unique. These attributes helped us to guide the creation of our mood board. We tested the mood board with 5 people to see if our attributes were represented correctly.

Style Tile

For our style tile we made sure to keep consistent colors and typography that coincides with the brand attributes we were aiming for. We complemented these with tasteful photos of the meats and ingredients.

Style Tyle

Mid-Fidelity Wireframes

With the collected data from the low-fidelity wireframes, we were able to create mid-fidelity wireframes.

High-Fidelity Wireframes

After the mid-fidelity wireframes were tested, we developed high-fidelity wireframes with the new branding proposed. The usability findings were used to build these screens.


Users can now easily find their menu and can start an online order from the homepage. They can also learn more about Smoked Meeting and their catering services.

Confirmation Page

After checkout, users can review their order and see their information details. They have the option to go back to the homepage to continue shopping.

Responsive Design

Screens for mobile and tablet were designed. The typography, buttons, icons and images were scaled down for each device.


Welcome to check Smoked Meeting Express prototype here.


Thank you for reading!

Having a clear understanding of Smoked Meeting business goals and empathizing with the users early on made this project very gratifying.


study case



Smoked Meeting Express

UX/ UI Study Case