In this redesign of the Michigan Marching Band website, we overhauled the information architecture, created responsive, fully functioning prototypes, and modernized the design through the use of a design system and components, all while gaining valuable UX teamwork experience.
This project was as much about planning and information architecture management as it was creating the visual elements. I learned a ton about what a great design process looks like during this project.
Aidan Vyn (my classmate and fellow MMB snareline member) and I completed this redesign for our midterm project in SI 407: Advanced Design at the University of Michigan during my junior year in the BSI. Our professor, Jim Rampton, knew that we were both marching band members and specifically asked us to redesign the MMB site instead!
ROLE / Context
UX Designer / Researcher
Two-member project team
DISCIPLINE
UX Research / Design
TIMELINE
Feb – Mar 2026
TOOLS / Topics
Figma
Design Systems
Information architecture & navigation
Visual Identity
Components & Variables
Typography / Iconography
Autolayout / Responsive Design
Interactive prototyping & smart animations
WCAG 2.0 AA Accesibility
Purpose, Problem, & Areas of Opportunity
Sketching and Brainstorming
To begin the project, Aidan and I chose to start with purpose statements to understand the current website, and build an understanding of what needed to change.
Issues
Audition experience was fragmented
The navbar was cluttered with unnecessary options
The homepage didn't effectively show off the many cool MMB special experiences
Current MMB site. Drag to see more
Competitive Analysis
We also conducted a competitive analysis of four other Big Ten college marching band websites, including Michigan State University, Ohio State University, Wisconsin, and Penn State.
What We Found on Other Sites
Intentional imagery
Clear calls to action / audition instructions
Emphasis on first-time users and prospective members
Takeaways
Our initial exploration gave us a lot of context for the purpose of each page, and further competitive analysis grounded our design plan, giving us clear next steps. The current MMB website does a fine job, but we knew we could improve on the design and create something memorable, useful, and beautiful.
Design Process
Typography and Colors
Utilized Michigan Branding Guidelines
This guided our font and color choices, and helped us adhere to accessibility standards from the start of the project
Figma Variables Panel
We used variables throughout the design. This made making full-project color and typography edits easy, and made our design process extremely flexible.
Components
Button
We created all the relevant states of our button component in light and dark mode
Navbar, E-Commerce, and Other Components
We also developed am updated, responsive navbar, and multiple components that would be used on the e-commerce and audition sections of the site, like product cards, dropdowns, and sections.
Templates / Page Prototypes
We developed page templates / page prototypes as our next step. We created:
Navbar and Footer
Homepage Brainstorming
First Iteration of E-Commerce Experience
Templates we built. Drag to see more
Key Design Decisions
Improved Navigation and IA
Condensed information in the navbar, added simple shop filters, and reorganized product page hierarchy to improve user flow throughout the site
Modern Design Elements
Added modern design elements to enhance the site’s visual presentation. Dark mode, blurred/transparent cards, & large visual callout sections help MMB stand out from competitors
Restructured Audition Page
Prioritized first-time users’ understanding of the audition process while sparking enthusiasm through imagery of recent MMB experiences
Enhanced Responsiveness
Developed site over desktop, tablet, and mobile breakpoints, maintaining clear navigation and consistency across device sizes
Final Result
The final product is a clear and accessible website that makes getting excited about the MMB and understanding the audition process easy—for both new and returning members and their families.
Try out an Interactive version of the website (made with Figma Make), or view the Figma file and final project images embedded below!
Final results, in light and dark mode. Drag to see more.