What is prado?

Prado is a platform made for food and beverage businesses that powers same-day, scheduled and recurring orders all in one seamless menu experience.

Overview

Project TASK:

Design a menu ordering system that supports our 4 target merchant types and powers both one-time and subscription ordering for local and national fulfillment.

PROCESS:

For this task, I looked to the Design Thinking methodology, which helps in addressing complex problems by first understanding the human based needs. The five stages of the Design Thinking Methodology are Empathize, Define, Ideate, Prototype, and Test.

Emphathize

Understanding the Merchant and their target audience.

In order to build a platform for food businesses, we need to first understand our target merchant types and their end customers.

Quick Service Retail

Profile

QSR is a wide ranging segment of restaurants. The top priorities for Prado in this segment include restaurants relying on Goldbelly for national shipping, food hall vendors, up and coming QSR players. Listed in order of importance:

• Food hall vendors (400 +)
• Restaurants Relying on Goldbelly for nationwide distribution
• Restaurants using toast
• Up and coming fast casual restaurant chains
• Established fast casual chains w/ aging online ordering software

PERSONA:

Entrepreneurs, executives, risk takers, people who want to succeed.
Key focus: Located across the United States with 40 or less locations. After researching current software used, a consolidated platform like Prado would greatly benefit

current friction points:

While a select group of these restaurants use new tech like like Lunchbox and Olo a surprising number still rely on multiple apps that end up directing patrons away from the restaurant’s website.

Current tech:

Toast, Square, Olo, Lunch Box, Ordermark, Nextbite, ChowNow, Door Dash, Postmates, UberEats, Goldbelly.

CPG (Consumer Packaged Goods)

Profile:

Food & Beverage CPG sector presents massive opportunities to ambitious entrepreneurs. The US packaged food market size was valued at UD 996.56b in 2020 and is expected to expand at a compound annual growth rate (CAGR) of 4.1% from 2021 to 2028. Supermarkets make up the largest distribution channel for this sector, followed by convenience stores, online, and other.

• Beverage
• Coffee (Wholebean)
• Bars/Meal Replacement
• Jerky (vegan&traditional)
• Cookies & Candy

PERSONA:

Entrepreneurs, food and beverage professionals, college kids

current friction points:

An analysis of ten websites paints an interesting picture of the food & beverage CPG marketspace. It's surprising to see how many of the large CPG players don't utilize their website as a marketplace. Companies like POM automatically direct patrons to Amazon, Mid-large players like Oli-Pop are using multiple apps like Shopify and ReCharge and small time up-and-comers like Super Lost Coffee are using Squarespace. All of these points spell out one problem a loss of ownership in the sales process that doesnt need to be lost.

Current Tech:

Recharge, Shopify, Amazon, Square Space, bold

Local Indie-Grocery

profile:

Local grocery chains and small bodega style grocers cater to densely populated areas where repeat customers pour in around lunch time and before heading home at the end of the day often-times purchasing the same items from their shelves or deli section.

• Convenience Grocery
• Local Supermarket

PERSONA:

Entrepreneurs, food and beverage professionals

current friction points:

Weak ordering capabilities usually consisting of third party apps that sequester the customer experience and more importantly, data. Even larger chains with nice websites like Gus's in San Francisco have ordering directed to websites like Doordash and instacart.

Current Tech:

Uber Eats, Doordash, Instacart, Square

Meal Prep

Profile

This is a hybrid segment that straddles both the CPG and in some cases Farmers Market vendor categories. I want to focus on Home Chefs with meal kit businesses and small to medium sized Ready to Eat Meal providers for the launch. These fall outside of the traditional food tech businesses led by industry giants Such as Blue Apron and Hello Fresh that are accountable for up 70%t of this industry's revenue. Based on our conversations (Jon & 1) HEB is also a big player that is also a big player in this space with annual rev poised to hit $2b in this market segment accounting for These are smaller companies that can be as organized as spirited foods using Shopify and as lo-fi as ChefG using Wix.

• Home Chefs
• Small Ready to Eat restaurants
• Grocery Stores

PERSONA:

Independent Chefs, entrepreneurs, rough and tumble folk who have saved all their lives to start side businesses or launch passion projects, personal trainers, college kids

current friction points:

An analysis of ten websites llustrates the diverse set of order tech being used by upstarts in this space, the majority of which create a lot of friction at the ordering stage with clunky UI. Additionally setting up orders isn't always so simple.

Current Tech:

Ordering: Wix, Shopify, Alfa Trait, Wordpress, Go Prep, Ready Kit Go, Squarespace, BentoBox, Delivery Biz Pro, Bottle, Cast Iron, revelup, big commerce

Ordering Types to Support

How do we support both one-time and subscription ordering or any fulfillment type?

Subscription Services

TYpical solution:

One Time Ordering

TYpical solution:

Both One Time Ordering & Subscription Services

TYpical solution:

Ideate

Research Takeaways

Goals

• For local delivery, allow for Zip entry & multiple fulfillment types on one menu. • For National Shipping, allow for zip field to be turned off • Upselling subcsriptions
• Add to cart directly from menu without clicking into product details
• Ability to group products - bundles
• Allow for any merchant type to use the platform (modifiers, complex navigation, one-time + subscriptions, Product variants)
• Be able to manage subscriptions without creating duplicate orders
• Easily able to Checkout for one-time orders or update recurring ones • Allow for several gateways into ordering (CTA block, Subscriptions block, Main menu, emails, etc.)

UI SOLUTION:

Landing Page Menu Entry Blocks

UI SOLUTION:

Main Menu

UI SOLUTION:

Solution for Ordering Tiers

UI SOLUTION:

Subscription Upselling

UI SOLUTION:

Cart

UI SOLUTION:

Checkout

UI SOLUTION:

Subscription Menu

UI SOLUTION:

Subscription Cart

UI Solution:

Subscription Management

Accessibility

How do we ensure Prado’s merchants can easily create a website that meets ADA guidelines.

Admin Tools Online Store Section

Our Admin’s branding section focuses on accessibility and helping users understand its importance. The tool offers quick colors for non-designers to easily select high-scoring color palettes and prohibits them from selecting font sizes that are too small.

Color Previewing

Allows for users to see exactly how quick color palettes affect page design.

Themes

Themes are an easy way for users to select pre-built landing pages and block packs that all meet Accessibility requirements.

Prototype

Prototypes were all built using Figma. The purpose of the prototype was to provide our development team with all UX information while building out the experience. We also did some early-stage testing internally using the prototype.

LOW Fidelity Prototype

Used to help show development and our merchants various customer journey user flows.

High Fidelity Prototype

Used to help show development and our merchants various customer journey user flows.

Test

User Testing with Our Merchants

We collected feedback from two of our customers, Everytable and Prep to Your Door. I gathered feedback from Everytable Customer Chat agents and highlighted common issues/feedback. Prep to Your Door conducted user testing in-person at a South by Southwest event in Austin. They also sent a survey to their customer base on the new site experience.

Key Takeaways

• Our merchants expressed needing a education modal to let their customers know about the refresh
• Customers scrolled past zip on mobile (allow turning hero off, also modal triggers, also made larger)
• Customers had trouble understanding what the One-Time Ordering and Subscription Plan sections in the shopping cart were.
• We found that when users signed up for subscriptions, having to enter their information and create a password was too heavy of an experience on the main menu. Instead we decided to remove this step and have them enter only their email at this time in order to recognize if they already have an existing subscription.
• Some customers were going to the main menu and placing new orders, thinking they were managing a subscription.
• Customers wish to be able to edit subscription orders further in advance for multiple weeks out.
• Subscription LOCKED order state isn’t apparent enough. Need to call it out more.
• Found bugs that were overlooked by dev team

Improvement:

Our merchants expressed needing an education modal to let their customers know about the refresh.

Improvement:

Customers scrolled past zip on mobile. Our solution was to make the zip field larger and also trigger a fulfillment modal if the user scrolled past zip entry.

Improvement:

Customers needed more insight into Cart sections and how they work. Our solution was to add descriptions that can be configured by the merchant.

Improvement:

We found that when users signed up for subscriptions, having to enter their information and create a password was too heavy of an experience on the main menu. Instead we decided to remove this step and have them enter only their email at this time in order to recognize if they already have an existing subscription.

Improvement:

Some customers were going to the main menu and placing new orders, thinking they were managing their subscription. To stop this, we presented a modal to the user on the menu asking them to managing their existing subscription or place a new order.

Improvement:

Customers wish to be able to edit subscription orders in advance for multiple weeks out. To support this, we built in a calendar at the top of the Plan Management page that allows for easy editing of future orders and fulfillment settings.

Improvement:

The subscription locked order state isn’t apparent enough and needs to be easily seen. We emphasized the locked state by making it a banner on the menu and Plan Management page.

Improvement:

We had found that bugs were often being overlooked by dev team. As a solution we decided to have the Design team write test case scenarios both for the dev and QA teams.

Results

We collected feedback from two of our customers, Everytable and Prep to Your Door. Customer feedback and common issues were collected by Everytable’s chat agents and communicated to me daily on Slack. Prep to Your Door conducted user testing in-person at a South by Southwest event in Austin. They also sent a website feedback survey to their customer base.

Next Steps

• How can we continue to support our key merchant types even further with UX/UI enhancements?
• How can we customize and enhance the subscription ordering experience even further? For example, allowing them to pause a subscription instead of just cancelling one.
• How do we make Subscription ordering states even more apparent and clear to scan on a page?
• How do we improve customer LTV and AOV?
• Extend design system and allow Prado Enterprise merchants to customize UI even more.
• Hire machine-learning engineer to improve and personalize the customer journey experience as well as platform marketing tools