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.
How might we make using FanFindr to find games and follow sports, teams, and players feel intuitive, easy to use, and fun?
How might we make sure users want to use FanFindr instead of calling the restaurant to see which games are playing?
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.
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.
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.
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.
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.
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 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.
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!
© 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