fd_cheese_lifestyle

Overview

FreshDirect had long established its brand as the go-to online grocer in New York City and wanted to improve their mobile shopping experience across the board, and they saw the iPad as a blank slate to create new ways for customers to shop.

Growth strategy firm MACHINE hired me to supplement their team as the Lead Product Designer. Working alongside MACHINE’s nimble team in conjunction with leaders at FreshDirect and their development partner, Door3, we created an iPad experience that matched the quality of Fresh Direct’s carefully sourced food.

The design won a 2015 Webby Award for Best Tablet Shopping Experience.


Product highlights

By sharing wireframe prototypes with FreshDirect customers early in the process we were then able to test and refine our initial instincts. Below are some highlights of new product improvements.

Getting the essentials

Grocery shopping typically involves grabbing the essentials first, so we put the customer’s frequently ordered items right at their fingertips.

04_me_my_items

Navigation

A collapsing navigation pattern allows customers to quickly jump in and out of storefronts and categories.

fd_sidebar_nav

Digital storefronts

Smaller in-app stores designed with custom photography and badges echoed real-world shopping.

02_meat_shop

Getting inspired

Customers can find shoppable recipes, cooking tips and tricks, and producer stories all in one place.

05_ideas_recipe

Streamlined checkout

At checkout, customers can view and edit their delivery information, address and payment info, and then checkout with a single tap.

06_cart


Defining the look

fd_moodboard_03

Moodboards inspired the UI, which was later defined in a styleguide. To avoid the “farm to table” chalkboard and handwriting look that’s often overused when portraying fresh food, we selected a natural, cozy look.

Typography

Newslab was chosen as the display typeface for its soft, upbeat personality and Brandon Text for its warmth and large x-height for the body copy.

Imagery

Food photographer Johnny Miller shot lifestyle photos depicting everyday cooking moments to use on shop landing pages and in promo areas throughout the app.

fd_imagery_04

Product Cards

Product cards support a wealth of information while still being legible and scannable.

fd_product_cards


Styleguide

FreshDirect’s internal design team is maintaining and updating the app, so we delivered a styleguide to ensure the consistency of future designs and aid in a smooth handoff between teams.

styleguide_zoomout


Design and Growth Strategy Firm: MACHINE

Project Lead: Ryan Jacoby
Art Director and Lead Product Designer: Erin Nolan
Strategist: Janvi Jhaveri
UX Designer: Miles Fitzgerald

Client Partner: FreshDirect

Chief Consumer Officer: Jodi Kahn
VP of Marketing: Lisa Kolodny
Direct of Content and Social Media: Liz Kennedy
VP of Technology: Ron Breakstone
FreshDirect Design: Paloma Campo, Pablo Aguilar
Photography: Johnny Miller

Development Firm: Door3