Mercatus Center
Design System and website redesign
Background
The organization's website needed a redesign and a design system on a short timeline alongside a back-end migration. The new design is aimed to better connect the organization with its audiences, including building a more intuitive information architecture and developing a coherent visual language. We were limited on time and had to implement a new design system and redesign while also juggling other work responsibilities.
I was 50% of the design team on this project.
My key achievements on this project:
Establishing a design system. To maintain consistency in the look and feel across different parts of the site.
Creating design templates. We took frequently used designs and created templates for content editors to use. This increased efficiency across the organization.
Details
My Focus Areas
Visual design, UI/UX, Prototyping, QA.
Primary Tools Used
Figma, Illustrator
Timeline
3 months
Problem
Through 2022, the Mercatus Center lacked any formalized design system. Some sub-teams were limited in their access to their portion of the site, while others were coming up with their own source of standards for UI elements, components, or modules.
What we found:
Duplication of unused or empty components.
Conflicting guidelines and direction.
Accessibility issues across many parts of the site.
Inconsistency in styling and component standards.
Outdated branding on older pages.
Execution
We worked with Acquia’s Site Studios as the base for our design system. Collaborating closely with our development team to implement customizations and brand standards for components.
Visual Design and UI Elements
Our first step was establishing the basic brand standards and adding global styles to Figma clearly and descriptively so that our developers could start immediately by laying the groundwork.
Color and Typography:
We upgraded the original palette for better accessibility and more creative flexibility. We also updated our typography to include Gliko to compliment our primary font, Gotham.
Components:
After a thorough study of our current components and page types, my team and I pinpointed the scope of components and layouts needed for the new design system.
Designing for a Wide Audience
The first thing I did was assess our different audiences because a student has different needs from a researcher, journalist, or a donner.
I organized the information hierarchy to account for the most relevant user needs based on the audience in certain site sections. For example, when it comes to potential students, I prioritized the discoverability of fellowships, application requirements, deadline information, etc.
Reflection
While working on this project I learned to work quickly and under time restraints. My team had to be flexible with our workflow to accommodate both the dev team and the project stakeholders. The result was a responsive and easy-to-use system that maximizes the features available in Acquia’s site studios while also providing thoughtful customizations and brand-new components. The biggest takeaway from this project was the importance of communication. I was in constant contact with the other teams such as developers, managers, and stakeholders, in order to deliver a successful product. Finding the best ways to not only relay what my needs as the designer is, but also what the other teams need from me.