NCAA
Building the UX operating system for a fragmented application portfolio
Thesis: As the sole UX Design Lead, I established a practical foundation for consistent, maintainable product design across more than 90 internal NCAA applications aligning framework strategy, reusable templates, design patterns, documentation, and cross-business-unit consultation without the resources for a full portfolio rewrite.
When I joined the NCAA Development team in January 2022, I inherited a product landscape shaped by more than 20 decades of development. The portfolio contained more than 90 internal applications used by NCAA business units and membership. These applications supported the broader student-athlete journey, from enrollment through graduation, but they did not share a consistent front-end language or a clear UX foundation.
The challenge was larger than redesigning a single application. Framework choices varied. Some applications used Bootstrap, while others had been built with different approaches over many years. Many projects were years I the making, the team was not organized around agile product development and approximately 20 developers were already focused on the largest applications. There were not enough resources to consolidate the portfolio into one new platform or migrate every Bootstrap application to Vue.JS.As the sole designer, I had to build the foundations of the UX practice while also making the practical decisions that would help the development team deliver work within its existing constraints. My role became a combination of product designer, design-system steward, front-end partner, documentation author, facilitator, and internal consultant.
UX Vision: Taking disassociated applications to a more unified environment for efficiently managing the needs of our student athletes.
The Problem
The NCAA needed a more unified experience across a large and aging application portfolio, but the organization could not solve the problem through a single large-scale modernization effort. The constraints were real: limited development resources, a large existing code base, long-running projects, non-agile team structures, and applications with different technical histories and unique customizations.
A conventional recommendation to "standardize everything" would have ignored those constraints. A full rewrite would have delayed value and competed with the development work already underway. The more useful question was: How can a small UX practice create consistency and improve delivery across a fragmented portfolio without requiring every application to be rebuilt?
The absence of a previous UX foundation made the problem more difficult. There was no established pattern library to guide new work, no unified template for developers and contractors, and no consistent mechanism for business units to request or prioritize design support. Each new project risked creating another one-off solution.
The constraint that shaped the work
The solution needed to be evolutionary. It had to improve the applications that could be improved now, establish a stronger direction for new work, and provide enough shared guidance that developers could implement consistent patterns without waiting for a designer to resolve every styling or layout decision.
The Process
Establish a framework direction that matched reality
One of my first contributions was helping developers and leadership make a deliberate framework decision. The organization needed a shared direction, but it also needed a strategy that acknowledged the portfolio's limited resources.
The decision created two complementary paths. For existing Bootstrap applications that could not be fully reworked, I established an updated Bootstrap 5 template. This allowed the team to improve consistency and maintainability without requiring a complete rewrite. For new applications and applications that needed more substantial upgrades, the direction became Vue.JS with Vuetify.
This was not a perfect-state architecture. It was a practical transition architecture: improve the path that the organization could support today while establishing a more modern path for future development
| Portfolio condition | Practical design and technology response |
|---|---|
| Existing Bootstrap applications with limited migration resouces | Updated Bootstrap 5 template and reusable patterns |
| New applications or applications undergoing substantial upgrades | Vue.JS/Vuetify template and component direction |
| Legacy variation across portfolio | Shared visual patterns, documentation, and consultation |
| Long-running projets and non-agile delivery | Reusable guidance that could be applied incrementally |
Create reusable templates instead of solving the same problem repeatedly
I developed reusable design patterns for both Bootstrap 5 and Vue/Vuetify directions. The templates gave developers a stronger starting point and helped reduce the number of one-off decisions that had previously accumulated across applications.
The goal was not to make every application identical. The goal was to create a consistent underlying language for layout, components, spacing, typography, and common interaction patterns, while allowing business units to meet their specific operational needs.
I also maintained the templates as the technology evolved. Earlier in 2026, I refactored the Vue framework by updating and rewriting the SASS/CSS and improving the template to use Vue3 and Vuetify 4. The work extended the foundation rather than treating the design system as a one-time deliverable.
Build the pattern library in Figma
To support discovery and early design work, I created a broader pattern library and template pattern in Figma. This gave me a reusable environment for prototyping new projects for NCAA business units and membership.
The Figma library served two purposes. First, it made rapid prototyping possible without rebuilding common interface structures from scratch. Second, it created a shared visual reference that could connect design discussions to the implementation patterns developers would eventually use.
This was especially important in an organization where many projects had long timelines. A reusable pattern library made it possible to show a credible direction early, explore alternatives quickly, and reduce the likelihood that a new project would invent its own interface language.
Document the system for people who would use it without a designer beside them
A design system only creates organizational value when other people can understand and apply it. I created documentation for NCAA business units, developers, and contractors working on both new and existing applications. The documentation was maintained in Confluence and Azure DevOps wiki pages.
The documentation helped communicate the intent behind the patterns, the available templates, and the expectations for consistent implementation. It also reduced dependence on informal explanations and made the design foundation more accessible to people outside the immediate development team.
Consult across business unites
My work extended beyond the Development team. I consulted with other NCAA business units on design consistency and helped align the work with the pattern library I was establishing.
This consultation required balancing a shared foundation with the needs of different groups. The applications were internal, but they supported different business functions and stages of the student-athlete journey. The system needed to be recognizable and coherent without assuming that every team had identical workflows and content.
Advocate for a stronger UX operating model
In addition to creating design assets and technical foundations, I advocated for processes that would make UX work more predictable. These included design-ticket work requests, design-ticket prioritization, and UX application assessments.
Leadership considered these processes but mostly did not adopt them. That outcome is an important part of the case study. It shows that building a UX practice involves organizational change as well as design production. A designer can create a useful process, demonstrate its value, and still encounter adoption barriers when leadership has not yet made the practice a formal operating priority.
Rather than presenting the processes as organizational successes, I would frame them as the operating model I proposed and the influence challenge I navigated while establishing the rest of the UX foundation.
The Results
The work produced a practical UX and front-end foundation across a portfolio of more than 90 internal NCAA applications. The organization established a clearer framework direction: Bootstrap 5 for applications that could not realistically be migrated and Vue.JS/Vuetify for new applications and substantial upgrades.
The reusable templates, Figma patterns, and documentation improved the team's ability to begin work from a shared foundation. The pattern library reduced the need to make one-off decisions, supported faster prototyping, and created a more consistent and modern look and feel across applications.
The templates also improved the relationship between design and development. By defining more of the layout and styling work up front, the system eased developer handoff and reduced the amount of time developers needed to spend resolving visual details. That allowed them to focus more of their effort on complex programming and application functionality.
The foundation continued to evolve. The Vue framework was refactored in 2026 to update the SASS/CSS implementation and improve the template for Vue 3 and Vuetify 4. This demonstrates that the work was maintained as a living system rather than left as a static library.
The Impact
The immediate impact was a stronger starting point for design and development across a fragmented application landscape. Instead of treating each application as an isolated interface, the NCAA gained shared patterns, templates, documentation, and a framework strategy that could be applied incrementally.
The team impact was equally important. Developers received a clearer implantation starting point, while business units and contractors gained documentation they could reference without requiring the sole designer to answer every question in real time. The design foundation made consistency more achievable within the constraints of long-running projects and limited resources.
The organizational impact was the creation of the UX practice where there had not been an established foundation. That practice was not fully institutionalized the proposed ticketing and assessment processes were mostly ignored by leadership. But the design system, templates, documentation, consultation model, and framework direction created durable infrastructure that could support better UX decisions across the portfolio.
The work also clarified my approach to system-level design. A design system is not only a collection of components. In a legacy environment, it is a negotiation between technical reality, organizational capacity, user needs, and the future direction of the product portfolio. The right solution may be a bridge rather than a clean break.
UX Statement: Ask questions that lead to actions.
UX Motto: Is it usable and useful?
UX Value Proposition: To crossover from poor UX practices to good UX practices by meeting the needs of the vast array of student athletes, membership personnel, and stakeholders in meaningful ways.