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.
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.
Grocery shopping typically involves grabbing the essentials first, so we put the customer’s frequently ordered items right at their fingertips.
A collapsing navigation pattern allows customers to quickly jump in and out of storefronts and categories.
Smaller in-app stores designed with custom photography and badges echoed real-world shopping.
Customers can find shoppable recipes, cooking tips and tricks, and producer stories all in one place.
At checkout, customers can view and edit their delivery information, address and payment info, and then checkout with a single tap.
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.
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.
Food photographer Johnny Miller shot lifestyle photos depicting everyday cooking moments to use on shop landing pages and in promo areas throughout the app.
Product cards support a wealth of information while still being legible and scannable.
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.