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.


UX Design Lead

Designers (Client side)



Fall 2022


Figma, Adobe XD, Jira, Excel, Zeroheight



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.


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.


Figma Design System

Used Figma for creating component states, responsive behaviors, and generating visual aids for documentation with seamless integration to Zeroheights.


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).





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.



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).



These modular components were used later in patterns.

17 Components designed for varied states and viewports.



These larger, complex components were used later in site blocks.

13 Patterns designed for varied states and viewports.


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.


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.


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.

The journey ends, but curiosity begins

Have questions, feedback, or a cool challenge? Send me a message—I'm ready for the adventure!

The journey ends, but curiosity begins

Have questions, feedback, or a cool challenge? Send me a message—I'm ready for the adventure!

The journey ends, but curiosity begins

Have questions, feedback, or a cool challenge? Send me a message—I'm ready for the adventure!