12X lets college fans directly support student-athletes by donating to their school’s NIL collective, making the process simple and impactful
Industry
Sports Technology
Service
Responsive Application
The Problem
College sports fans love supporting their teams, but there wasn’t an easy, trustworthy way to directly contribute to student-athletes through their school’s NIL collective. Existing options were confusing, scattered, or lacked transparency, leaving many fans unsure if their money was making a real impact. Without a simple and intuitive platform, supporters who wanted to give back to their favorite athletes had to navigate frustrating processes or, worse, give up altogether. 12X needed a seamless, fan-friendly solution that made donating easy, clear, and rewarding.
The Solution
To fix this, I designed a platform that makes supporting student-athletes as simple as cheering them on from the stands. By working closely with the client, I created a smooth, intuitive experience where fans can easily find their school’s collective, see the impact of their donation, and contribute with confidence. Clear navigation, transparent donation flows, and a polished design ensure that every fan—whether a die-hard alum or a casual supporter—can give back without hassle. The result is a platform that makes supporting college athletes effortless, meaningful, and exciting.
The Design Process
The design process guided research, solution exploration, and refinement. Testing informed an intuitive interface, leading to detailed prototypes for development.
Discover
Conduct in-depth user research to identify pain points, needs, and opportunities for improvement across the user journey.
Define
Analyze the research insights to clearly define the problem, set measurable goals, and outline the scope for the solution.
Develop
Create and iterate on prototypes, incorporating feedback from testing and stakeholders to refine design concepts.
Deliver
Finalize the design, conduct thorough testing to ensure quality, and prepare the product for handoff to development.
Mid Fidelity Wireframes
Mid-fidelity wireframes define structure, flow, and key interactions, refining navigation and hierarchy before high-fidelity design.
Colors, Typography & Design System
Colors and typography create hierarchy, readability, and brand identity. A balanced palette directs focus, while typography ensures clarity and consistency. The design system ensures consistency and efficiency by providing reusable components, styles, and guidelines. It streamlines collaboration, maintains visual consistency, and simplifies updates across the project.
#1A1A1A
#AA6AFE
#C3FFDA
#FFFFFF
Continue
Continue
Continue
Continue
UI Design
Final high-fidelity designs showcase the polished, detailed version of a project, with refined visuals, typography, and spacing. They offer a realistic preview, guiding development while maintaining the intended user experience and brand identity.
