FanFood

Pivoting to a new target audience

01 Overview

FanFood offers affordable, commission-free mobile ordering tools for food and beverage businesses.

Type

UX Research

UX Writing

Interaction Design

Duration

2 months

Team

Kristen, UX/IxD Designer, UX Researcher, UX Writer

Rachel, UX/IxD Designer, UX Researcher

Stakeholders

VP of Product

UX Researcher

02 Background

The Opportunity

By mid-2020, FanFood’s primary audience, sporting and event venues, were largely unable to maintain operations due to the COVID-19 pandemic. To pivot, the company needed to direct its marketing efforts towards a more general audience by highlighting its contactless solutions for any food or beverage business.

The Challenge

The company needed our help to increase engagement with this diverse target audience by validating its proto-research on users’ unique goals and needs and by increasing website engagement with all audiences.

The Hypothesis

A marketing website that enables users to learn about mobile ordering services that can help their businesses maintain operations during COVID-19.

 

Demo conversion

Success Metrics

Increase demo request conversion above current rate of 2.5%

Referral rate

Increase referral rate from
0% (current rate) to 2%

 

03 Research

Market Trends

FanFood wanted to market its solutions for helping food and beverage businesses maintain operations during COVID-19, specifically contactless takeout and delivery and cashless payments. I was curious to learn more about this space and wanted to see if there were opportunities for growth. Market analysis revealed a positive shift towards takeout and delivery services:​

Graph

$200 billion
annual takeout and

delivery sales

Bar graph showig 70%

70%

 spending increase in meal delivery

Pie chart showing 84%

84%

of Americans prefer paying with mobile apps than cash

Analytics

Since our success metrics focused on rates related to demo requests and venue referrals, I wanted to see the current bounce rates and analytics for these pages. *Analytics as of June 2020

61% bounce rate on Request a Demo page

71% bounce rate on Refer a Venue page

Request a Demo page is the entry point for the majority of users

Direct search and social media are the main ways users find the website

The high bounce rates for our key pages showed us that we had to prioritize clear CTAs and actionable copy on our landing pages.

The Company

The insights we gained from our conversations with the FanFood team helped shape the research objectives for our user interviews and supported our design goal to validate the company’s audience.

 

We learned that: 

Restaurants and drive-ins are FanFood’s fastest-growing customer base

FanFood’s most valuable touchpoint is the product demo

Most referrals are made “offline” instead of through the referral form

User Interviews

We interviewed 8 food and beverage business owners from a variety of venue types.

8 user interviews

I wanted to know: 

About the mental models, behaviors, and attitudes toward food and beverage services during COVID-19

About the frustrations and gaps in existing food and beverage services

How food and beverage businesses have tried to adapt to COVID-19 regulations

How business owners and existing customers view FanFood's value proposition

"We’re able to continue operating during COVID because of mobile ordering apps."


- Restaurant owner
 

04 Insights

Two Audiences

After affinity diagramming to analyze insights from user and SME interviews, two segments of the new target audience began to emerge:

 

Traditional (think: restaurants)

Non-traditional (think: food trucks, bars, drive-in theaters)

Traditional food and beverage businesses want to grow their customer base through marketing while those in the non-traditional space rely on mobile ordering to maintain operations and prioritize customer experience over generating revenue. While these audiences have different motivations, their end goals are the same.

We designed for our primary persona, who represents the non-traditional segment.

Key Screens

Keeping in mind the business and user needs, my teammate and I aligned on our key screens and goals, based on project scope and success metrics.

Home icon

Home

Strengthen the value

prop and copy

Refer a venue icon

Refer a venue

Clarify CTAs and the referral process

Request a demo icon

Request a demo 

Persuade users to 

request a demo

Storyboard

To rethink the referral process and understand why business owners might refer others to FanFood, I created a storyboard based on our primary persona (a food truck owner named Annie) and on earlier stakeholder conversations. This informed my ideations for the Refer a Venue screen.

Fanfood storyboard

Voice and Tone

To increase engagement with FanFood’s current and new target audience, we developed a voice and tone guide based on the company’s branding and personality.

We also developed a set of voice and tone principles that FanFood could use to inform its future content strategy and messaging:

Empower

Excite

Guide

Inspire Trust

Support

“At FanFood, our voice is an easy and warm conversation, as someone who understands and wants to help.”

05 Wireframes

Low-Fidelity

We used Figma to collaborate on our wireframes, creating low-fidelity versions of our key screens so we could test our ideas and iterate quickly.

Home screen
Fanfood home page, low fidelity
Demo screen
Fanfood demo page, low fidelity
Referral screen
Fanfood referral page, low fidelity

Formative Testing

Formative testing with 4 food and beverage business owners revealed that users want to: 

See business statistics and testimonials, which would increase increase trust

in the company

Be in control of when and how they will be contacted for a demo

Have additional context on how FanFood’s products interact

Mid-Fidelity 

We implemented these changes and added detailed microcopy when we brought our low-fidelity wireframes into mid-fidelity.

Home screen

Moved statistics on the home screen to just below the fold to draw attention and increase trust in the company

Switched the order of products to cater to B2B customers

Added a “Why FanFood?” section to the home screen to highlight the benefits of using FanFood

Fanfood home page, mid fidelity
Demo screen
Fanfood demo page, mid fidelity
Referral screen
Fanfood referral page, mid fidelity
 
 

06 Usability Testing

Key Tasks

We conducted remote, moderated usability testing with 4 food and beverage business owners. Below are the tasks we prompted to test our key user flows:

What does FanFood offer and how can it help your business?

How would you request a demo of FanFood’s products?

You want to refer another business or venue to FanFood. How would you do this?

Key Learnings

Inspire trust in the company.

Test participants responded well to elements throughout the interface that made FanFood seem reliable and trustworthy, rather than like it was simply pushing products. Key elements that inspired trust were business statistics, success stories, and the “Why FanFood?” section. I learned that users first want to see how a company can help their business before they reach out to learn more.

It’s all about the UX writing.

Our wireframes went through several rounds of iterations, specifically in regards to body copy and UX writing. As our client wanted us to engage with all business verticals, we wanted to test our key messaging, like the value proposition and section titles, but also the page descriptions on our key screens. We received invaluable feedback by speaking directly with users through moderated usability testing.
 

07 Visual System

Colors

We used FanFood’s current branding, including colors and typography, which evokes excitement, spirit, and fun - feelings you get from attending a live event! However, I darkened the primary green color (#32BA99) in my mockups to make it accessible.
 

Color palette

Typography

Montserrat

SemiBold; used for page titles. This sans serif font is fun and a bit quirky, like the brand.

Roboto Condensed

Bold and regular; used for headers, sub-headers, and body copy. This sans serif font is easy to read and doesn’t distract from the information on the page.
 

Icons

We used a different set of icons than FanFood’s branding, since we felt the website’s current icons were too large and spoke to only sporting and event customers. The set of icons below feels more professional and approachable for a variety of customers.

Fanfood icons
 

08 Design

Key Screens

Below are the key screens we designed for FanFood, which aim to meet the project’s success metrics to increase the demo and referral rates.

 
Home screen
Fanfood home page, mockup
Demo screen
Fanfood demo page, mockup
Referral screen
Fanfood referral page, mockup

09 Outcomes

Deliverables

Redesigned and prototyped FanFood’s home, Request a Demo, and Refer a Venue screens to meet the intended success metrics of increasing demo and referral rates. Validated FanFood’s proto-research through in-depth user, market, and stakeholder research and iterated on UX writing to engage with current and new customers.

Impact

Our redesign explored ways to streamline user flows for the request a demo and referral processes and to improve the UX writing and copy across the site. As FanFood transitions into serving an expanded customer base, the company plans to incorporate key learnings and design elements from this project.

 

10 Future Roadmap

I suggested the following feature adds to the FanFood team, as I think that these designs would help build the company’s following and expand its B2B2C customer base.

 

About Us Page

FanFood has a unique origin story and it would be beneficial to show it off to give both B2B and B2C customers a better sense of what the company is about. It’s important for many of today’s customers to have this information so they know what a company values before they commit to purchasing a product.

About Us page, low fidelity

Fan Referral Program

During one of my conversations with a test participant, I heard that people using FanFood to order food might be interested in referring businesses that they’d like to see on the FanFood ordering app. This is an area that FanFood should explore, as B2C customers might be more likely to
refer a venue than B2B customers would.
 

Fan Referral Program, low fidelity

If I had more time...

I would conduct further usability testing on the wireframes and UX writing. Due to time constraints, we were only able to test with a handful of food and beverage business owners, but it would be beneficial to expand the participant pool to gain insight from additional business owners in the traditional and non-traditional spaces.