During my internship at WSIB, I developed a design system with various components to build efficiency, consistency, and scalability for WSIB products. Using a design system allows products to become consistent in aesthetics, user interface, and overall user experience for the customer.
TIMELINE
TEAM
TOOLKIT
SKILLS
Core Foucs
Build an accessible design system for the lab to ensure design consistency, efficiency and scalability across all WSIB products.
Problem Space...
Here's some context about the project...
WSIB was finding it difficult for to stay consistent with their design elements such as components and foundations because they didn’t have a defined system in place that could be applied to all company projects.
The goal of the WSIB design system was to unify the projects within the innovation lab R&D projects while also introducing mental health elements.
What do I mean by mental health elements?
Mental health is a big part of design, Different colours and shapes are interpreted in certain ways by users and affect how they feel in that moment. The design team at WSIB including myself, wrote the entire document with 15+ components that describe “best practices” when it comes to design and how to delight users as they interact with elements on the screen.
Design Audit
This was the current state of the design components at WSIB...
Button default and hover state on light and dark backgrounds
Alert banner has necessary components (icon, title, description)
Only includes one type of buttons, consider adding secondary buttons, icon buttons etc.
Missing ‘focused’ and ‘disabled’ states for the buttons
Includes some components such as progress bars and tables, but only includes color, no typography or spacing guidelines
Color palette is not fully built out
Possible considerations for improvement:
1) Primary colour and light/dark variants
2) Second colour and light/dark variants
3) Additional UI colours (backgrounds, error, hover, typography, iconography)
Includes a variety of header styles (with weight and size)
Includes different states for link texts
Consider including letter spacing for all styles
Possible considerations for improvement:
1) Subtitle
2) Caption
Missing capital case guidelines
Only includes left navigation
Possible considerations for improvement:
1) Add bottom navigation bar
2) Tabs Icons for nav menus
3) The left nav menu is outdated
Limited selection of icons (only includes basic icons)
Possible considerations for improvement:
1) Include more system icons (ex gear, search, tool, menu, preview etc.)
The audit helped determine what elements from the current design system worked well and what could be improved.
Moodboard
The moodboard includes inspiration from various design resources and latest design trends. It leverages research on industry design systems was conducted including apple, google, starbucks, and microsoft
Final Design
Components
I worked on designing two variations of the design system.
Variation 1 - The Creative Design System
The purpose of this design system was to explore design trends and unconventional UI patterns. I was able to explore unique colour palettes, various styles such as neo-morphism as well as interesting type faces.
Variation 2 - The Enhanced Design System
The purpose of this design system was to act as an extension of the current WSIB internal design system. The underlying foundations such as colour and type face are all influenced from the previous projects done by the lab to enforce consistency.
Creative Design System
Typography
Colour
Buttons
Side Navigation
Bottom Navigation - Mobile
Tabs
Text Fields
Enhanced Design System
Typography
Colour
Buttons
Bottom Navigation - Mobile
Text Fields
Learnings
My big takeaways...
With design systems, organizations can save hours of time and money by replicating design decisions at scale. In creating this design system, I learned about behind the scene elements for design such as pixel perfect sizing, designing for accessibility and ensuring consistency at every customer touch point when users interact with various design components.
Interested in working together? Lets talk :)
