A design system created for the University of Alabama at Birmingham to standardize and unify the user experience across all university websites.
The University of Alabama at Birmingham needed a cohesive and scalable design system to unify its digital platforms across campus. To meet this need, we developed the Dragon Scale Design System. This comprehensive system standardized UI components, typography, colors, and page layouts, ensuring a consistent user experience across UAB’s websites and applications.
As the sole UX designer at UAB, I took on the responsibility of designing the entire Dragon Scale Design System library in Adobe XD. While leading this initiative, I collaborated closely with the creative team, incorporating their feedback and insights throughout the process. I also presented the design system to distributed communicators across the university, ensuring alignment and consistency in its adoption and implementation.
One of the significant challenges in creating the Dragon Scale Design System was aligning the diverse needs of stakeholders from different parts of the university. The academic side had distinct requirements compared to the medical and hospital side, making it difficult to create a unified design language. Securing buy-in from distributed communicators across various departments was also challenging, as each had its own priorities. Additionally, we were undergoing a major CMS upgrade from Joomla 3 to 4, which required modifying existing components and creating new ones to ensure compatibility.
The primary goal of the Dragon Scale Design System was to create a standardized and cohesive design system that unified our web presence across campus, reducing development time and improving the overall user experience. Ensuring a collaborative process was key, so I actively involved the creative team and several distributed communicators to gather valuable feedback.
To inform the development of the Dragon Scale Design System, I conducted a benchmarking exercise, studying other university design systems such as Indiana University's Rivet Design System and Ohio State's Buckeye UX Design System. This research provided valuable insights and helped shape the structure and components of our own design system, ensuring it met the needs of our diverse stakeholders.
The Dragon Scale Design System, built using Adobe XD, includes a comprehensive set of UI components such as buttons, forms, navigation elements, and typography standards. Each component was designed to be flexible and adaptable, creating a centralized library that ensures consistency and efficiency across a variety of digital platforms within UAB.
Throughout the development and implementation of the Dragon Scale Design System, I learned that flexibility and collaboration are crucial for success. Engaging with stakeholders from various departments early and often allowed us to address their unique needs while maintaining a unified design language. Additionally, the importance of robust documentation and guidelines became clear, as they ensured consistent application and easier onboarding for new team members.
