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.
Some branding in the mockups have been altered to protect privacy.
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.
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.
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.
The app’s main features were a message board, a chat, and a player content page to see exclusive videos from the athletes. Each of these sections of the app required their own set of components and rules which I designed and documented.
As I was designing the main screens, I made sure to take note on use cases when certain elements were used multiple times. That was a good indicator that the element should be turned into a component in the design system.
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.
I created the components by following the atomic designs approach, which allowed the combination of smaller “atom” components with each other to create “organism” components. With this modular approach, the design system all worked hand in hand where certain components were able to be used in multiple scenarios.
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.
As I thought through these different flows, it also helped me determine more design system components that I needed to incorporate.
Designing both the screens and design system, gave me a unique perspective on the relationship between design systems and the designs. It made me appreciate so much how powerful design system can be, and how to not over bloat them with unnecessary components. I had to think extremely modular, and keep in mind how I can design for scale.
As a result from my team's effort, the app went live after an intense 4 month sprint of design and development. The app was generally well received by the users, and gave them a new platform to connect with their community.
If I were to continue developing this app, I would conduct usability tests, interviews, and tracking to solve specific areas that can be improved.
The apps are currently live in the Apple Appstore and Google Play Store. With hundreds of active users on all the combined apps, it was such an amazing feeling seeing my designs being used by all those people!
