WHISK: Serving Your Kitchen And Table

Information Architecture and Content Strategy Project

When I thought that I had recovered from my first UXDI project, quickly I was assigned another interesting challenge: design a new Information Architecture and content strategy for the Whisk website.

The Research

I had never heard about Whisk, so my first step was to start doing basic research on Internet to learn more about this company. For those people who don’t know, Whisk is an online kitchenware shop that specializes in selected design cooking utensils. They started in 2008, with her first store located in Brooklyn, and several years later they expanded with a new shop in Union Square, Manhattan.

Whisk NYC

So, once I digged into my client, I visited the Manhattan store to apply the contextual inquiry methodology by seeing the look & feel of the store in person. One important thing that I noticed immediately -and that unfortunately I didn’t mention during my presentation- was that the Whisk physical store is completely different to their website. The store has a ‘Rustic French Cottage’ style where the dark lighting, wood furniture and handwriting signs define its personal signature. On the other hand, the website has a minimalist style, where white, orange and grey colors play as the main palette. This visual inconsistency surprised me a lot and definitely is a downside in terms of branding.

Rummaging a little bit in Whisk products

Few minutes later, I visited Fishs Eddy due to the proximity of this competitor. Unlike Whisk, this company made a good job about the identity of its brand. It was showing the same promotional items in the local store and the online version. Also, the lighting on this store was brighter and I think this was inviting people to enter. Their product displays were cleverly designed with a touch of fun.

Fishs Eddy had a friendly environment. Whisk staff was more serious.

After my initial visit, I started a competitive analysis of online stores focusing on kitchenware. My Google searches helped me to learn that there was a fierce competition in the market of selling kitchen utensils. However, I decided to select Fishs Eddy, Williams-Sonoma and Sur La Table as the main competitors of Whisk because these companies were specialized in the same product as my client, and they also had the added value of exclusivity and design in comparison with other mass brands as Bed Bath and Beyond.

What I Found

My competitive analysis revealed the following:

  • William-Sonoma had the less intuitive navigation, together with Whisk. The whole experience in this website was pretty overwhelming due to the enormous amount of options in the main menu.
  • Sur La Table had a positive 5 rate in taxonomy. All the name buttons has been created for people who loves cooking and know every utensil and also customers that don’t have much idea. Also, the hierarchy of the subcategories was clear and easy to look for different items.
  • The only competitor that had a perfect performance in responsive design was Fishs Eddy.
  • Surprisingly, Whisk doesn’t have breadcrumbs. The lack of this basic resource turns out in a disadvantage compared to their competitors.
  • Fishs Eddy and Sur La Table have a “GIFT & SALES” button in the main menu. Whisk lost points due to the lack of a marketing sale strategy. Customers can’t figure out if this company offers promotions or products as gifts directly without navigating the site.
  • The worst Checkout process was that of Whisk, since they doesn’t offer the ability to check out as guest.

Problem

Retail websites usually have complex navigations and they are full of information due to the large amount of products. Whisk has difficulties with the hierarchy in the main menu and usually users want to see directly the products and find promotion and sales.

Note: Define Whisk problem statement took me more than I expected because part of my Graphic Design background was limiting me to see beyond than its visual elements. However, I can say that I resolved the situation. I am positive when I say that my design process is going to improve gradually in every new project that is being assigned.

Designing For Whisk

Meet Trung

I chose Trung as the persona for this project because I felt a quick connection about his parent situation. He is a medium tech-savvy, intelligent and a cost-conscious user. We need to convince him that Whisk is a great online store to find the perfect gift for her daughter.

My most important goal is help to Trung to have a positive experience as a new customer. He chooses Whisk after seeing a banner in another website, and the idea is to make him feel comfortable in every click that he does. For that reason, my design will be focused on:

  • Optimize the main menu, making it more intuitive and user-centered.
  • Add a “Gift & Promo” section to help Trung achieve his goal.
  • Make a fast checkout.

Information architecture:

I conducted four cards sorting sessions, one open and three closed. I started to organize quickly my first navigation draft and it was improving after every session.

First Open Card Sorting with Vincent
Kevin doing magic organizing the cards in a closed session
A closed session at home

The BAKEWARE category was the most difficult to organize. All my user testers were male. They felt very confused with the bakery items, being Vincent the only exception, since he is a baking lover.

Sitemap

I arranged the categories in 5 main buttons. The big difference, in comparison to the current website, is that the products are in the main menu, and you can navigate directly from there without entering in the submenus. Also, I added a GIFT & PROMOS section to encourage users to click on current promotions or sales that the client could be offered in the future.

User Flow

The Whisk Checkout process had something pending: Check Out as Guest. Since all the competitors had this option, it is very important to implement this feature for potential new customers.

Prototype

Once I had my first sitemap draft, I started to prototype quickly due to the short time that I had. I got stuck during the Information Architecture process and this had a negative impact on the prototyping timeframe.

I created a fictional campaign called “National Cupcake Week” for which theoretically Trung, my persona, could feel appealed to make click. I made this decision based on his concerns: “I need something we can do together”. Well, let’s do cupcakes!

Rapid Prototyping: Sketch & Wireframes

Some of my first wireframes

Prototyping: InVision

National Cupcake Week: The sweetest gift!

Link: https://invis.io/TA8E3XTCN

User Testing

I am happy to say that my test users gave me positive feedback about the menu and the navigation through the checkout process. I had 4 sessions, 3 of them were General Assembly students and one was conducted at home. Devin was the most critical test user and I really appreciate that a lot because he discovered a lot of tiny visual mistakes (like a white dot in an image XD) that I didn’t realized since I was running out of time for my presentation.

User testing with Elizabeth, GA student

Iteration

  1. Check Out Page: Replace some taxonomies inconsistencies.
  2. Main Menu: Make the “BOOK” button clickable.
  3. Make credit card icons informative and not clickable (card numbers already can recognize the bank).
  4. Fix the hover drop-down menu.

Next Steps

  1. Conduct an additional card sorting to refine the IA.
  2. Add new product features: e.g: “Quick View”.
  3. Create mobile version
Show your support

Clapping shows how much you appreciated Carla Giannina’s story.