Ecommerce Project — Whisk

Whisk

Whisk is an independent kitchenware store located in Manhattan and Bedford Ave. in Williamsburg, Brooklyn. Born in Williamsburg by a couple of Brooklyn locals in November, 2008. Now stocks a full range of kitchenware and tabletop items that aim to meet the needs of everyone, from the novice home cook to the professional chef.

Project Brief

Whisk already has an online shop in the form of a web site. We were given 90 products and asked to pick an additional 10 to place into a new popup online shop in order bring a specific person to the store. The popup I decided on would be based in an end of summer sale. Since Whisk doesn’t have a mobile site, I saw this as an opportunity to create something new.

Persona

Choosing the 10 extra products was dependent on who I choose as the persona. I choose Trung and his gift for his daughter because some of the products sold at Whisk tend to be playful and good for a teenage girl. I also have a young cousin that always liked to bake and currently makes iced pops.

Various card sorts throughout the project

Cardsorters

Half of the people I card sorted with were not avid kitchenware shoppers so they thought the products were decadent or unnecessary. The half that did have experience shopping in a store like Whisk were fast and seemed to know where every product belonged. Although after several card sorts, there was still some confusion about where certain specialized products belonged which cleared up after a visit with my mom.

Discovering the Master of Kitchenware

Card sorting with my mom who is an avid Bed, Bath and Beyond shopper was a visceral experience. I always know she is a fast shopper who knows where the stuff she wants in located in most stores that she frequents. While card sorting she sliced and diced my categories, clarified them, and reduced them down to their essences. It was a little stressful but worth it in the end because my categories went from 9 to 6. She questioned my existing categories and didn’t understand why some were so vague. For example, I had a category called unique gift ideas. Changing the name to misc. kitchen tools was way more detailed.

Site Mapping

My 1st site map had 9 categories! Way too many!

First Site Map:

Site map 1

Final Site Map

Site map 2

Competitive Analysis

I learned:

  1. Whisk is playful while offering a variety of colored items and cute baking and cooking projects you could to with a family like bug cake pan and the light pink blender.
  2. Fishs Eddy is more funny offering political printed mugs and other items making fun of Trump
  3. Whisk check out icon is more clear and obvious then the competition.
  4. Bed Bath and Beyond has a user focus of college students because they have example college decorating, sell youthful designs., and have a big banner on their site asking the user to tell what college they are going to when it starts.
  5. William is more focused on the mature chef who takes cooking seriously. They have many sale items and nothing for kids or teens.
  6. Whisk has a very small “back to school” section but no seasonal or end of summer sale.
  7. William Sonoma has a sale on Ice cream makers for end of summer sale
  8. Whisk has nothing in the Sale category
  9. Whisk has no Mobile design! Therefore there is a need there!
  10. Fishs Eddy and William Sonoma have great mobile design

Discovering the Problem

Trung Problem

  • Problem: Needs to find a gift for his daughter that will allow him to spend time with her. He hates difficult navigation and wants social proof that the product is good. He is looking for a good deal.

Whisk Problem

  • Problem: Needs to get rid of summer items to make way for fall items.
Storyboard of Trung bringing a gift home to his daughter from Whisk

Working out the user flow through sketching

Me sketching out mobile wire frames on the whiteboard
Mobile and Web Flow

Web Flow

Starting with the flow chart. I simplified a lot through making the Flow Chart. I eventually got it to this point. The pin ups helped me through getting feedback on mine and seeing other people’s work.

Take aways from pinups:

  • The user flow can be organized better
  • Make a storyboard based Trung exploring the site
  • Trung is focused on something him and his daughter can do together
  • Cooking show video could be at the end

Wire framing

Then I moved into wire framing the website. I did a lot of comparative sketching when it came to finding the right flow. I looked to the competitors sites and did many comparative sketches eventually landing in higher fidelity sketches of the web flow.

Mobile

Since Whisk doesn’t have a mobile site, I looked towards Fishs Eddy first then William Sonoma. I like William Sonoma’s home screen has graphic images for buttons to make it easy for the user to identify where to go.

Whisk check out flow straight from their Website
High fidelity sketches of web flow
Whisk sketches of mobile site pulling influences from Fishs Eddy and William Sonoma
Fishs Eddy Mobile Site

Fishs Eddy and William Sonoma Mobile Sites each have unique characteristics. My final mobile example is a combination of inspirations from both of those competitors. Next time I will also look at a variety of non competitors’ apps to analyze other strategies.

Mobile digital wireframes

Announcing the Web Prototype!

User Testing

I tried to get my ideas digitized quickly in order to stay on schedule. The program Sketch was great for a while but towards the end I started loosing images in all the layers and it got frustrating. I tried to label/name everything, too. During user testing I recorded voices, took notes and took videos. Many iterations were made.

1st iteration vs. 3rd iteration of the homepage

“The “End of Summer Sale” image should be on top so it catches peoples’ attention more then if it was on the bottom.” -Faith User Testing

“Trung needs to be logged in so that the flow is better and it also helps Trung feel like he belongs.” -Faith User Testing

“Larger photos of “Shoppers also viewed” products at the bottom so people can see what they are.” -Elizabeth user testing

“The recipes at check out are good because I don’t know how to cook would love to have ideas when I purchase a product.”-Elizabeth user testing

The x was moved to the inside

“The x should not be on the left hand side of the product image because people will think to click on it more and you want them to buy the product.”

-Elizabeth user testing

“Credit cards need to have a check box under them in order for people to choose the card they want to pay with.” -John User testing

Next Steps

  • Immediate
  • Rename ‘Summer Last Chance’ to ‘Ends This Week’
  • Make social networking symbols better and in order of popularity
  • Add address and phone number on footer
  • Near Future
  • More videos and recipes
  • Sort by price in all areas
  • Distant Future
  • Virtual reality store where you can smell and touch the products