Building a foundation for the future

Fort Lewis College’s sprawling 6,000-page website faced a breaking point: outdated code, inaccessible designs, and a disjointed experience for users and content creators alike. The Talon Design System is built to transform this fragmented digital presence into a scalable, accessible framework. From pitching stakeholders to designing universal components, I’ve led this ongoing effort to modernize and unify the college’s digital assets.

Responsibilities

  • Pitch value, strategy, and process
  • Conduct competitive audits, best practice research, and design reviews
  • Design system architecture, components, templates, and documentation
  • Manage developer relationship and timeline

Results

  • Secured buy-in and funding to modernize the college's digital presence
  • Audited site information architecture and universal components
  • Designed new components and documentation based on Atomic Design principles for scalability
  • Delivered design files, expectations, and timeline to developer

Primary Tools

  • Figma

    Figma

  • Bootstrap

    Bootstrap

Pitching a grassroots design system

Stakeholders initially hesitated, unsure how a design system could address the complexity of the FLC website and other digital assets. To build trust, I demonstrated how hours saved through cohesive design could translate into real cost savings.

A section of the FigJam board showcasing the value proposition, implementation structure, and larger context of design systems in higher education institutions.
A section of the FigJam board showcasing the value proposition, implementation structure, and larger context of design systems in higher education institutions.

Creating connection and value

Using an engaging FigJam board, I outlined a clear timeline, areas of application, and team-wide benefits. An essential part of the pitch was a return-on-investment (ROI) value equation (design system ROI from Smashing Magazine) that translated hours saved on design and development into direct monetary savings, putting the abstract concept of a design system into common terms.

Learning through iteration

Creating the Talon Design System was far from a straightforward process. Early on, I conducted a competitive audit of design systems used by other higher-ed institutions, gaining insight into what was possible and effective. Inspired by these examples, I began workshopping designs with the graphic design team, coding components myself, and documenting them as I went.

Initial efforts revealed critical roadblocks, including conflicting stylesheets, outdated dependencies, and undocumented workflows. These challenges prompted a necessary pivot to modernize the codebase with Bootstrap 5, consolidated CSS/SCSS, and a versioned dev workflow. This phase underscored the importance of establishing a strong technical foundation for scalability and taught me the value of flexibility when navigating complex projects.

Icon and factoid workshopping process.
Icon and factoid workshopping process.
Iconography documentation draft on initial approach design system website.
Iconography documentation draft on initial approach design system website.
Developing components, such as testimonials, highlighted the need for modern Bootstrap utilities and clean stylesheets.
Developing components, such as testimonials, highlighted the need for modern Bootstrap utilities and clean stylesheets.

Building a strong foundation

With the technical and style limitations clear, I shifted focus to building a strong foundation for the design system. I revisited user research to identify core needs and established accessible typography, color palettes, iconography, and layout standards. Using Figma variables, I streamlined design workflows and ensured scalability. I developed universal components, like menus and page layouts, and CMS-level pane layouts for implementation. My design process balanced stakeholder feedback, technical needs, team capacity, and modern design principles.

A sampling of the types of foundational guidelines and components within Talon.
A sampling of the types of foundational guidelines and components within Talon.

Identify a developer and set expectations

To implement the system across a complex website, I engaged a developer with experience in DNN, the College’s CMS. I delivered a comprehensive package of design files, technical expectations, and process documentation to ensure alignment. This package included annotated designs, an implementation plan, and workflows to support long-term scalability.

I proposed a phased implementation strategy to prioritize high-impact areas like the header, footer, navigation, and homepage, with content components to follow. This approach ensures manageable implementation and lays the foundation for scalable updates across the college’s sprawling website. Here are the guiding goals of the refined design system approach:

Implement high-impact updates

Focus on phased improvements to the header, footer, navigation, and homepage to maximize immediate usability gains while minimizing disruption.

Ensure developer alignment

Outline technical expectations, knowledge gaps, timelines, and process documentation to ensure a smooth, collaborative process.

Establish scalable workflows

Create a development workflow that allows Fort Lewis College to maintain and expand the system over time, despite limited in-house resources.

Lay the groundwork for full implementation

Develop a strategy for integrating the design system across all 6,000+ pages while addressing capacity and content limitations.

Accessibility annotation on the main menu component design file.
Accessibility annotation on the main menu component design file.

Communicating accessibility

Using CVS Health’s Web Accessiblity Annotation Kit, I added accessibility annotations to the design system component files to align semantic HTML best practices with the development workflow - taking the guesswork out of accessibility build-out.

The final mock of a secondary navigation component, designed to be flexible and scalable across the FLC website. This component utilizes brand logos to orient the user, and addresses navigation challenges within dense subpages on the current site.
The final mock of a secondary navigation component, designed to be flexible and scalable across the FLC website. This component utilizes brand logos to orient the user, and addresses navigation challenges within dense subpages on the current site.

The design files and process documents are currently being reviewed by the development vendor. Stay tuned for updates on the Talon Design System as it continues to evolve and transform.

PreviousNext