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