Freshly

Healthy, chef prepared meals delivered to your door.

The Mission

Title

Head of UX UI

Date

Aug 2015 -Apr 2016

Roles

UX Design
UI Design
Guidance on Photoshoots
A/B Testing
Prototyping

Type

Web Interface
Native App
Marketing Website

Freshly is a subscription-based meal delivery service. It's a simple concept with a robust set of features. Customers can choose how many meals they're getting per week, change the meals they're receiving week to week, skip weeks, and adjust delivery and payment methods as needed. When I joined the team, many of those features were already in place, but they lived in an interface that was not intuitive and didn't highlight beauty and ease of the service.

My mission was to create an experience that excited and reassured customers about what they've ordered and empowered them with the features necessary to retain their business, all within a clean and intuitive interface.

UX

Features

The process began by compiling a list of optimal features to be added to the existing set of features. The engineering team then helped to refine that list based on what would be feasible for the V1 of our redesign.

Existing Features

Edit meals
Skip a week
Add addresses
Add payment methods
View invoices
Change password
Manage multiple subscriptions

Feasible Features for V1

View upcoming order*
Plan meals 4 weeks out
Change plans
Delete addresses
Remove canceled subscriptions
Filter by ingredients
Pause until specific date
Option to set new addresses/payment methods as default or one-time-only
Rate and review meals

* without having to enter the edit state

Optimal Additional Features

View upcoming order*
Plan meals 4 weeks out
Change plans
Delete addresses
Remove canceled subscriptions
Filter by ingredients
Pause until specific date
Option to set new addresses/payment methods as default or one-time-only
Rate and review meals

* without having to enter the edit state

UX

Site Map

With our optimal set of features in mind, I built our site map, which featured all of the pages necessary to complete the user experience and determined how the user would navigate around.

Due to limited engineering bandwidth, the sign up flow was inherited by the flow that existed when I joined. Had we been able to optimize it, I would have reordered the flow and consolidated pages.

Home

Signed Out

Sign Up

Enter Email + Zip

Dashboard

Logged In

Settings

Address, Payment, Cancel, etc.

Meal Detail

New Plan

Choose Plan

Account

Email, PW, Cancel Membership

Account

Invoices

Account

Address Management

Account

Payment Management

Edit Meals

Sign Up

Choose Plan

New Plan

Choose Delivery Day

Sign Up

Choose Delivery Day

New Plan

Choose Meals

Sign Up

Choose Meals

New Plan

Address, Payment

Sign Up

Name, PW, Address, Payment

Home

New User Sign Up

Home - Logged In

Profile + Account Management

New Subscriptions

UX

Wireframes

Establishing an information hierarchy played a key role in the wireframing process. For example, we wanted to emphasize photography and prioritize actions like editing meals and upgrading a plan, so the structure of the dashboard needed to be revamped to better accomplish those goals.

Before

The interface that existed when I joined the team presented nearly every  action the user could take on a single page. It lacked visual hierarchy and didn't help guide the user from one action to the next.

After

After determining the actions users take most often and the behavior we wanted to encourage, I was able to restructure the dashboard to better help them accomplish those actions.

UI

Design System

Once we had the website structure in place, I started putting together a design system for the UI. Attributes like fonts and colors were determined by the agency Partners & Spade, who rebranded the Freshly logo, packaging and photography style.

6

9

12

21

Deep Green

#163310

Sand

#F4F3F0

UI

Web Pages

The result was is a more intuitive experience that accentuated the beauty of the food, garnering more excitement around the product, and better guided the user along their journey.

UI

Responsive Design

Mobile versions of the experience were designed alongside desktop.

BRAND

Photography Creative Direction

Partners and Spade created a style guide for our photography, detailing lighting, props and angles. I was onset for photoshoots to ensure our photos adhered to those guidelines.

👋Oh hi, it's me