Dizzy Pig Spice Blends

Team & Roles: 

Larissa Cole: Copywriter 

Heather Keller: User Experience & Visual Designer 

Dizzy Pig is a spice blend company with a plethora of flavor solutions. From curry to Mexican and steak seasoning to a fruit blend, Dizzy Pig is Flavor For All.

Ask/Solution

Expand the Dizzy Pig brand. 

The first step to getting the blends into peoples’ kitchen cabinets was a website redesign for a better user experience from functionality to content and design.

Website Architecture

Altogether the website had around 1,000 pages made up of a store for spice blends and merchandise, newsletters, recipes, events, and more.

In reorganizing the website, we had to consider people that were first-time viewers, current Dizzy Pig buyers, first-time wholesale buyers and current wholesale buyers.

 

Color & Typography

The spice bottle labels use every color of the rainbow.

So it made sense to pull from the current colors. We chose easy-to-read Google web fonts that shared similarities with the company's bottle design. 

 

Journey Maps & First Draft Wireframes

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Research

We interviewed current customers, people who had never heard of Dizzy Pig, and wholesale buyers of Dizzy Pig and then created user journey maps and website mockups on paper. From there, wireframes to high-definition mockups were created using Illustrator, Sketch, and Invision. 

Dizzypigbbq.com

The homepage focused on first-time viewers on mobile and desktop with a succinct synopsis of the company.

For people that know what they want, they have several options to quickly buy the spice blends and gift packs.

We found through analytics that the recipe pages were the number one gateway to turning a person into a Dizzy Pig customer. It was obvious to highlight a few of the recipes trending on their Pinterest account and found organically. 

The footer's hand-drawn icons answer the most frequently asked questions. They are discussed in further detail on the next project page. 

 

Which Spice Blend?

Options are great. However, there was a purchase barrier for customers that didn't know which blends to try from their 20+ selection.

The solution was an interactive chart focused on dietary restrictions, the level of heat, and category of food for use by the cook.   

In addition, it was an opportunity to show off the quality of the product with photos of the spices outside the bottle. 

Shopping Experience

We applied Steve Krug's book, Don't Make Me Think, and the quantitative research to the interaction design and content with:

-Quick buy options on store landing page

-Instant visual cues after items are added to the cart

-Filters for a product searches

B2B Shopping Experience

After a wholesale buyer has logged in, their homepage and shopping experience are different from other customers. 

-Homepage focused on ordering product, store displays, and literature

-Their quick buy page is an order form with camera icons by the product names. When the icon is clicked or touched, an image overlay of the product and description appears. 

-Everything is simpler for fast transactions as the wholesale buyers are familiar with all products and want to save time. 

Dizzy Pig Website Pages

The website has hundreds of additional pages designed with an intentional user experience.  Here are a few visuals of them (Events, Cooking Classes, Login/Register, FAQ, Search, and Media Kit). 

 

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Results

Dizzy Pig's website is now user-friendly on mobile, tablet, and desktop. With the use of analytics, we have been able to see that there is an increase of people staying on the website longer on all devices. 

The next steps would be to refine the content, use geotargeting, and conduct a/b user testing. 

[unex_ce_button id="content_bu0yvgcy1,column_content_mas7o3fsi" button_text_color="#000000" button_font="semibold" button_font_size="24px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="30px 30px 30px 30px" button_border_width="4px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://heatherkeller.co/dizzy-pig-website-icons/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next Project[/ce_button]