For our team, the problem was twofold: Canvas, a platform critical to the educational journey of students and instructors, lacked a cohesive, accessible, and scalable design system. This led to inconsistencies in user experience and accessibility gaps that made navigating assignments and deadlines unnecessarily complex.
Our challenges included:
A sea of blues:
The overuse of blue in different shades diluted visual clarity.
Icon chaos:
Filled and stroked icons without clear guidelines disrupted navigation flow.
Typography overload:
Excessive font variations made the interface feel inconsistent.
Unstructured Components:
Many UI elements were repeated but lacked consistency in structure, padding, and alignment.
Inconsistent use of blue across markers, icons, graphics, links, hover states, and buttons.
There doesn’t seem to be a clear rationale for when a filled or stroked icon is used.
The repetitive use of font weights and sizes creates unnecessary complexity. A reduction in the number of font styles would help unify the design and make the interface cleaner.
We started by dissecting the Canvas interface. Screenshots of UI elements—buttons, navigation menus, modals, and form fields—were captured and meticulously categorized in Figma.
This step highlighted inconsistencies, including overuse of blue, disparate icon styles, and redundant typography.
To inform our work, we researched mature design systems such as Material Design, Apple, Atlassian Design System, etc. These served as benchmarks, offering insight into best practices and scalable frameworks.
%20-%20Frame%201.jpg)
We established guiding principles: clarity to simplify navigation, consistency to enhance predictability, and accessibility to include all users. These became the foundation for every decision we made.
Translating Principles into Action
To ensure these principles remained central throughout the process, we asked ourselves at every step:
For example:
Typography Simplification: We reduced redundant font styles to create a clearer hierarchy, making assignment titles and deadlines stand out.
Color Accessibility: We avoided over-reliance on blue, which previously confused students by being used for both primary actions and secondary links.
Accessibility for All: To serve all students, including those with disabilities, we followed WCAG standards. This ensures features like proper color contrast and keyboard navigation work for everyone.
During a brainstorming session, I introduced the idea of using a tree diagram to visualize the relationships within our foundational elements. This approach stemmed from my observation that many design systems lacked an intuitive way to represent hierarchy and interconnections, often leaving developers and designers with only lists or broad categories to navigate. A tree diagram, by contrast, would provide a clear visual map of the system hierarchy.
I explained this idea and we expanded upon it collaboratively:
1. Color:
I suggested dividing colors into primary and secondary categories, each further segmented by function—such as action, text, danger, and background. This structured breakdown made it easy to see where each color fit into the larger palette and how it should be applied across the interface.
2. Spacing:
The tree diagram proved particularly effective for spacing, where vertical and horizontal dimensions were divided into levels (e.g., level 1 for tight spacing, level 4 for wide margins). This clarity helped us define precise spacing guidelines, which significantly improved layout alignment and balance.
We crafted components such as buttons, modals, and navigation menus, refining them through testing and feedback. This iterative process ensured alignment with our principles and the needs of Canvas users.
Testing:
To ensure the effectiveness and usability of our design system, we invited users to test it by recreating existing Canvas pages using the components, colors, and typography outlined in the system.
Challenges in Testing the Design System
Through our testing, we uncovered several key challenges that shaped the next iteration of our design system:
1. Applying Spacing Guidelines
While participants appreciated the structured tree diagram for spacing, some found it difficult to apply the guidelines effectively in complex layouts. For example, aligning elements with varying spacing levels (e.g., a combination of tight and wide margins) proved challenging without additional visual aids.
Solution: We added more visual examples and annotations to the documentation, illustrating how spacing levels could be applied to intricate layouts. These examples included layered components like cards within a grid and nested modals, helping users understand the practical application of spacing rules.
2. Lack of Pre-Built Large Components
Participants often needed to repeatedly recreate large components such as course cards, sidebar navigation, and assignment lists. This process slowed them down and created room for inconsistency when these elements were rebuilt manually.
Solution: We introduced a library of pre-built components for commonly used elements. These ready-made components allowed users to quickly drag and drop complete sections, reducing build time and improving consistency. Each pre-built component was designed with flexibility in mind, enabling customization while maintaining the system's integrity.
