prefare onboarding


overview

A local-to-Denver meal delivery service that focuses on meals that pre-prepped and ready to eat in under fifteen minutes.

Like many similar companies, COVID drove a huge uptick in Prefare's customer base and their tech platform and front-end was no longer able to support their growth. Fresh moved Prefare to the next level with a full re-build / re-architecting to position them for continued scale.

deliverables

Wireframes
User Interface
Prototyping

software

Figma

 

challenge


The primary challenge that Fresh Product Design took on for Prefare was assessing and streamlining their technology stack. When we first started working with Prefare, there were two separate customer portals running simultaneously, each with their own front-end experiences, databases, billing systems, and reporting.

Read more about the engineer’s task to rework their technology stack.

While the engineers started assessing the backend- I started working on cleaning up the overall design experience. We decided to focus first on redesigning the onboarding flow.

 

existing onboarding flow

 

select an image to enlarge

competitive analysis


Apps Reviewed

Blue Apron
Sunbasket
Gobble
Spicy Radish
Hello Fresh

High-Level Comp Analysis Findings

Most competitors had shorter and simpler sign up flows. 3 of the 5 competitors required account creation before selecting a plan or payment.

Most competitors don’t offer a wide range of meal choices each week and most of them don’t let consumers select meals until after payment.

ui + ux design


While our engineers starting working through the backend- I started examine the design of the onboarding flow.

An easy lift was updating the UI to a more modern style and more accessible features (ex. larger text and bigger click targets). This redesign also including making sure any new designs were mobile friendly. The user flow though really needed clean up and streamlining- the existing onboarding flow consisted of seven steps when most competitors only had four or five steps total.

 

suggested user flow

 

wireframes

I started with low-fi wireframes to help the client understand that changes we were recommending for styling and accessibility before jumping into high-res designs.

select an image to enlarge

 

final designs