Stewarding the Daylight Design System
During my time on D2L's design system team, I worked to prioritize and design new and updated web components to solve the needs of internal designers and end users. All my components were built to be fully-responsive, WCAG AAA accessible, and heavily user tested. I also co-developed a new interactive documentation site for internal designers to find and learn about our components.
Inputs and Form Control Redesign
I redesigned our design system's aging input controls - the vital building blocks of many core workflows - to be more vibrant, beautiful and engaging. I incorporated subtle animation work and simplified glyphs to bring a modernized sense of polish and vitality to every page of the system.
The design goals were to:
- Align the form controls with Daylight design system principled by simplifying visual design
- Increase contrast with a vivid colour palette that makes pages more visually pleasing
- Use subtle animation to delight and engage users, while emphasizing state changes
Checkboxes and radio buttons received a subtle animated transition. Input fields have refined typography and spacing. Switches are given a stronger on/off state with optional labels, and faster, more modern spring-based animations that react to hover and clickdown actions.
Menu Redesign
I build a new menu component to address a number of glaring design issues with the existing component:
- Low information density
- Dividers adding visual complexity and vertical space
- Inconsistent hover states across item types
- Misc. layout and code complexity issues
The design goals were:
- Improve information density
- Simplify padding and layout logic
- Modernize visual design
- Support modern features like a colored destructive action and inline keyboard shortcut badges
- Craft new patterns and guidelines surrounding the use and format of menus systemwide
The new menus reduced item size to the WGAC minimum touch target of 44px, significantly increasing information density and removing scrolling on certain menu implementations. The new visual design is more modern, refined, and easier to scan. After a thorough design review I worked with a developer to implement the redesigned menus system-wide and built a fully interactive Figma component for fellow designers to use in the prototyping phase.