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.
MY ROLES |
UX Researcher, UX Designer,
Sketch, Figma, Whimsical, Miro, Zoom, Jira, Pen + Paper
VP of Product,
UX Research Intern
2 UX Designers
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.
1. Conduct research to understand new target users' unique goals and needs
2. Increase website engagement with all audiences
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
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:
Delivery + takeout services generate $200 billion in sales annually
Year-over-year spending increase on meal delivery since March 2019
Of Americans prefer paying with mobile apps than cash
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.
Request a Demo page bounce rate
Request a Demo page
Entry point for majority of users
Refer a Venue page bounce rate
Direct search +
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.
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
These insights helped shape our research objectives for our user interviews.
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
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:
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
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:
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
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:
Find information on the product and what it does
Request a demo of the product
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
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:
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:
Armed with this understanding of our users, my teammate and I developed a set of voice and tone principles that FanFood could use to inform its content strategy and messaging:
We then crafted FanFood's voice and tone:
At FanFood, our voice is an easy and warm conversation, as someone who understands and wants to help.
Step Three: Try
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
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:
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
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.