World Smokehouse

Local restaurant and mail-order seafood market.

Project Background

World Smokehouse has been a long-time staple in many communities. They have a large following and, since they started their business in 1956, have been selling smoked and frozen seafood through their catalogs.

They are starting to lose traction due to new competition online1 . They would like to bring their mail-order services online and include subscription-based options. Based on their research they have found that the subscription-based model is vital to their company’s future growth2. Offering a variety of packages that can appeal to varying family sizes and budgets.

They are looking for a full brand refresh at the same time to show their new direction. Because of their legacy, their following currently mostly ages 40 – 70. They would like to start focusing their marketing on bringing in the newer generation while maintaining the loyalty of their older customers.

Brand Message

World Smokehouse makes its customers the focus of their business. They want their customers to feel part of the business. 

  • Appealing to all ages, focusing on their new generation of customers (ages 20 – 40). 
  • Marketing to their local customers with walk-in business as well as online to customers looking for the mail-order offers. 
  • Online products feature around the world seafood offerings. 
  • Online presence will also help promote the local presence. 
  • The redesign will bring a new feel and interest to the company. 

Scope and Focus

To design a website for World Smokehouse. The site will offer an ecommerce storefront, restaurant finder, and be responsive to work across all devices. Research will be focused on the online shopping experience and how it integrates with local restaurants. 

High-Level Design Goals and Objectives

These are the high-level goals and objectives: 

  • Updated branding for World Smokehouse that appeals to the younger generation while maintains the integrity of the brand’s legacy.
  • Responsive website design with ecommerce storefront. 
  • Restaurant locater and local pickup. 

Key Pages

Here are the main pages that should be on the responsive site (pending research): 

  • Homepage
  • Restaurant locater
  • Catering page
  • Shop
  • Product page
  • Company history (about)
  • Login and register page
  • Order history

All pages will be responsive and optimized for mobile usability. 

1. For online food startups, a challenging recipe for success –
http://fortune.com/2013/07/16/for-online-food-startups-a-challenging-recipe-for-success/

2. Why Every Business Will Soon Be a Subscription Business –
https://www.gsb.stanford.edu/insights/why-every-business-will-soon-be-subscription-business

01. Research and Interviews

Given the scope of the project, both primary and secondary research is conducted to determine the most important features to have on the new web site and to have a solid understanding of the market for the new branding direction. 

Secondary Research

Market research was conducted by reading studies and reviews of competition. A competitor analysis shows the strengths and weaknesses of some of the most prominent competition.

Summary of findings: Most of the competitors that offer subscription-based food boxes don’t allow to customize the number of meals it provides or is limited to single-serving meals.

User Interviews

Interviewees were selected based on their age, marital status, income bracket, and gender. The ideal age range we looked for was 24 – 40. Most users hadn’t really ever thought of trying a subscription-based food box or meal kit, but all users had done some amount of online shopping for food-related items. In general, users were more interested in meal kits as a gift option.

Participants

Participants: 5 (2 female, 3 male)

Ages: 24 - 32

Income: $40k-$80k+

Phone interviews: 35 - 40 mins

In person interview: 25 - 35 mins

Interview Briefs

Online Survey

Using Typeform, an online survey was used to help produce more quantitative data based on additional questions/comments that came up during the 1-on-1 interviews.

View the results Take the survey

02. Persona

Using information gathered from the research findings, a persona was created to help with understanding and following the user’s needs. By combining data from the interviews, Rita was created to represent the majority of potential customers. The empathy map gives more insight into Rita’s needs as a user and helps to form ideas for features and design choices that will help provide her with an enjoyable experience.

Empathy Map

The empathy map gives more insight into Rita’s needs as a user and helps to form ideas for features and design choices that will help provide her with an enjoyable experience.

03. Project Requirements

To build a responsive website featuring a restaurant locator, company information, and an online shop for customers to order delicious seafood and meal kits. In addition, World Smokehouse will be underground a full brand refresh. 

High-Level Page Requirements

  • Homepage
    Engages and draws users into the experience that World Smokehouse offers through their products. 
  • Shop
    Category and product pages should have a minimalist approach and feature the experience more than pricing and details. 
  • Locations
    Users can search by zip code or use a map to find a restaurant nearby. Location pages would have hours and details specific to the location. 
  • Order
    A simplified cart and checkout process to keep the experience smooth and lightweight. 
  • Account
    Users can login and easily manage their account and see order history on one page. 
  • Company
    From here people can learn more about World Smokehouse and their other services as well as get in contact with them. 
  • Search
    A simple, live search feature to help directly connect users with the products they are looking for. 

04. Planning and Wireframes

Now that a solid understanding of the user needs is established, as well as having researched design patterns from similar company sites, the next phase involved laying out a detailed plan for creating the product.

View project roadmap

Site Map

User Flow

Task Flow

Sketches

Wireframes

05. Hi-Fidelity UI

I started with creating a mood board to start determining the colors and typography choices for Kaus. I found two font choices that were clear and versatile. The colors were chosen to promote a fun, young overall feeling of the company.

Style Tile and Mood Board

Hi-Fidelity Designs

06. Usability Test

Participants were selected based on the target market for World Smokehouse ranging from ages 20 to 40, male and female. They were giving a list of tasks and scenarios and were observed either in person or remotely while the performed the tasks. 

View the working prototype

Participants

Sherry — 35-40 female (in person)
Zack — 30-35 male (remote)
Amanda — 20-25 female (remote)
Ashley — 20-25 female (remote)

Summary of Findings

Overall there were no issues for users while performing the tasks. Some feedback included minor design changes to typography and ideas for future features.

07. Deliverables

Once the final design changes were completed based on the usability test feedback, the design files, Figma components and handoffs are ready to present to the client.

UI Kit

Figma Handoff

Figma comes with a built-in feature that makes handoffs easy. Within the Figma files the client/developers can get access to all the detailed code-level requirements as well as color properties.

View the Figma files