Rolling out a design system

April 12, 2020

The user interface of Smartr365's SaaS application was started as an Angular-based single page application around 2017. They chose Angular as it was an all-in-one solution that had a seemingly straight forward data flow to allow for rapid and isolated development. Smartr365's user interface consists of hundreds of components used to manage user input, data visualisation, and productivity.

Like most MVP's the Angular project was riddled with ailements that severely impacted both DX and UX. Addressing these issues would give Smartr365's customers and employees a better experience. Win/win.

Assessing risk

From a technical perspective, a lot of the foundational aspects of a user interface were not defined correctly. Things like page layouts, colors, fonts, responsivety, etc. were inconsistent which was a tell-tale sign of a lack of process around best practices in developing for the front end.

We understood that there was three major pieces of work that needed to be completed.

  • Cleaning up the fundamentals (breakpoints, colors, fonts, etc...)
  • Refactoring file/folder structure
  • Rolling out new components

The darkest days

Cleaning up all the fundamentals for the application was a big orchestrated task. It involved a lot of collaboration between all the developers who were working on the frontend and the QA team. These changes had a global impact on the application and they needed to be tested thoroughly.

Migrating one component at a time

Rewriting the whole front end application was obviously not an option