FanFood

Increasing engagement with a new target audience.

FanFood offers affordable, commission-free mobile ordering tools to help food and beverage businesses increase and retain revenue, reach new audiences, and elevate their customer experience. 

THE CHALLENGE

Due to COVID-19, FanFood needed our help to increase engagement with a more diverse target audience. Prior to the pandemic, the company was primarily focused on partnering with sporting and event venues, which were unable to maintain operations during COVID-19. 

To pivot, the company turned its focus to providing contactless solutions that could be used at any food and beverage venue.

FanFood needed our help to understand and validate the unique goals and needs of this diverse audience.

HIGH-LEVEL

GOALS

1. Conduct research to understand new target users' unique goals and needs

2. Increase website engagement with all audiences 

SUCCESS METRICS

1. Increase conversion of users requesting a demo
(from current rate of 2.5%)
2. Increase referral rate from 0% (current rate) to 2% 

Step One: Learn

MARKET TRENDS

FanFood wanted to market its solutions for helping food and beverage businesses continue operating during COVID-19, including 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:​

ANALYTICS

Since our success metrics focused on specific KPIs around demo request and venue referral rates, we wanted to know more about how users find the FanFood site and current bounce rates for these pages. 

61%

Request a Demo page bounce rate

Request a Demo page

Entry point for majority of users

71%

Refer a Venue page bounce rate

Direct search +
social media

Main ways that users find the site, but "offline sources" generate most new customers

                                                                   *Analytics as of June 2020

The high bounce rates for our key pages showed us that we had to prioritize clear CTAs and actionable copy on our landing pages.  We also needed to find out why users preferred to refer venues offline rather than on the site.

Analytics showed us that there were many opportunities to improve the users’ experience on the site, and also meet business goals. 

THE COMPANY

From our conversations with the FanFood team, we learned that:

​

• FanFood's fastest growing customer base includes restaurants and drive-ins

• The company’s most valuable touchpoint is the product demo

• FanFood’s main geographic market is the U.S., but it wants to expand into
  international markets 
   

These insights helped shape our research objectives for our user interviews. 

OUR USERS

FanFood wanted to have a deeper understanding of a wide range of food and beverage businesses, so it was important for us to speak with a variety of venues.

Our main goal was to understand users’ needs and attitudes towards pickup and delivery services in a pandemic world. 

We interviewed 8 food and beverage owners:

3 traditional restaurant owners (1 existing FanFood client)

3 concession owners
(all existing FanFood clients)

1 former pastry chef + bakery manager

1 bar owner

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

​

traditional + non-traditional food and beverage businesses

RESEARCH INSIGHTS

Traditional food and beverage businesses (restaurants):

• Want to grow their customer base

• Want access to customer data for marketing 

• Want to avoid the high costs of third-party delivery services

Non-traditional food and beverage businesses

(i.e. drive-ins, food trucks, bakeries):

• Rely on mobile ordering to maintain operations during COVID-19

• Prioritize providing a great customer experience over generating revenue

• Pivot their menus to be takeout- and delivery-friendly

Although these two audiences have different motivations, their end goals and business priorities are the same, so we chose to focus on our primary persona and landed on this problem statement: 

MEET ANNIE

Food and beverage businesses need a way to operate in a safe, contactless manner so that they can continue to provide a great customer experience and generate revenue.

"

As a food truck owner looking to adapt new technologies to maintain operations during a pandemic, our primary persona, Annie, represented the non-traditional food and beverage business owners. She views mobile ordering and contactless pickup and delivery as essential business needs, but she’s also looking for a way to enhance her customer service and reach new customers through marketing. 

" 

​

Primary persona, Adaptive Annie

Step Two: Make

IDEATION

After taking time to sketch individually, my teammate and I aligned on the key screens we wanted to focus on, based on the project scope and success metrics: 

Home screen

To strengthen FanFood's value proposition +  messaging for target customers

Refer a Venue screen

To clarify CTAs + the referral process

Request a Demo screen 

To clarify CTAs + persuade users to submit request form

LOW-FIDELITY WIREFRAMES

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

To determine the usability and effectiveness of our screens, we conducted formative testing with 4 participants from the food and beverage industry. They were asked to: 

1. Find information on the product and what it does

2. Request a demo of the product

3. Refer a venue

​

We made iterations and brought our wireframes to mid-fidelity after learning the following: 

%

Seeing business stats + testimonials increased the likelihood that users would request a demo

Users wanted to set their preferred contact method + time on the request a demo form

Additional context would help users understand how FanFood's products interact

INFORMATION ARCHITECTURE

During formative testing, I suggested using a hybrid card sorting exercise to help us understand users' mental models of FanFood's site. A redesign of the existing site map might help users understand the company's product offerings and more easily find the Refer a Venue and Request a Demo screens.

However, we only received 6 responses, so we didn’t have robust enough data from the exercise to inform our site map. So, we studied our competitors' sites to get an idea of their navigation and labeling systems and then made the following changes:

BEFORE

AFTER

DEVELOPING VOICE + TONE

Once we had a better idea of our information architecture and some of the language we wanted to incorporate into our designs, we focused on our UX writing, which we planned to test during usability testing. We were tasked with developing FanFood's voice and tone to make sure the site's messaging would speak to both current and new target customers. (Check out a deep-dive of my process in one of my mini case studies!)

We wanted to maintain the company's overall branding and voice, so we created a tone map to to gauge FanFood's personality. 

FanFood tone map

From our conversations with users during the research phase of our project, we learned that FanFood's audience wants to partner with a company that provides: ​​

Information

Solutions

Support

Step Three: Try

​

USABILITY TESTING

We decided to conduct usability testing to gauge the usability and desirability of our designs. We tested with 4 participants, who currently or have worked in the food and beverage industry. Our main objectives were to test the effectiveness of the UX writing in helping users understand FanFood's products and the benefits of requesting a demo or referring a venue. 

​

Insights from testing provided several opportunities for improvement:

The value proposition was not clear or persuasive enough for users

"Our Products" section on the home screen + "What is FanFood?" section on the Request a Demo screen were

too long

Users preferred to fill out the referral form or create a link over emailing the form

We made the following iterations before we handed off our designs to our client: 

BEFORE

AFTER

INTERACTIVE PROTOTYPE

FINAL MOCKUPS

Below are the final mockups I created based on FanFood's branding, since I wanted to include them in my portfolio. I darkened the green used throughout to increase readability. To see how it all comes together, click on the interactive prototype! 

​

Our client plans to implement our redesigns later this year (2020). 

​

Mockup: Home screen

Mockup: Request a Demo screen

Mockup: Refer a Venue screen

INTERACTIVE PROTOTYPE

Open Interactive Prototype

LESSONS LEARNED

• Recognize my time constraints and set reasonable expectations. 

  I was confident that we would be able to produce all of our intended deliverables for this project, but I didn't consider the need to use additional tools/methods when planning the project roadmap. We accomplished all of our deliverables, but at the expense of work/life balance. I'm proud of what I did, but in the future, I'd like to have further discussions about the realistic scope and feasibility of a project.
   

• With more time, I would have...

  ...loved to conduct further testing on our mid-fidelity 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 business owners in both the traditional and non-traditional spaces.