Crafting Efficiency and Consistency: My Approach to Design Systems at Morgan McKinley

At Morgan McKinley, creating cohesive and effective digital experiences was essential to ensure that all web platforms, including the core company site and its subsidiaries, maintained a strong and consistent brand identity. As the lead UI/UX designer on these initiatives, I took on the challenge of building comprehensive design systems that not only unified visual elements but also streamlined the design process, reduced cognitive load, and increased accessibility.

UI Design, UX Design

Design Systems: The Core of Scalable Design

A design system serves as the single source of truth, encompassing components, patterns, and guidelines to support a seamless user experience across multiple platforms. Establishing a design system is crucial for scaling design solutions effectively and maintaining uniformity, especially for a brand with a global presence like Morgan McKinley.

Key Design Principles I Implemented

Typography & Visual Hierarchy: To enhance readability and visual appeal, I fine-tuned typography by selecting a consistent typeface and adjusting its weights and sizes. This helped guide users through content logically and intuitively.
Flexible UI Components: I designed modular components that could be reused and adapted across different parts of the websites, ensuring visual consistency while saving time in future updates.
Expanded Color Palette: To support dynamic design needs, I extended the brand’s color palette with shades and tints that adhered to accessibility standards (e.g., contrast ratios) and offered flexibility for different design scenarios.
Spacing & Layout Consistency: Establishing consistent spacing rules contributed to a cleaner, more organized look. I prioritized responsiveness, ensuring that these guidelines worked seamlessly across various screen sizes.
Button Variations: I created button designs in different states (e.g., hover, active, disabled) and sizes to cover all user interactions while maintaining a cohesive look and feel.

Tools and Processes

Figma was integral not just for design system management but for all UI design work. Its robust component and variable management features simplified the process of maintaining the design system and allowed for easy updates and version control. Figma’s collaborative features also enabled seamless teamwork and feedback loops.

Considerations for Accessibility and User Experience

Throughout the design system creation, accessibility was a top priority. Ensuring text was legible, components were keyboard-navigable, and all interactions had clear feedback were just a few of the strategies that contributed to an inclusive user experience. Additionally, by reducing cognitive load through clear layouts and minimal visual clutter, users were able to engage more easily with the content.

Impact and Outcome

The implementation of these design systems significantly improved the efficiency of design and development workflows. Teams could rely on pre-designed components, reducing the time needed for new projects and updates while maintaining quality. The consistency across Morgan McKinley’s websites fostered a more professional appearance, enhanced user trust, and boosted engagement.

Creating scalable, user-centered design systems at Morgan McKinley showcased how thoughtful design efforts can elevate the digital experience, aligning with user needs and business goals.