Williams-Sonoma

A concept makeover of the Williams-Sonoma site with an emphasis on cooking classes.

 

*A high fidelity prototype is coming soon, but you can still browse this grayscale version for now.

 
 
 

THE BRIEF

Williams-Sonoma is looking to improve their customers' kitchen experiences beyond the products they buy. They want to:

  • Allow users to search and book cooking classes
  • Provide an interactive grocery and kitchenware inventory checklist based on the recipe
  • Allow users to purchase kitchen products
  • Provide a social aspect for cooks to communicate with each other about specific recipes
 
 

SCREENER & INTERVIEWS

I developed a brief screener survey to find people with experience or interest in cooking and cooking classes. From the results of the survey, I was able to select ideal interview subjects and reach out to them.

My interview questions primarily focused on what might motivate someone to register for a cooking class, how someone envisions a fluid registration process, and what they would like to do or see after taking the class.


After conducting interviews, I still needed to understand how the users would associate various Williams-Sonoma products. This would help shape my information architecture, site map, and global navigation.

I asked my interview subjects to partake in a card sort that would allow them to group similar items how they deem fit. 

INFORMATION ARCHITECTURE

 
 

A colleague partaking in a card sort for the Williams-Sonoma concept.

 

After I had begun to understand a bit about how the users might think and behave, I made a concept map to organize and visualize the ideas and themes that would be included on the site.

A concept map for the Cooking Classes portion of the website.

 

In order to visualize potential user flows, as well as see at a glance the individual pages to design, I devised a site map. The site map would allow me to see relationships between pages and shows the shape of the information in an organized way.

A sitemap showing individual pages, how they can be accessed, and the relationships of the information.

 
 

 
 

INTERFACE DESIGN

The main business goal in this assignment was to guide users towards the culinary classes, while still giving them the option to purchase kitchenware. I designed a home page that offers just that.

The primary call to action button urges the user to "Join Us" for a class. The current Williams-Sonoma site has several layer menus stacked on top of one another. I aimed to pare down the design, allowing the primary focus of the user to be on the call to action button.

 

A compare / contrast of the existing Williams-Sonoma site and my proposed version.

 

Another focus was to design a page that easily allowed users to browse cooking classes. The way that the current Williams-Sonoma site does this is... it doesn't. The current Williams-Sonoma site will re-direct the user to an entirely different site in order to reserve a spot in a cooking class. This is a flow that needed to be addressed.

Rather than re-directing the user to an unrelated site, I designed a page that allowed the user to sort classes by several categories: date, price, location, and type of food. I found from interviews and research that these are the primary categories that my users would be interested in knowing when browsing for a class.

 

A low fidelity, grayscale wire frame of the class list page. The classes here are sorted chronologically by date, but the user has the option to sort them by different criteria by clicking on the name of the category at the top of each column.

 
 

In all, I aimed to design an interface with far less distractions than the current Williams-Sonoma site. I thought: If the user seeks specific information, give them that information and nothing more.

 

 
 

As with any time limited project, there are always next steps and stretch goals. For this Williams-Sonoma project, with more time I would:

  • Advance from low fidelity, grayscale wireframes to a high fidelity interface with photos and color.
  • Complete the shopping process by adding the check out process.
  • Allow the user to not just browse classes, but search specific classes via a search entry field.

NEXT STEPS