WAA Site
Together with an interdisciplinary team at the Wisconsin Foundation and Alumni Association (WFAA), we initiated a comprehensive redesign of the Wisconsin Alumni Association (WAA) website. Our work involved restructuring the presentation of WAA’s services and programs, establishing a uniform design framework to improve workflows, and defining the site’s brand direction.
ROLE
Lead Visual and UI Designer
TEAM
Collaborated with the Senior Visual Designer, Leadership, and teams from Digital, Marketing, Video, and Alumni Relations & Engagement.
DIVISION
Alumni Relations & Engagement, Wisconsin Alumni Association
LIVE SITE
DESIGN PROBLEM
Many young and mid-life alumni felt that the Wisconsin Alumni Association (WAA) wasn’t offering relevant programs and services. The old website made the problem worse with cluttered pages and confusing menus, making it hard to understand what WAA was offering. Also, the inconsistent branding made WAA seem disorganized. Our aim was to create a website with clear navigation and well-organized content to help users find information easily.
DESIGN SOLUTION
In the recent update of the WAA website, we introduced a new design with streamlined navigation and clear, modular layouts. The goal was to enhance the user experience and make the content easy to understand. We introduced event and story cards to help users discover content and showcase WAA’s various programs. The redesign established WAA’s updated branding, featuring the iconic red color, WAA’s diagonal design, and images of engaged alumni. Throughout the design process, we prioritized responsiveness and accessibility. The new user interface uses modular templates, simplifying development and maintenance and allowing flexibility to accommodate changing content needs. This approach improved the user experience and strengthened brand consistency, significantly increasing engagement and brand loyalty.
HOME
We enhanced our homepage by adding video footage and lively campaign messages to attract viewers to WAA’s wide offerings. Our homepage now includes a carousel showcasing the latest articles from WAA and UW publications and a grid layout highlighting upcoming events. These features make navigating our site smoother and more engaging for the viewer.
NEWS & STORIES
The main News & Stories page uses video content and news excerpts to engage users and encourage further reading. Each news and story page features an article from a UW or WFAA publication, while the grid layout encourages exploration through an intuitive and user-friendly design approach.
EVENTS & ACTIVITIES
The main Events page has a layout consistent with the News & Stories page. It includes video footage and event listings to promote upcoming events and invite users to explore. Many users access individual event pages through email links. The carousel of upcoming event cards is designed to keep users on the site and encourage them to explore more WAA events.
DESIGN SYSTEM
My design colleague and I met weekly with the digital and marketing teams to discuss user experience and communication priorities. The design system we created in Adobe XD became the single source of truth for the programmers.
UI ELEMENTS
We designed UI elements to ensure consistent branding and improve readability throughout the website.
MODULES
The implementation of modules enhanced the workflow for design and digital processes. Consistent image ratios across the website streamlined image preparation. Matching these ratios with email patterns further expedited production.
PRODUCT PAGES
With over twenty product categories, the module options for the product pages needed to accommodate different content while maintaining consistency.
DEFAULT PAGES
The migration of multiple content pages from the old website to the new platform necessitated the creation of default page layouts. These layouts needed to be visually appealing, easy to navigate, and capable of effectively accommodating a wide variety of content.
