About Viterbo University
Viterbo University is a private Catholic, Franciscan university in La Crosse, Wisconsin, serving undergraduate and graduate students. Its emphasis on personal attention, service, and community shapes the student experience. The university wanted its website to communicate that experience while helping prospective students and families make informed decisions about their education.
The challenge
Viterbo needed to reorganize a website that had grown around years of departmental content and evolving technical requirements. Information about programs, degrees, and departments overlapped, navigation was difficult to maintain, and visitors often had to work too hard to find practical answers about costs, curriculum, and the next step in applying.
Recruitment was the primary focus, but the site also served current students, faculty and staff, alumni, and the wider community. The challenge was to give prospective students a welcoming introduction to Viterbo while preserving direct routes to everyday resources, news, and Fine Arts Center events. Campus editors also needed a more consistent and flexible way to create pages.
The solution
Black Antelope partnered with Viterbo to redesign and rebuild the website in Drupal on Pantheon. Working with UX research partner Curiosity Tank, we used audience research and prototype testing to guide the site structure, content priorities, and navigation. The design combines campus imagery and student storytelling with prominent program information and clear calls to action.
Behind the scenes, we built a reusable component system connected to Drupal’s Layout Builder, giving editors the tools to assemble pages within an established visual language. Storybook provides a working reference for those components, while Algolia supports search and content discovery.
UX research
Research began with stakeholder discussions and a survey that gathered more than 500 responses across Viterbo’s audiences. The findings helped establish navigation priorities and showed which information mattered most when evaluating a university. Academic programs and career outcomes were particularly important, alongside practical details such as delivery format, time to degree, and curriculum.
We then tested desktop and mobile Figma prototypes through Maze, gathering more than 60 analyzed sessions across prospective undergraduates, graduate students, parents and guardians, alumni, faculty and staff, and current-student audiences. The studies combined university participants with recruited panelists to identify recurring problems with navigation and content discovery.
A key finding was that reaching a program page did not necessarily give visitors the answers they needed. Participants still struggled to confirm program essentials and compare their options. Returning audiences had a different need: quick access to familiar resources without searching through recruitment content. These findings guided revisions to program pages, audience entry points, navigation feedback, and the visibility of cost and financial aid information.
Academic programs that help students decide
We reorganized the program page design around the questions prospective students bring to it. Structured program information brings details such as degree level, format, duration, and start terms together, with dedicated areas for curriculum, career outcomes, and cost and aid. Faculty profiles and program experiences add context, while requests for information remain part of the page journey.
This approach gives practical information a clear place alongside storytelling. Students can understand how a program fits their goals and circumstances, then explore the people and experiences that distinguish a Viterbo education. The shared structure also gives campus teams a consistent model for presenting different academic offerings.
Component library using Storybook
We developed a component library that carries the design from Figma into Drupal. Shared foundations define color, typography, and spacing, while reusable components cover everything from buttons and navigation to accordions, cards, testimonials, and larger page sections. Drupal’s Single Directory Components architecture keeps the component code organized for ongoing development.
The library is available in Storybook directly within Drupal’s admin area. It gives the team a working style guide and a place to inspect the implemented components, helping bridge the gap between a design file and the tools available in the CMS.
For Viterbo, this is also a practical reference for training and onboarding. The team can see which building blocks exist and understand how they can be used, then assemble pages through Layout Builder. New content can follow the same design system, reducing the need to design each page from scratch.
Algolia search
Search provides an additional route through Viterbo’s content for visitors who know what they need. We integrated Algolia to support instant search with autocomplete, presenting suggested results as people type and a clear path to view the full results. The search interface is incorporated into the site’s visual design, including its mobile experience.
The design also brings program search into the homepage, making academic discovery a prominent part of the first visit. Together, these entry points support both focused searches and early exploration, helping visitors reach relevant information without first learning the university’s organizational structure.
A dedicated Fine Arts Center experience
Viterbo’s Fine Arts Center serves audiences whose main goals are finding performances, buying tickets, and planning a visit. We gave it a dedicated microsite experience within the university’s Drupal platform, with navigation organized around tickets and events, visitor information, support, and education.
Event listings use prominent imagery, straightforward filters, and ticket calls to action. Box office essentials are separated from longer FAQs, and a distinct link back to the university site helps visitors understand where they are. This gives the Fine Arts Center room to serve its audience while sharing the broader site’s technology and components.
Accessibility throughout design and development
Accessibility informed decisions about typography, link visibility, navigation, and interactive behavior. Reviews extended into implementation, where we addressed keyboard navigation and focus behavior across browsers, including issues with tab order and mega menus in Safari.
Working with shared components makes these details easier to address consistently. Improvements to a common navigation element or content block can support the pages that use it, giving accessibility a place in the underlying system as well as in individual page reviews.
A sustainable Drupal platform
The rebuild also addressed how Viterbo maintains the site. We moved page construction from the legacy Paragraphs approach to Layout Builder and simplified the navigation architecture around a unified global menu. Reusable blocks support shared content, while contextual navigation accommodates academic sections and microsites.
We paired programmatic content migration with page rebuilding by Viterbo’s team, supported by CMS walkthroughs and an administration guide. This allowed the university to preserve existing material while reshaping key pages around the new design. The resulting platform gives campus teams a consistent set of tools for maintaining content and developing the site as their needs change.
