Williams-sonoma cooking network
A web application concept
OVERVIEW: Concept redesign of Williams-Sonoma cooking classes.
TOOLS: Sketch, Invisionapp, Photoshop, Omnigraffle, Coggle.
SKILLS: Interviews / screener script writing, affinity diagrams, persona hypotheses, user flows, concept maps, site maps, domain and organizational research, sketching, prototyping, interface design.
Brief
Williams-Sonoma was looking to improve their online experience by redesigning their online cooking classes. The improved version of this section of the site would add the following features :
1.) Provide an interactive grocery and kitchenware inventory checklist based on recipes the class was working on.
2.) Allow users to purchase kitchen products.
3.) Provide a social aspect allowing customers to interact with William Sonoma cooks, as well as other users.
Screeners and interviews
To begin the process, I shopped around for people who were interested in cooking. By having them fill out my screener, I found four individuals who qualified to take part in my market research for Williams-Sonoma. My interviews with cooks helped identify their tendencies while using Williams-Sonoma, or other cooking websites.
Information architecture
USER FLOW of old site
Although there are on-line cooking classes featured on the Williams-Sonoma site, there is no mechanism to actually sign up for them. The options for any type of cooking class are very limited and the ability to purchase online is non-existent.
New cooking classes site map
Using the research I conducted earlier, I built a site map for the new cooking classes. This gave me get a better idea of how the site could be organized. The site map also helped pinpoint how the pages would interact with each other.
New user flow
I used that site map to make a user flow. This, in turn, helped me understand how the user would navigate and interact with the website.
User interface design
To start, I wanted to simplify the original home page to reroute traffic towards more important aspects of the site. Then I went on to design the UI for the Classes section.
Old website Home screen interface
New home screen interface
The new home screen interface I designed has minimized the navigation to show only the most important sections of the website. Promotions have also been minimized due to the large scope of services Williams-Sonoma has to offer. Promotions for kitchenware, cooking classes, home goods, etc, are located in their respective sections. A large call to action button for cooking classes has been added in the global navigation. The carousel that showed promotions has been reutilized to direct customers to various parts of the website that are of the most interest to them.
The Classroom, Interactive inventory list, and social network
I created wire-frames using sketch to design the MVPs of the new classroom. One of the trends that I discovered through research was that people usually posted about cooking online to brag about their recipes. This feature allowed users and their social friends to submit and compare recipes. This also gave them the excitement of seeing how their recipes stacked up against those submitted by professional cooks.
Chefs would have individual profiles so users could sign up for their classes based on their ratings and recipes.
The virtual classroom includes a live chat between the chef and the students. It also includes a carousel so that users can see the recipes, chefs can promote the Williams-Sonoma kitchenware that they use, and other vital information for the class can be provided.
Another trend that I noticed was that users were most likely to buy new kitchenware based on whether they needed it for certain recipes. Taking this into consideration, I saw an opportunity to assure that when users are purchasing an online class, they are also presented with the option to buy kitchenware needed for that class. By simply clicking on add item, the item can be added to the shopping list.
Prototyping
Using Invisionapp, a working prototype was constructed to illustrate how the wireframes would be utilized on the actual site.
Next steps
Because time was limited for this project, it was important to include ways of advancing the product before it was delivered to the client:
1.) Advance the low-fidelity wireframes into high-fidelity wireframes. This would include constructing and implementing a style guide.
2.) Further improve the prototype through extended usability testing.