Arbor MIS

Design system

Project overview

Arbor’s mission is to help schools learn from their data. Their Management Information System is used by schools to bring student and staff data together in one place – from attendance to behaviour, progress and payments.

The brief was to create a design system in order to improve clarity, discoverability, efficiency and consistency for the MIS users and to build a solid design framework for Arbor’s designers and product managers alike.

My ROLE

I worked on this project as part of a small team of three designers. There were around 50 individual components to be reviewed across 4000 pages in the system. For each component, our goal was to determine which properties could be legitimately specified, to cover all appropriate states for web, mobile and tablet, and to consider accessibility and localisation requirements as well as UX/UI specifications and CSS box models.

The biggest challenge was to consider all the elements individually while maintaining an overview of the system as a whole.
We looked at basic elements first, to then move onto more complex components.
We started with colours, typography, icons, buttons and basic text fields.

At first, there was only so much we could do on the basic elements; as we moved forward, we had to revisit them to maintain consistency.
While doing this, we started to generate global rules, guidelines and design tokens to be applied throughout the system.

Next up I dived into layouts and containers, while the rest of the team worked on images, headers and the remaining basic components.

To work on more complex components, we came up a matrix to give us a systematic and consistent approach.
For each component, we considered types, interaction states, system content, user input content, destination and intent. We then looked at attributes and variations as well as positioning and groups.

Building a design system at this level of depth is a big effort and it could not be completed during my three-month contract.
When the freelancers left the project to be continued by the in-house team, designers, PMs and developers at Arbor were really happy with the ground work we put down.

"Tommy has been a super fun addition to our team. We've really enjoyed getting into lengthy discussions about the merits of one design over another. He is cheerful, thorough and a great visual designer too. He's helped upskill our in-house team with his collaborative nature and is always sharing new ideas and technology. We'll miss him!"

Annelise Nelson - Product & UX Manager at Arbor

  

Want to work together?

hello@tommasorota.com