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:
$200 billion
annual takeout and
delivery sales
70%
spending increase in meal delivery
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.
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
Strengthen the value
prop and copy
Refer a venue
Clarify CTAs and the referral process
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.
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
Demo screen
Referral screen
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
Demo screen
Referral screen
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.
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.
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
Demo screen
Referral screen
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.
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.
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.