Mackenzie Investments
Mi dsm library
This project was an extension from IG. Mackenzie Investments asked us to assess their Adobe XD documentation and website content for alignment between the IG and MI design systems. The project involved prioritizing components, establishing a design system in Figma, and creating documentation by leveraging existing IG work.
My Role
I collaborated throughout the whole project; from cataloguing and creating individual components for various screen sizes in the design library, to guideline development on zeroheight.
Library development: I catalogued existing elements and crafted reusable UI components, styles, layouts, patterns, and siteblocks for various screen sizes.
Documentation: I created thumbnails, documented component states, anatomy, usage guidelines, and responsive behaviours to support comprehensive documentation.
Team
UX Design Lead
Designers (Client side)
PM
Duration
Fall 2022
Tools
Figma, Adobe XD, Jira, Excel, Zeroheight
Client
Problem
The client addressed the need for a comprehensive solution to unite disconnected teams together in one centralized space, effectively closing the gap between design, development, web production, brand, and creative teams.
Design Challenge
Evaluate the existing content in their Adobe XD documentation and on their website, seeking alignment between the IG and MI design system.
Intended to transit design components to Figma; leveraging the platform for an overall more efficient and streamlined design process.
Solution
The solution consists of two components. The Figma-based design library serves as an updated platform hosting all components, complemented by comprehensive documentation on Zeroheights. Together they form a unified approach to meet the need for a centralized space, bridging the gap between designers and other teams.
1
Figma Design System
Used Figma for creating component states, responsive behaviors, and generating visual aids for documentation with seamless integration to Zeroheights.
2
Zeroheight Documentation
A centralized platform for teams, ensuring alignment with brand and business guidelines, offering tools and resources, and fostering collaboration.
✏️
For Designers
The Design Library in Figma allows designers to easily build components and address their need to quickly assemble and iterate on designs.
🤝
Team Connectivity
Zeroheights served as an accessible and organized repository, providing components, guidelines, and essential documentation to support and streamline tasks for diverse teams (i.e. developers).
Aa
Aa
Aa
Process
Component Audit & Prioritization
We conducted a thorough evaluation of their website and Adobe XD design file, meticulously cataloging the identified components in a comprehensive spreadsheet. This helped us to:
Gain a understanding of their existing design landscape
Uncover inconsistencies within their design library and documentation
Systematically categorize and prioritize the components
By the end of the project, we created a table documenting the status of components to update our clients and monitor project progress.
Design Library
The design library is broken up into Foundations, Components, Patterns, and Site blocks. I contributed to majority of the foundational components used in the design system. I helped design and build reusable UI components, styles, layouts, patterns, site blocks, etc. These components were also developed with responsiveness in mind, catering to different screen sizes and interactions.
🧬
Foundations
Foundational elements such as typography, colours, etc., aligned and built into Figma styles.
Icons were built with variations in mind (e.g. outline and reverse).
🧩
Components
These modular components were used later in patterns.
17 Components designed for varied states and viewports.
🏛️
Patterns
These larger, complex components were used later in site blocks.
13 Patterns designed for varied states and viewports.
Documentation
On zeroheights, we documented various aspects of components, including their states, structural anatomy, usage guidelines, and responsive behaviour. This comprehensive documentation aimed to provide an centralized extensive reference guide for all teams.
Graphic Assets
I created various visual aids for documentation, such as thumbnails and images that enhance explanatory materials.
Component anatomy
Responsive behaviour
Thumbnails
Specs
States & Variations
We documented how components behaves in different scenarios, such as hover states, active states, error states, and any other transitional phases.
Usages
We developed clear documentation guidelines on how to appropriately use each component.
By outlining the “do’s and don’ts”, we help team members adhere to established design principles and maintain consistency across various applications.
Responsive Behaviour
The documentation includes responsive behaviour; detailing how design components adapt and interact across a different screen sizes and devices.
It covers considerations for fluid layouts, flexible images, and other visual functionalities.
Reflection
Working on this project was valuable as it introduced me to design systems, enhanced my interest in UI, and improve my skills with Figma (e.g. creating components, variables, and auto layout). I learned how having a good design system enhances the efficiency of design processes and contributes to the overall cohesion of the user interface. It serves as a centralized space for teams; providing easy access to essential components, resources, and ensuring consistency with the brand/business guidelines.
