Design Lead / Copy / Design System
Fan inc. Mobile App
A banking app for college athletes, that helps them promote themselves and collect payments directly from fans.
The Challenge
Fan inc. wanted to create a mobile app to connect college athletes with their fans, giving them a platform to earn money based on their name, image, and likeness (N.I.L.). It needed to:
Verify that the athletes signing up were legitimate, N.I.L. eligible college athletes.
Include a banking feature for athletes to manage the money they earned, access their debit card info, and opt-in to having federal taxes withheld.
Have social features for athletes to be able to promote themselves to their fan-base.
Provide a path for motivated fans looking to financially support their favorite college sports teams to help them win.
Team:
Uptech Studio: Product Management, Development, Design (me)
Raygun Design: Brand, Audience Research, Initial Wireframes
Platform: The app was built using Flutter and runs on iOS and Android.
My Role
From 2022 – 2024, I was part of the team that launched the Fan inc. app. A first draft of wireframes and brand identity were created by Raygun Design. I took over to revisit the UI and overall visual design per the client’s request, build personas, complete the UX for undefined MVP features, write app copy, and create dev-ready designs. I also designed their user management system and financial dashboards.
It was my role to get college athletes excited about – and not overwhelmed by – opening a bank account.
Researching and explaining how to choose your tax rate was probably the biggest hurdle, but even getting students to upload the right kind of I.D. photo proved challenging. It required a lot of storytelling during onboarding.
Revisiting the Look and Feel
Even though development was underway, the client asked me to have another go at the visual design and interface. There was concern that the existing designs lacked excitement and wouldn’t appeal to 18-22 year old college athletes.
Working within brand guidelines, I developed designs that combined the energy and emotion of the college sports world and the legitimacy of a bank. Fortunately, Fan inc. had a group of college athlete influencers on board who would use the app before launch so we were able to get real feedback from our audience. See below for a few examples of the before and after.
While everybody were excited about the large image cards of athletes on the fan dashboard, it unfortunately wasn’t a good experience once the app had many athletes signed up. So we broke the list down by school and team, and added a favoriting option for teams to make the experience more manageable.
Personas
The personas are based on interviews that I conducted with current college athletes and incoming freshmen, as well as data from interviews that the Fan inc. team held with their college athlete influencers.
We wanted to understand their motivations and frustrations when it came to N.I.L. and juggling school and athletics. They were created to help inform decision-making during feature and roadmap planning, to remind us all to focus on features important to the users.
Prototypes for Future Tests
Athlete Profile Concept
Below is a Figma prototype of a new athlete profile concept that I was exploring to drive more fan engagement and return visits for both athletes and their fans. I leaned into social because athlete interviews proved that they would be more interested in broadcasting achievements if they had a dedicated fan audience as they do on Fan inc. Tap “Pop’s Updates” or “About” to view the feeds.
Fan Dashboard Concept
The Fan dashboard plays off of the social elements from the athlete concept. It aggregates posts from the athletes a fan has paid, and let’s them follow their favorite teams to quickly and simply find other athletes to support. This concept is also designed to drive repeat fan visits. All names and data are FPO.
Internal Admin and Dashboards
I also designed Fan inc.’s internal tools which let them manage their user base and track financials. View dashboard project here »
