Kellie Kowalski

Capriotti's Sandwich Shop

The Project

Capriotti's is a nationwide sandwich chain based in Las Vegas, that's beloved by locals, having won "Best of Las Vegas" multiple years in a row. Unfortunately, their website didn't match their fantastic sandwiches.

It was out of date, not responsive, and fragmented. Additionally, there wasn't a brand style guide, so their printed collateral was scattered and not able to provide a design direction.

They had multiple websites targeting different users: customers and potential franchisees. The sales funnel for franchisees was behind subscription walls and across muliplte sites. We needed to redesign the site architecture to pull both sets of users into the same site and funnel them to the right spots.

For customers, that meant highlighting the food and a quick path to order. For prospective franchisees, a longer and more informational funnel would be required.

Screenshots of the old Capriotti's websites.
Screenshots of the original consumer & franchise sites.

UX Design

After a daylong kickoff and interviews with the stakeholders, we started mapping out the new information architecture.

From there we iterated on several rounds of low fidelity wireframes.

Capriotti's sitemap and user flows.
Low fidelity desktop wireframes

Visual Design

To update the design, we selected web-safe fonts that were similar to the style found in the most recent version of their logo.

We then brightened their brand palette to highlight the excellent food photography, and added accent colors to flesh out the UI. Additionally, I added their iconic gray paper wrapper as a design element.

This style tile would serve as a starting point to expand on the printed ads and in-store collateral.

Capriotti's finalized style tile
Responsive mockups of the Capriotti's homepage

The main video header would highlight Capriotti's focus on premium ingredients, and act as a setup for the menu module right below. The featured menu module draws our first set of users into an order flow.

The home page also highlights successful franchise owners. Inner franchise pages further flesh out the details of owning a Capriotti's store.

The main nav is contextual once a user is interested in franchises. Instead of moving the user to a new site and keeping pertinent info behind a registration wall, the primary site now surfaces that content.

This section tells the stories of successful franchisees, shows awards and financial stats, while easily allowing a user to pop back to the central customer-facing portion of the site.

Comps of various pages in the site
Mobile mockups of the homepage using an iPhone 6s.