FANFOOD
The One With the Customer Conversion Rate
How might we boost the number of site demo requests and venue referrals?
FanFood is an online ordering platform looking to expand from its initial clientele of sports and event venue concessions into catering to all businesses and restaurant types across the food and beverage industry.
CLIENT PARTNERS
FanFood VP of Product
FanFood UX Researcher
THE TEAM
Two UX Designers
MY ROLE
UX Designer,
UX Researcher,
UX Writer
MEETING THE CLIENT
Kickoff
FanFood had already established a presence in the sports arena, providing customers an easy way to order their favorite concessions from their phone without having to wait in line or miss the action. It was a unique value prop and they were starting to build momentum, but then COVID changed everything.
All stadium and sporting events came to a screeching halt and FanFood had to reassess their business model. Luckily, their cashless and contactless pick-up and delivery translated well into the pandemic world where social distancing became the new normal. They had ambitions to expand their market outside the athletics sector and cater to restaurants, food trucks, hotels, bakeries… and pretty much anywhere with a kitchen or bar.
They had the "what," but still needed to understand the "who" and the "why."
That's where we came in.
We used the business goals and definition of success metrics in order to drive our deliverables.
High-level Goals
Research
To understand the unique goals and needs of new target audiences.
Redesign
To synthesize important research findings to help inform website redesign decisions.
Engage
To streamline content to convert users and increase website engagement.
Success Metrics
Product Demo
Higher conversion rates of users requesting a demo. Current rate is 2.5%.
Venue Referrals
Increase website referral rate to 2%. Current rate is 0%.
With a short three-week timeline, full-time remote constraints due to the ongoing COVID shelter-in-place, and hefty goals to pursue, I rolled up my sleeves and got to work.
RETROACTIVE RESEARCH
The How
I started with a competitive analysis of rival company websites and saw that many displayed statistics and testimonials upfront to convey credibility and establish a sense of trust with their users. I also looked at their navigation and information architecture, which would later aid in the redesign of the user flows.
I had already reviewed FanFood’s existing website before reading the brief in an attempt to reduce bias, but I went back to conduct an in-depth content audit and to study the current website analytics.
Here are some key findings based on the data from the previous 30 days:
61%
Current bounce rate from the Request a Demo page.
71%
Current bounce rate from the Refer
a Venue page.
Restaurants & Hotels
Had the highest (109) and second highest (78) Request a Demo page views
Interestingly, restaurants accounted for the highest Request a Demo page views, but only generated one request; whereas, hotels had the second highest views and converted three demo requests. This, along with the bounce rates gave me a starting point, but I still needed to learn more about their product, so I did what a potential user would do -
I requested a demo.
DEFINING THE PROBLEM
The Why
For an authentic experience, the demo was given by a sales representative, who walked us through how the product works, what it looks like, and the available upgrades and customization packages.
We also spoke with two of FanFood’s customer success managers who served as subject matter experts in order to understand the end-to-end flow from initial touchpoint to full conversion and onboarding.
We then interviewed 8 existing and potential clients in the food and beverage (F&B) business to find out their goals, needs, and pain points.
Interview Participants
3 Restauranteurs
(1 existing FanFood client)
3 Concession Stand Operators
(all existing FanFood clients)
1 former pastry chef
1 sports bar owner
We also sent out a survey regarding perceptions around third-party
pickup and delivery services targeted at F&B industry owners and managers, but had an embarrassingly low response rate - a paltry 6 submissions.
Due to our strict timeline, we decided to scrap the survey and, instead, supplement our interviews with additional domain and market research, specifically around delivery and pickup services trends before and during the pandemic.
My partner and I then used affinity diagraming to synthesize our findings. It became clear that, perhaps due to the current times, health and safety were at the forefront of our users' minds as well as the desire to retain a great customer experience and keep their doors open.
With this in mind, we were able to formulate a problem statement:
Food & 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.
We now had the "why," but we still needed the "who."
UNDERSTANDING THE USERS
The Who
Finding our "who" was a little tricky. From the beginning, we were asked to create personas for a variety of users in the food and beverage industry, prioritizing restaurateurs for pickup and delivery services, but our research did not validate this ask.
Time and time again, we found that third-party delivery apps for traditional restaurants was a crowded and highly competitive market.
Consumers
The average person has 2 delivery apps on their phone and uses them 3x a month.
Most popular third-party apps (2019):
-
Uber Eats
-
Grubhub
-
Doordash
Third-Party Platforms
Restaurants choose third-party platforms based on largest customer base and highest order volume.
Takeout & Delivery Services
87% of restaurant survey respondents (2020) said they cannot survive on takeout and delivery services alone.
It was our belief that the opportunity actually lied with the non-traditional food and beverage companies - the ones that have not historically used pick-up or delivery services, such as food trucks, bars, drive-in theaters, hotels, etc.
Due to the over-saturation of FanFood’s competitors in the traditional space, we recommended that FanFood focus more on these outlier F&B businesses, which would give them a unique value proposition as well as a chance to break into a largely untapped market.
This is Adaptive Annie.
.png)
As our primary persona and founder of Tick Tock Tacos Food Truck, Annie embodies the non-traditional F&B business owner. As a mobile storefront, she has never needed to employ online ordering services before. However, due to new social distancing practices and pandemic regulations, she now needs a way to keep her staff and customers safe and her business operational without compromising on the customer experience.
Having laid the groundwork with our problem statement and persona, we were finally able to move into ideation.
RECONCEPTUALIZING THE WEBSITE
The What
We now had the task of marrying our research findings with the business goals. Using the customer conversion success metrics, we decided to focus on the Request a Demo and Refer a Venue flows.
The current Request a Demo flow wasn't intuitive and lacked the proper product context. We needed to give the users enough information to see if FanFood would fit their business needs and to trust that the product
would be successful in order to feel confident enough to take next steps.
Current Request a Demo Flow
Redesigned Request a Demo Flow
Currently, most of FanFood's business come from word of mouth referrals directly to a FanFood representative, but that means these referrals were subject to business hours and availability.
In reviewing the Refer a Venue flow, I realized that the ultimate goal was not only to increase the number of venue referrals, but rather to generate better, quality leads.
Current Refer a Venue Flow
Redesigned Refer a Venue Flow
We then created low-fidelity wireframes in Figma and conducted formative testing with 4 participants in the F&B business.
Here are some key takeaways:
Additional Product Information
Users needed more context on what the product was and how all the different apps were related
Testimonials & Statistics
3 out of the 4 participants said the testimonials and statistics increased the likelihood of them filling out the demo request form.
Preferred Contact Time & Method
Users wanted to specify their preferred contact method and preferred contact time on the Request a Demo form.
Initial Iterations
Key iterations for the Homepage:
-
Added section describing the benefits and appeal of FanFood's products and services
-
Repositioned the products to promote the business management application over the consumer app.
-
Increased the size of the statistics to draw more attention.
Low-Fi Homepage
Added "Why FanFood?" for more product context
Swapped positions to promote Stand Manager
Made the statistic numbers more eye-catching
Mid-Fi Homepage
Key iterations for the Request a Demo page:
-
Added ability for user to specify a preferred contact method and preferred contact time.
-
Displayed link to Success Story for testimonials.
-
Wrote copy for product descriptions to provide more context.
Low-Fi
Request a Demo
Added Preferred Contact Method and Time options
Included link to
Success Story
Wrote copy for
product descriptions
Mid-Fi
Request a Demo
Key iterations for the Refer a Venue page:
-
Wrote copy for referral process to set user expectations.
-
Reduced the number of steps in the referral process for better scannability.
-
Changed email referral tab to a button and moved it next to the Create Referral Link button.
Low-Fi
Refer a Venue
Wrote copy for
referral process and reduced number of steps.
Replaced tab with a button to send an email referral
Mid-Fi
Refer a Venue
Armed with a newly iterated prototype, we proceeded to conduct usability testing with 4 different participants with relevant F&B experience. Our goal to test out our design iterations as well as our copy writing.
In addition, we wanted to compare three different referral options with the intention of only keeping the most viable:
-
Onsite form filled out by the referrer on behalf of the referral (current).
-
Unique referral link to be shared through text, email, and social media, etc.
-
Onsite invite email to be sent to the referral.
This is what we learned:
Needed Stronger Value Prop
Users found the value prop too vague and could not immediately infer the product's purpose.
Referral Options
The onsite referral form and the referral link tied during preference testing. We recommend further testing for more definitive data.
The email form consistently ranked last.
People Don't Read
Users found the descriptions too wordy and mostly skimmed through the text.
Final Iterations
Key iterations for the Home page:
-
Strengthened value prop to make it clearer and more persuasive.
-
Moved statistics closer to the top as participants believed this data was the most impactful.
-
Rewrote product description copy to reduce the length and make it easier to skim.
-
Relocated benefits section after product description for better flow.
Mid-Fi Homepage
Iterated Homepage
Rewrote value prop
Moved statistics closer to the top of the page
Shortened product description copy
Moved FanFood benefits after product description
Key iterations for the Request a Demo page:
-
Made page header more specific.
-
Shortened demo process description.
-
Rewrote product description copy and increased line spacing to make it easier to skim.
-
Wrote copy for product descriptions to provide more context.
Mid-Fi
Request a Demo
Rewrote page header to specify demo request
Abbreviated demo
process copy
Shortened and spaced out product description copy
Iterated
Request a Demo
Key iterations for the Refer a Venue page:
-
Shortened and clarified the referral bonus incentive.
-
Restated referral bonus and qualifications before form submission.
-
Eliminated the Send Email Form button as it was the least preferred referral option.
Mid-Fi
Refer a Venue
Clarified referral bonus incentive
Reiterated bonus eligibility before form submission
Removed email form referral option
Iterated
Refer a Venue
HAND-OFF AND IMPLEMENTATION
The When
My teammate and I were able to complete the project and hand off the final deliverable of annotated mid-fi wireframes. High fidelity wires, brand exploration, and visual design were specified as out-of-scope.
If given more time, I would have liked to test out our current iterations and refine the UX copy further.
The client was pleased with our work and plans to implement our designs later this year (2020).
ACQUIRED WISDOM
Restrospective
-
Know your stuff: Whenever the client had questions, I was able to articulate the reasons behind our design decisions and cite the research and user feedback. I felt confident addressing both anticipated and unexpected questions or concerns because I had the data to back it up.
-
Watch the workload: In hindsight, we overcommitted on our target deliverables. Although we were ultimately able to complete and hand-off everything as promised, our work-life balance was greatly impacted.
A big thank you goes out to my partner, Kristen Sunny.
You are a rock star.
Congrats, you made it to the end!
Can't get enough?
Check out this paw-some case study:
Or drop a line, I would love to connect!