Mercury Design System
In 2022, a new template was designed for the University of Florida, called the Mercury Theme. To accompany the launch of this new template, a pattern library and design system was built to help the varying audiences of the university build websites and interfaces.
Link to all relevant design resources:
Mercury Design System
Mercury Design System
The Mercury Theme launched in 2022 with the homepage redesign, featuring all new content blocks to build with.
Problem
The University of Florida (UF) encountered significant challenges in their design process, stemming from a lot of decentralization and a lack of resources for differing levels of client need and complexity across multiple content management systems (CMS). Designers/ Developers struggled to find the right components efficiently, often spending excessive time navigating through disparate systems, which led to inconsistencies in the visual design across projects.
Accommodating a diverse group of individuals with varying levels of expertise in both design and development added complexity to the process, as the design system needed to be accessible and usable for all team members. Ensuring consistency while catering to different skill/need levels posed a unique challenge, highlighting the need for a centralized design system and pattern library to streamline the design process, promote consistency, and support the varied expertise level across the university.
Accommodating a diverse group of individuals with varying levels of expertise in both design and development added complexity to the process, as the design system needed to be accessible and usable for all team members. Ensuring consistency while catering to different skill/need levels posed a unique challenge, highlighting the need for a centralized design system and pattern library to streamline the design process, promote consistency, and support the varied expertise level across the university.
Accessibility and Consistency Concerns
Another problem was that without a centralized design system, inconsistencies in design elements and accessibility gaps arose, posing risks to user satisfaction, engagement, and legal compliance. Issues included inconsistent design elements, accessibility gaps, like poorly contrasting colors, poor non-vision web element implementation and the risk of legal accessibility non-compliance. A real headache considering the amount of departments using the web brand.
User Personas
Current / Perspective Students: (Emily & Alex)
Motivation: Motivated to succeed academically and make the most of college experience.
Pains: Struggles to manage academic workload, stay organized, and find relevant resources and support services.
Goals: Access course materials, connect with classmates, and stay updated on campus events and news to enhance academic experience and achieve academic goals.
Biography: High school senior who enjoys volunteering and participating in extracurricular activities. Junior majoring in computer science who enjoys coding, participating in hackathons, and volunteering.
Technology: Uses smartphone, laptop, and social media platforms for research, accessing college websites, and communication. Uses student portal, mobile apps, and online learning platforms for accessing course materials, grades, and communication.
Faculty & Staff: (Dr.Patel)
Motivation: Motivated to deliver high-quality education, conduct research, and contribute to the academic community. Needs to manage web prescience with as little complexity as possible.
Pains: Faces challenges in managing teaching responsibilities, accessing research resources, and staying organized amidst busy schedule.
Goals: Access teaching resources, communicate with students, and manage administrative tasks efficiently to enhance teaching and research efforts.
Biography: Tenured professor passionate about teaching and mentoring students, involved in research projects focusing on environmental conservation and biodiversity.
Technology: Uses faculty portal, learning management system, and research databases for accessing course materials, communication, and research.
Mercury Theme Resource Solutions
Pattern Library
By documenting common design elements such as buttons, forms, typography, and navigation bars, the pattern library promotes collaboration among UF team members and facilitates alignment with UF's brand identity and user experience goals. It is also much more accessible than the design kit and allows for non-designer developers to see and preview the types of content that could be on their webpage directly from the mercury theme site.
Mercury design kit documentation
Design Kit
Figma, integrated into UF's design kit, enables quick website mockups for easy client reviews and developer handoffs. Its collaborative features streamline design processes and ensure high-quality digital experiences for UF's diverse user base. This is a tool of greater complexity than the pattern library and requires access to use. It also allowed for a place to write and document more thorough theme documentation.
Example of a component inside of the design system plus usage steps
CMS Support and Flat Files
The mercury theme resources played a crucial role in streamlining our workflow from client consultation to solution finding, design, and development. We established an internal pipeline to move from understanding client concerns to crafting designs and implementing them within CMS platforms like WordPress or TerminalFour.
Future Plans
For the future the plan is now to refine process, train other designers and begin working on features for the following year. Our goal is to have quarterly updates that add desired functionality based on performance and feedback of the current system from both internal users and external clients.
Link to all relevant design resources:
Mercury Design System
Link to all relevant design resources:
Mercury Design System
