McMaster University, DeGroote School of Business
Developing a Design System and UI Kit
WordPress, Google Material Design
The DeGroote School of Business needed a more cohesive design system to support its growing digital ecosystem. The goal was to create a flexible, scalable UI framework that could improve consistency and usability across 37 websites serving student organizations, academic programs, research centres, and internal resources.
My Role
Lead Designer
Design system
Wireframing
Developer Handoff
Challenge
DeGroote’s design system had become fragmented and difficult to scale across its growing web ecosystem. To support future growth and create a more cohesive user experience across multiple microsites, the school needed a flexible, modular system that could serve a range of content needs and audiences.
Solution
I redesigned the UI system to create a more cohesive, scalable foundation for DeGroote’s digital experience. Using Atomic Design principles, I streamlined components, improved content organization, and established reusable patterns for web and mobile layouts.
Some key features of the redesign include:
- A focus on modularity and scalability
- A strong emphasis on accessibility and inclusivity, designing interfaces that are easy to use and navigate for users
- A unified and consistent visual design across all Degroote School of Business micro-sites
- Continuous improvement and iteration, regular updates and improvements to the design system based on user feedback
Mobile Previews
