Mcmaster university, degroote school of business
Creating the Design System and UI Kit for the DeGroote School of Business
How I took a design system that had not received much love and upgraded it to help a university begin to scale online rapidly while developing a standardised experience.
In response to the evolving needs of the DeGroote School of Business, I redesigned their existing design system, encompassing a network of 37 websites covering student organizations, programs, services, studies, institutes, and resources. The previous design system, while initially functional, had gradually diverged from the live site, leading to inconsistencies and misappropriated components due to a lack of comprehensive documentation.
This design system established a cohesive and adaptable design language across the school’s microsites and platforms. It encompasses guidelines for typography, color, layout, and iconography, as well as principles for crafting user interfaces and experiences. Rooted in Google Material Design, it prioritizes simplicity, clarity, and usability, ensuring a consistent and intuitive experience for users while offering flexibility and modularity for various microsites and scenarios.
Some key features of the redesign include:
- A focus on modularity and scalability, allowing for easy customization and extension of the design system to accommodate new products and use cases.
- A strong emphasis on accessibility and inclusivity, with guidelines for designing interfaces that are easy to use and navigate for users of all backgrounds and abilities.
- A unified and consistent visual language across all Degroote School of Business micro-site, providing a recognizable and memorable brand identity.
- A commitment to continuous improvement and iteration, with regular updates and improvements to the design system based on user feedback and data.
Role Lead Designer
Partners Developer, Digital Marketing Manager, Marketing Strategist
Category: Web Design, UI Design, Interaction Design
Deliverables Design System, High-fidelity
Software Tools Adobe XD
Problem
The existing design system was facing issues such as inconsistencies and misappropriated components, stemming from a lack of comprehensive documentation. Additionally, there was a need for a web refresh to stay relevant against competing business schools domestically.
Evaluation
The redesign aimed to update components to modern standards. A review of the existing site’s content and sections highlighted overload with text, creating a high cognitive load and hindering scanability for users.
Solution
The solution involved revisiting the design system to update components using Adobe XD to devise a durable component structure customizable to different program needs. Simplifying components and encouraging whitespace helped increased scanability of information.
Results
The redesigned design system led to increased coherence, decreased code complexity, and a scalable framework for web and mobile components and patterns. By employing Atomic design principles and simplifying components, scanability and organization of information were improved. The resource now consists of UI components, layouts, styles, foundational typography, and pre-designed templates, facilitating the creation of landing pages, course offerings, or research institute websites. Overall, the collaborative effort resulted in a more efficient and effective design system for the DeGroote School of Business.
Mobile Preview
