Shef Navigation

Overview

At Shef, we wanted to improve the discoverablity of dishes. With filtering and searching being limited to the explore page, we wanted to expand this across the site.

With the dish-first initiative, having filtering, navigation and search in a centralized location to improve discoverablity was one of the first projects.

I took on the task of rewritting the navigation of the site which changed the underlying layout, introduced persistent filters, and improving the mobile website which accounts for a larger part of the customer base.

Skills

ReactJS
TypeScript
HTML
CSS
Redux

Demo

A basic re-implementation found on shef.com. Clicking on filters expands the menu and brings the filter buttons inline. Scroll the contents up and down to toggle the docking filters. Mobile view expands menu into a modal.

Shef logo
Dietary
Protein
Delivery Date
Cuisine
Subcuisine
More filters
Select
delivery date
All Cuisines
Indian
American
Mediterranean
Southeast Asian
Baked Goods
Middle Eastern
Chinese