Home

About

Work

Contact

MATHWORKS INTERNAL APPS

Goal:

The company's 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 products.

My Role:

  • Lead Designer
  • User Experience
  • Front-End Development

01

Before


At the beginning of this project, each app had it's own color scheme, layout choices, conflicting iconography, and dated look & feel. None of them were responsive either.

02

Typography

Futura

Arial


Futura and Arial were chosen because they are the 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.

03

Color Palette

#4a5e75
#005695
12b0e0
Alerts
#4c4c4c
#d3d3d3
#efefef

The three blues were based off of previously documented MathWorks colors but were fine-tuned to have a more modern feel. The alert colors have a variety of uses and were color-blind tested.

04

Iconography


Previously used icons were gradient heavy, incosistent, and busy looking. When re-designing the icon library, I wanted to keep things flat, simple, and reserve colors for semantic meanings.

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. These guidelines are still being used to this day.

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 like generating bug reports and cluster testing environments.