top of page

FanFood

Visual Design

While interning at FanFood, I created the graphic and visual layers for wireframes of new app features. Along with Ux designers, researchers, and Developers we redesigned the website to reflect FanFood's new mission, set to launch in January 2021. I also Generated engaging B2C and social media content for marketing and media platforms.

SplashAnimationMockup_LOOP_white-3.gif
Fanfood_Follow_1920x1080_RGB_11-sep-2020

Visual Design for the Chicago based Start-up, FanFood.  

PROJECT CONTENTS

Splash Animation

Marketing Graphics

Website Redesign

App Features

Contactless Ordering for Dine-In, Pickup and Delivery with the quickest and easiest-to-use online ordering platform.

CREDITS

John Welch - Product Manager

Frauline Agarin - UX Researcher

Jayden Maloto - Product Designer

Meredith Price - Visual Designer

Timeline

Jun - Dec 2020

Our goal was to strengthen the UI/UX of our consumer app by testing usability, resulting in a decrease of user confusion and a simpler, easier ordering experience.

Our goal was to strengthen the UI/UX of our consumer app by testing usability, resulting in a decrease of user confusion and a simpler, easier ordering experience.

AS VISUAL DESIGNER, MY PRIMARY ROLE INCLUDED

  • Working with UX designers, researchers, and marketing to redevelop the website that is easier to navigate, reduced redundancy and highlighted the most important feature of FanFood: Contactless ordering and delivery in an easy to use way.

  • Improving the visual design of the app, going in tandem with increasing user ability through frequent prototyping and testing resulted in continuous app improvements.

  • Designing a splash screen animation to be used on the open and loading of the app that elevated the brand.

  • Maintaining consistency in branding, messaging, and style within new app features and app improvements.

  • Updating colors to reflect ADA compliance guidelines for digital product.

  • Helping to establishing a team-wide design process. Doing so helped our team perform efficiently and helped solidify work expectations for a growing product team especially in a virtual environment.

  • Using Figma for easy collaboration between FanFood designers and collecting files for future design work.

I created the graphic and visual layers for wireframes of the website. Along with UX designers, researchers, and developers, we redesigned the entire website to reflect FanFood's new mission, launching in 2021.

Main Goal: Focus on B2B interactions, directing visitors of the site to how they can implement FanFood's technology into their business.

Key components: stronger branding and clear copy writing, easier navigation through the site, eliminate redundant and repeated information, highlight FanFood's values like customer happiness and small business support, create a more sophisticated and clean design with cohesive colors, typography, and visuals.

Website Redesign

Lots of imagery and visuals were important to show off FanFood's product as well as reinforce their focus on the customer experience.

0.0 Homepage.0 - Visual Comp.png
2.0 Our Products - Overview - Visual Com
4.3 FAQ - General Expand - Visual Comp.p

Following brand guidelines, I  generated engaging B2C and social media content for marketing and media platforms to grab users attention and increase social media engagement.

MARKETING GRAPHICS

marketingmockup-01.png
marketingmockup-02.png

CASE STUDY - APP DESIGN & USABILITY TESTING

20% of users incorrectly completed the task requested and 60% of users expressed confusion while entering order details.

Led by our researcher, we connected with 10 individuals to test the usability of our platform. Almost all identified as frequent users of mobile food ordering apps and were asked to perform a FanFood order from bagging to checkout. The average recommendation score from our users was about a 5.9 out of 7.

LandingScreenOriginal.png

5/10 users miss the initial "Date/Time" module and are surprised to be adjusting it at checkout. In addition, the vocabulary "Order Now" and "Order Ahead" was confusing to users.

4/10 users were not satisfied with the checkout process, mainly having trouble with the payment module and overall crowdedness of single-page elements.

PaymentScreenOriginal.png

SOLUTION #1

Wireframes.png
Wireframes 2.png

Ability to edit order details throughout any process of the order and "Pickup" and "Delivery" modules alongside time modal.

These modals are consistent throughout the app and feature a sleeker design that takes up less realestate on the app.

Visual design of the new feature, highlighting the top modals, for easy access and clarity for the user.

PickupModal.png
Deliverymodal.png
Wireframes 3.png

More intuitive checkout flow that reinforces user's sense security and ease, allowing clarity between modules and steps in the placing order process.

SOLUTION #2

Studies show the use of the blue and security icons reinforce user security of payment. 

PaymentMethodPrototype_small.gif
paymentmodulescondensed.png

Working on a Product team created an entirely new experience for me. I combined business goals to target consumers and enhance user experience through UX and visual design. Extensive design process, consistency, and quality of product is key to create new solutions that enhance user experience and increase the quality of product.

TAKEAWAYS

bottom of page