FanFindr

A startup for locating fans of your team anywhere in your city by finding restaurants and bars where you can watch the game. My job was to redesign a few flows for this client as a bootcamp project.

USER NEEDS

How might we make using FanFindr to find games and follow sports, teams, and players feel intuitive, easy to use, and fun?

BUSINESS NEEDS

How might we make sure users want to use FanFindr instead of calling the restaurant to see which games are playing?

In this case study, I'll walk you through my process including stakeholder interviews, usability tests, creating new user flows, making the app more accessible, and updating the UX/UI.

Research & Interviews

What was the challenge?

My team and I interviewed the stakeholder to discover the desired outcome of this project.

So, what did I do?

A stakeholder interview!

We each posed a few questions of the stakeholder. This image shows one of my questions to the stakeholder, and the notes we took from her response in sticky-note form. The stakeholder interview revealed that she wanted:

A New Solution for the Map

There was a desire for a better map design than what was currently in place. The old designs did not provide users with a pleasant user experience. It was difficult to navigate around and use the old designs.

New Branding Concepts

A new branding concept and a new design system would be welcome. This was good practice for me to stretch my graphic design skills. The colors that the stakeholder really wanted to use were some sort of orange, and sunset colors.

New Navigation

The main focus was supposed to be only on the onboarding flow (according to the brief), but the stakeholder seemed more focused on other user needs. Most importantly, she wanted a solution to show users the information they needed in an easily navigable way.

New User Flows

What was the challenge?

Knowing now what the stakeholder wanted us to focus on and what the brief called for, I needed to find solutions to meet the stakeholder's and users' needs.

So, what did I do?

Create a new user flow!

The brief called for a new onboarding flow, the ability to add favorite sports, teams, etc., and the ability to go back and change those selections easily, as well as any other flows that might have been desired based on usability tests.

Initial User Flows

The final user flows cuts out the unnecessary information gathering and gets a user directly to what they need to do so that they understand the purpose of the app, can easily achieve their goals of booking a table at a restaurant they like, and hopefully get to that restaurant ASAP.

Usability Tests

What was the challenge?

I needed to see if my designs were successfully solving the problems that I set out to solve.

User flow during usability tests

So, what did I do?

Usability tests showed that users were getting confused, lost, and uncertain about how to proceed and why one would use the mobile app with my initial designs. People were not able to accomplish the tasks I set before them easily. Navigation to complete the onboarding/roster selection was not as simple as I thought.

This image shows the heat map of the landing screen. Even on the landing page, users were not certain how to proceed forward.

I gathered these key insights from the first usability tests:

Too Thorough, Too Long

The initial user flows that I started off with were focused on making onboarding thorough, but it was too long and there would be high rates of drop off.

I Thought I Knew Their Needs

Users would wander around without finding where I was thinking/hoping they would go to. Another case of "You are not the user" in action.

Show Them The Way

I needed to provide more guidance so that users could achieve their goals more quickly and easily. Navigation to the create a roster flow was not as easy as I thought it would be.

Final user flow

Major Design Decisions – A New Design System & New UI

A New Design System:

A new color scheme felt needed, because the previous colors were not very accessible. I selected colors that the stakeholder said she really liked from the previous designs - orange, and a bit of a "sunset" palette. However, I felt that the yellow-orange color needed a "cool" color to offset the vibrance of that color, so I picked a blue that had a high enough contrast, and that had a complementary feel to the orange. I used a cool blueish black and gray as well to keep the warm orange from being too overpowering. The blue, black, and gray colors all have a high enough contrast against the lighter colors to reach WCAG AAA standards.

Additionally, although the stakeholder really liked having an orange color as a key color in the designs, to ensure accessibility, anything orange was only used on high contrast dark backgrounds or with black or dark brown text on top, because the orange against the white did not have enough contrast based on WCAG AAA standards.

The fonts also had to be more accessible, and so I chose fonts that were still giving off a "fun" and "action/sporty" feel, but also were sans-serif so they were still easily readable.

For accessibility reasons, I ensured the font styles go no smaller than 14px (but never used that particular text style anywhere in my designs, so it was all really 16px minimum).

New UI:

New user interface designs were necessary. The designs below show the transformation from what was originally designed (not by me) to my designs, and the differences are quite stark. The first image shows the previous way that games would be selected, while the three screens that follow are the way that I decided to tackle the challenge of finding and choosing a game.

In terms of ensuring accessibility, and because I know my own big fingers can barely tap on small icons on smart phones, I felt that it would be crucial to have bigger buttons/clickable areas, and ensuring that the sort and filter screens were as clear as possible.

Next Steps

This project was only meant to cover certain flows, creating the onboarding flow and the flows for adding and changing sports, teams, etc.

However, I would like to continue designing the rest of the app. I think the News page could have some interesting problems to solve.

Like what you've seen? Then please reach out to let me know!

Contact

© Serena Entezary 2023
UX Researcher & Designer

"Let yourself be silently drawn by the strange pull of what you really love. It will not lead you astray."

– Molana Rumi