College Sports Community App

2022

Subscription based community app for college sports fans

Displaying College Sports Community App app shots

Overview

The College Sports Community App is an online community app that allows fans to support and connect with their favorite college athletes. With the passing of the NIL Law in 2021, college athletes are now able to monetize themselves through their name, image, and likeness.

The app provides a platform where both fans and athletes can post on message boards, chat in channels, and watch exclusive team interviews.

As a white-label app, each participating school would have their own version of the Community App with their respective school names and color/branding.

Process

The timeline schedule for this project was extremely tight. With only 4 months to go from initial design to app store launch, there were areas where I had to sacrifice in order to ensure that the product stayed on schedule.

If given more resources, I would have spent more time on research and ideating to validate my assumptions. With the timeline restrictions, I conducted market research and competitive analysis to see how current community based apps were behaving.

In comparing different community apps, I found similar behaviors in terms of navigation, architecture, and base features. Although these research findings were fairly surface level, it was enough for me to get the groundwork started with the app. I did make a note to revisit this post launch to run real user testing to gather feedback.

User flows

Context

I created user flows to visualize a high level view of our app, which helped the development team start their back-end integrations. This also was great on getting approval from stakeholders in terms of the number of steps a user should take to achieve their needs.

The goal for the app was to create an intuitive and easy to use platform where fans regardless of age, could engage with their favorite athletes.

Initial signup or login flowUser flow for accessing different parts of the app

Design System

Context

To ensure that the apps all shared a common design language, I built a scalable design system that was easy to manage and implement. This helped our development team reuse components and easily store all the various states the user would go through.

By creating all the different states of components in the app, it was a great way to discover certain edge cases and relationships between the product and user.

Color and typography styles for the app design systemA component breakdown for the design systemHow different components come together to build screens in the app

Design Flows

Context

In parallel as I was creating the design system, I also started designing the main screens and flows for the app.

Each of the app’s main sections came with their own goals, features, and behaviors. The message board needed to store and track upvotes, the chat had emote reactions, and the player content needed to display media content.

With each of the requirements, I designed each flow and concentrated on one goal per flow. This allowed me to clearly see any edge cases, loading/error states, and missed areas with the designs.

Designs to display how a user creates a post in the message boardDesigns displaying how a user sends a message int he chatDesigns displaying how to view videos in the player content