In 2023, two Office of Advancement websites, Alumni Association and Giving, were redesigned with the BUX design system in order to enhance the user experience and accessibility. The websites launched in February 2024, marking a key milestone in the office’s digital strategy.
Aaron Green, Digital Manager of Advancement Marketing and Communications, shared insights into the redesign process, detailing the goals, collaborative efforts, and impacts involved.
Setting the stage for change
The overarching goal of the redesign was to create consistency between the Alumni Association website and Giving website, ensuring they look and function in a similar way. A user should be able to navigate between the two sites and have an equally positive experience. Another key focus was to ensure all content is available and compliant with screen readers and other accessibility tools. By implementing the BUX design system, both websites now offer a cohesive design and user experience while meeting accessibility standards.
Collaboration with partners
The success of this project hinged on strong collaboration with both internal teams and external partners.
- Scarlet Studio conducted a full website assessment that included user behavior analysis, heat maps, peer comparisons, and opportunities for improvement. Their recommendations played a crucial role in shaping the new design. Scarlet Studio also conducted periodic check-ins to ensure the redesign stayed closely aligned with BUX through the process
- Advancement IT provided essential project management support and accessibility coordination.
- Content stakeholders of Alumni Association and Advancement were consulted throughout the process. Their feedback was crucial to ensuring the website strategy was reflected within the content and user experience.
- An external vendor was contracted for a content audit, site design, development and content population of both websites. Their understanding of the BUX design system was essential for collaborating with Scarlet Studio to create custom components and templates.
Project Timeline
Scarlet Studio’s full website assessment set the foundation for the redesign process. Over the course of 10 months, the team worked diligently towards these milestones:
- May 2023: Content audit
- June 2023: Navigation development
- July 2023: Design concepting, review and execution
- Aug.-Sept. 2023: Site development, content migration
- Oct. 2023: Quality assurance and accessibility testing
- Nov.-Dec. 2023: Site infrastructure review
- Jan. 2024: Final content migration
- Feb 2024: Systems check, final quality assurance and accessibility testing
- End of February 2024: Site launches
Frequent check-ins with leadership proved to be essential for gathering feedback and making improvements, putting the team in a good position for final approval and launch.
Before and after: Giving Homepage
One of the primary goals for redesigning the Giving homepage was to simplify the process of finding donation opportunities and understanding ways to contribute. To do this, the BUX CTA (Call to Action) Component component gives prominence to actions taken frequently by users. BUX Tiles group methods of giving together. The UI icons in both components serve as visual cues, reinforcing actions a user can take.
Previous Giving homepage (left) and redesigned Giving homepage (right)
Before and after: Alumni Homepage
Similar to the redesigned Giving homepage, the Alumni homepage also incorporated a Hero component and CTA Collection to provide clear pathways to important content. These elements are designed to engage visitors immediately, with timely calls-to-action such as links to football tickets during ticket sale months and various programs or services available to alumni.
Previous Alumni homepage (left) and redesigned Alumni homepage (right)
Previously, the events listing displayed like a modified news feed. The new layout, using the BUX Cards (Event variant), provides a more user-friendly experience. These cards display event details, such as time and location, in a much more scannable format when paired with UI icons (incorporated as a Description List with Icons). The cards also include taxonomy, which enables filtering features within the layout.
Previous Alumni events listing (left) and redesigned Alumni events listing (right)
The event page template has also undergone significant improvements. Previously long and lacking hierarchy, the redesigned event page template offers clear calls-to-action, such as a registration link. As with the redesigned events listing, the contact details are prominently displayed near the visual. The UI icons paired with labels help the user to quickly scan the webpage content. The event description can accommodate long or short content. BUX Headings are helpful to bring visual consistency and content consistency among all events.
Previous Alumni tour listing (left) and redesigned Alumni tour listing (right)
The tour listing is custom designed for the Alumni audience. Tours display more information than a typical event. The BUX Tabs component was used to organize content more effectively. The first tab contains the most important details, such as an overview and registration information. Other tabs provide supplementary content like the itinerary and map, allowing users to choose which information to explore.
Previous Donor Membership webpage (left) and redesigned Donor Membership webpage (right)
Additionally, the donor membership webpage was redesigned to feel more inviting, demonstrating the connection and energy of alumni rather than focusing solely on the transactional aspect of donations.
The impact of BUX
The implementation of the BUX design system helped streamline design decisions and create a stronger UX connection between the Giving and Alumni websites. With BUX foundational elements, components and template guidance, we were able to create user experience patterns between the two websites, while meeting different audience needs.
In addition, BUX accelerated meeting accessibility standards. Though it was required to do a full manual accessibility testing with final content, BUX components are developed with accessibility in mind, which made it easier to meet AA Standards before launch.
In terms of analytics, we’ve increased user engagement between February 2023 and February 2024.
- Traffic to the Alumni site increased by 17%.
- Average time on the Alumni homepage increased by 15 seconds due to more engaging content.
- Time spent on the Alumni events listing calendar increased by 27%
The redesign of the Alumni Association and Giving websites represents a major leap forward in both design and functionality. By using the BUX design system, the team has created a more unified, accessible, and user-friendly experience that enhances the relationship between the institution and its alumni while providing valuable resources and opportunities for giving.