MathWorks' internal application teams were undergoing a major standardization of frameworks, components, and visual design. The main drive behind this effort was to create a unified and branded design system for our globally used employee-facing software.
Tools
01
Before
At the beginning of this project, each app had it's own color scheme, layout choices, conflicting iconography, and dated look & feel. In addition, none of them were responsive.
02
Color Palette
#12B0E0
#005695
#4A5E75
Alerts
Neutrals
The three blues were based off of MathWorks' brand colors but were fine-tuned to have a more modern feel. The alert colors have a variety of uses and were color-blind tested.
03
Typography
Futura and Arial were chosen because they were standard web fonts used on the company's website. To keep things consistent, heading and body font sizes were unchanged from that of the website's.
04
Iconography
Previously used icons were gradient heavy, inconsistent, and busy looking. When re-designing the icon library, I wanted to keep things flat, simple, and reserve colors for semantic meaning.
05
Componentization
In addition to the visual aspect of the overhaul, sharing code was an important part of the process. The toolstrip and advanced search above are just a couple examples of components we standardized.
06
Guidelines
I created a guidelines web page to ensure teams would have a set of rules to follow when implementing designs. CSS specs were included on the site so a developer could simply copy & paste values which helped with avoiding one-of designs.
07
BizApps
The first to implement the design system were the BizApps teams which handle customer-related information like customer accounts, licensing, and recruiting.
08
IAT
The IAT portion of internal teams focuses more on development tools associated with generating bug reports and running clusters of test environments.
Five teams at MathWorks adopted the design system to unify visual styling, common components, and ultimately brought siloed teams together to collectively work towards an end goal.
