MMU Design System
MMU Design System
Building a Consistent and Cohesive Digital Identity
Building a Consistent and Cohesive Digital Identity
My Role(s):
My Role(s):
My Role(s):
Project Leader
UI Designer
Project Leader
UI Designer
Project Leader
UI Designer
Duration:
Duration:
Duration:
November 2024-December 2024
November 2024-December 2024
November 2024-December 2024
Team:
Team:
Team:
Winla Vang
Elizabeth Boney
Malaika Powell
Winla Vang
Elizabeth Boney
Malaika Powell
Winla Vang
Elizabeth Boney
Malaika Powell
Executive Summary
Over the summer, two Mount Mary UX interns collaborated with the Marketing Department to redesign the university website. They crafted a modern, user-friendly design aligned with the university’s and prospective and current students’ goals.
Our team transformed those mock-ups into a design system to ensure easy implementation and maintenance for the evolving Mount Mary digital space.
Over the summer, two Mount Mary UX interns collaborated with the Marketing Department to redesign the university website. They crafted a modern, user-friendly design aligned with the university’s and prospective and current students’ goals.
Our team transformed those mock-ups into a design system to ensure easy implementation and maintenance for the evolving Mount Mary digital space.
Over the summer, two Mount Mary UX interns collaborated with the Marketing Department to redesign the university website. They crafted a modern, user-friendly design aligned with the university’s and prospective and current students’ goals.
Our team transformed those mock-ups into a design system to ensure easy implementation and maintenance for the evolving Mount Mary digital space.
Final Design System
Final Design System
Final Design System
Importance of a Design System
Importance of a Design System
Importance of a Design System
A design system is a cohesive set of visual elements, guidelines, and assets that create a consistent look, feel, and behavioral pattern across a product that includes:
Colors
Fonts & Type Styles
Buttons, Menus, Carousels, etc.
A design system is crucial for Mount Mary University because it provides clear guidelines for developers, streamlining updates and ensuring consistency in the university's brand identity. It enhances efficiency for design and development teams by having a unified framework, fostering collaboration, and improving accessibility and user experience.
A design system is a cohesive set of visual elements, guidelines, and assets that create a consistent look, feel, and behavioral pattern across a product that includes:
Colors
Fonts & Type Styles
Buttons, Menus, Carousels, etc.
A design system is crucial for Mount Mary University because it provides clear guidelines for developers, streamlining updates and ensuring consistency in the university's brand identity. It enhances efficiency for design and development teams by having a unified framework, fostering collaboration, and improving accessibility and user experience.
A design system is a cohesive set of visual elements, guidelines, and assets that create a consistent look, feel, and behavioral pattern across a product that includes:
Colors
Fonts & Type Styles
Buttons, Menus, Carousels, etc.
A design system is crucial for Mount Mary University because it provides clear guidelines for developers, streamlining updates and ensuring consistency in the university's brand identity. It enhances efficiency for design and development teams by having a unified framework, fostering collaboration, and improving accessibility and user experience.
Design Process
Design Process
Design Process
As the Project Lead for this initiative, I guided my team in developing an intuitive, cohesive design system for Mount Mary University. For this project, we applied the Atomic Design methodology, Google’s Material Design, and adhered to the Web Content Accessibility Guidelines (WCAG) to ensure a user-friendly and accessible outcome.
Building on the work from the Mount Mary UX interns, we structured the system by organizing styles, components, and styles used in the website. This ensures that the Mount Mary University website reflected its vision of a diverse and inclusive learning community. Colors, text, and components were tested and adjusted to guarantee accessibility for all users.
As the Project Lead for this initiative, I guided my team in developing an intuitive, cohesive design system for Mount Mary University. For this project, we applied the Atomic Design methodology, Google’s Material Design, and adhered to the Web Content Accessibility Guidelines (WCAG) to ensure a user-friendly and accessible outcome.
Building on the work from the Mount Mary UX interns, we structured the system by organizing styles, components, and styles used in the website. This ensures that the Mount Mary University website reflected its vision of a diverse and inclusive learning community. Colors, text, and components were tested and adjusted to guarantee accessibility for all users.
As the Project Lead for this initiative, I guided my team in developing an intuitive, cohesive design system for Mount Mary University. For this project, we applied the Atomic Design methodology, Google’s Material Design, and adhered to the Web Content Accessibility Guidelines (WCAG) to ensure a user-friendly and accessible outcome.
Building on the work from the Mount Mary UX interns, we structured the system by organizing styles, components, and styles used in the website. This ensures that the Mount Mary University website reflected its vision of a diverse and inclusive learning community. Colors, text, and components were tested and adjusted to guarantee accessibility for all users.
Author's Notes
Author's Notes
Author's Notes
When documenting the design system, it’s the instruction manual for using, creating, and maintaining the components and styles within a system. This documentation contributes to:
Consistent design within the system and the product.
Efficient creation, use, and maintenance of new and old styles and components.
Onboarding and transfer of knowledge to new team members.
Streamlined communication between designers, developers, and stakeholders.
When documenting the design system, it’s the instruction manual for using, creating, and maintaining the components and styles within a system. This documentation contributes to:
Consistent design within the system and the product.
Efficient creation, use, and maintenance of new and old styles and components.
Onboarding and transfer of knowledge to new team members.
Streamlined communication between designers, developers, and stakeholders.
When documenting the design system, it’s the instruction manual for using, creating, and maintaining the components and styles within a system. This documentation contributes to:
Consistent design within the system and the product.
Efficient creation, use, and maintenance of new and old styles and components.
Onboarding and transfer of knowledge to new team members.
Streamlined communication between designers, developers, and stakeholders.
Next Steps
Next Steps
To continue developing the design system further, we propose a strategy focused on the continual maintenance and expansion of its capabilities. This approach will prioritize seamless integration with Mount Mary’s digital ecosystem, ensuring compatibility across devices such as smartphones and tablets. By advocating for the enhancement of grids and layouts in the style section, we are incorporating various breakpoints to ensure optimal responsiveness and consistent user experience across all screen sizes.
To continue developing the design system further, we propose a strategy focused on the continual maintenance and expansion of its capabilities. This approach will prioritize seamless integration with Mount Mary’s digital ecosystem, ensuring compatibility across devices such as smartphones and tablets. By advocating for the enhancement of grids and layouts in the style section, we are incorporating various breakpoints to ensure optimal responsiveness and consistent user experience across all screen sizes.
To continue developing the design system further, we propose a strategy focused on the continual maintenance and expansion of its capabilities. This approach will prioritize seamless integration with Mount Mary’s digital ecosystem, ensuring compatibility across devices such as smartphones and tablets. By advocating for the enhancement of grids and layouts in the style section, we are incorporating various breakpoints to ensure optimal responsiveness and consistent user experience across all screen sizes.
Reflection
Reflection
Reflection
Every product or service needs a design system in order to ensure consistency across platforms, improve the user experience and support long-term adaptability. This project presented challenges particularly in delegating tasks and ensuring clear communication on the key elements to include in the design system.
Despite the challenges, my team and I are grateful for the opportunity to contribute to improve the user experience for Mount Mary University. We’ve created a cohesive and accessible design system that will empower the Marketing Team to maintain consistency across the website. This project has taught me how to lead the project with clarity and impact while fostering collaboration among designers and stakeholders.
Every product or service needs a design system in order to ensure consistency across platforms, improve the user experience and support long-term adaptability. This project presented challenges particularly in delegating tasks and ensuring clear communication on the key elements to include in the design system.
Despite the challenges, my team and I are grateful for the opportunity to contribute to improve the user experience for Mount Mary University. We’ve created a cohesive and accessible design system that will empower the Marketing Team to maintain consistency across the website. This project has taught me how to lead the project with clarity and impact while fostering collaboration among designers and stakeholders.
Every product or service needs a design system in order to ensure consistency across platforms, improve the user experience and support long-term adaptability. This project presented challenges particularly in delegating tasks and ensuring clear communication on the key elements to include in the design system.
Despite the challenges, my team and I are grateful for the opportunity to contribute to improve the user experience for Mount Mary University. We’ve created a cohesive and accessible design system that will empower the Marketing Team to maintain consistency across the website. This project has taught me how to lead the project with clarity and impact while fostering collaboration among designers and stakeholders.
Other Work
Other Work
