The Brooklyn Kitchen Website Redesign

Overview

I was tasked with a responsive redesign of The Brooklyn Kitchen's website. I worked alone to redesign and build the website in Wordpress.

Background

The Brooklyn Kitchen (TBK) has several locations in New York City where people gather to learn how to cook. Additionally, TBK brings cooking to the workplace, encouraging team building.

Scope

Website Redesign
Website Build

MY Role

Researcher
UX/UI Designer
Website Developer

Home on Desktop

Research

//contextual inquiries

//User
Interviews

Heuristic
Analysis

Usability
Testing

//Card
Sorting

Competitive Analysis

Usability Testing & Heuristic Analysis

In order to assess the functionality of Eataly's current website, we performed usability testing and completed a heuristic analysis across key areas of the site. The results concluded:

clutter

Busy Layout with overwhelming amount of options. The important information users need is often presented secondary, often masked by large images, unnecessary spacing, and repetitive promotions.

navigation

Eataly has complex, confusing global and service navigation. It holds 10 options in the global and 10 options in the service navigation.

Findability

Users have difficulty finding what they are looking for, particularly locating specific products, brands, recipes, restaurants and reservations. 

searchability

Semi-functional searchability, where the majority of searches were not producing any results.

It was clear that the delightful and beautiful in-person experience was not translating to Eataly online.

existing site: home page

Existing site: finding recipe & shopping ingredients

existing site: shopping product

Competitive & Comparative Analysis

We performed analysis with brands in the similar high-end Grocerant (grocery + restaurant) sector, such as Whole Foods, Le District, and Dean & Deluca, and with those offering high-end speciality kitchen retail, such as Williams-Sonoma. These businesses offered a much simpler approach in layout and navigation with accurate product searchability.

On desktop, Whole Foods offers a shoppable Recipe section, where users can add ingredients from each recipe to their cart. This got us thinking, if Eataly customers want to recreate Italian dishes at home, then why was that experience so difficult to execute on Eataly's website? Eataly was missing out on a natural opportunity to increase sales while improving the ease of trying new Italian dishes at home for their customers.

Design

Information
Architecture

Ideation

Wireframe

Usability Testing

Iteration

Prototype

Information Architecture

During the research phase, we had performed open and closed card sorting using Optimal Sort, in order to understand how users could most efficiently navigate the site. We had users sort 100 of Eataly's products and services into categories. This gave insight into how users categorize information in a way that makes sense to them, which in turn informed the new site navigation.

In an effort to remedy the repetitive nature of the homepage and simplify the experience, I tapered down the number of service navigation options from 10 to 4. The categories of less priority were transferred to the footer.

I moved the Recipes section, previously found within the homepage content, into the global navigation to increase the findability. In order to reduce the breadth of the global navigation, I tucked every e-commerce item under a Shop category. which allowed me to significantly reduce the category options from 10 to 4. 

Sketches

I started the screen design process by sketching out variations of Maggie and Chelsea's task flows. Below is Chelsea's product purchase flow.

Home

I simplified the layout and navigation, as well as gave the UI an updated, less harsh aesthetic. In order to improve search functionality, I would recommend implementation of proper tagging within site.

Home on Mobile

Team Building, About, Contact

More to come on the process

KAREN CHRISTOPH © 2018