Sabra

I was hired as a freelance lead UX designer to partner with the digital agency and the client to redesign Sabra’s marketing website. The client wanted to emphasize the breath of their product line, not just their hummus, which they are a leader in the segment.

Process

I followed a typical process, though the agency had already done some research, and the client provided additional market research. I performed a detailed content audit, as well as a lean competitive analysis, both of market competitors and a selection of sites that inspired the direction the client was looking for. The outcome showed that most customers are familiar with the hummus products, and were only slightly familiar with the other product offerings of Sabra. Most notably, customers were unaware of the variety of packaging types, and opportunities that Sabra had created. This played a large role in the information architecture of the site.

Information Architecture

Simple tests showed that users could easily find products when the site was structured by the most obvious classification, primary ingredient. However, anecdotally, few cared to navigate to Salsa or Guacamole, since they had such a strong association with Sabra as a Hummus purveyor. Instead, the client preferred to focus on a structure we called ‘occasions’ that demonstrated the structure as it pertained to the packaging.

Product Variety

It was important to illustrate the variety of product flavors, especially for hummus. Our approach allows a user to navigate the various flavors of a product type from the product details page, while seeing the various packaging types of that product. For example, classic hummus can be purchased in 5 different package types: classic hummus, classic hummus singles, organic traditional hummus, classic hummus with pretzels, and classic hummus with pita. Each of the package types is clearly shown from the product details page, of primary product.

Partnership

Throughout the project I partnered with the strategy team, the client, creative director, and engineering lead to ensure that the UX solutions were a shared vision across the stakeholders. The resulting wireframes were a very close representation of what the final implementation was.