Georgia Cavanagh
Arbor laptop_logo.png

Arbor Design System

Arbor Design System

Creating a Design System for Arbor Education MIS.

MY ROLE: USER JOURNEYS, UX & UI DESIGN, DOCUMENTATION

 

Overview

Arbor Education MIS is used by schools and MATs to help manage the data of their students and staff. It offers insight into performance and aims to save time by automating workflows and administrative tasks. It is used by admin staff, leadership, teachers and parents.

Like so many startups, Arbor had accumulated a visual language over it’s initial 6 years and around 1400 pages, of varying consistency and efficiency. Without a clearly defined framework or visual rules, the process of creating and building new features was slowed, as well as offering a weaker user experience.

The aim

To create a Design System based on the current components and new solutions, to enable consistent future designs and streamline productivity for Designers, Product Managers and Developers, as well as improve clarity and delight for the user.

I worked alongside freelancer Tommy Rota and in-house designer Lily Videnova, under the product management of Annelise Nelson

 

The process

 
 

Influential data: qualitative feedback from teachers and the Customer team, as well as thorough research into industry best practices.

 
 

Competitor research and current product analysis

 

Documentation matrix

We needed a design thinking tool that ensure all use cases were covered and the current gaps in the site were considered when documenting elements, components and modules.

We agreed upon a matrix structure, so developers would not have to guess at usage, implementation or styling.

Within this intense documentation, correct semantics were agreed upon to use a shared language.

matrix artboards.png
 

Beginning to build a shared Craft library

As our analysis and documentation grew, our shared Craft library began to take shape. This was initially difficult to set up and update seamlessly (the plugin having its own bug issues) but resulted in a quicker workflow for our design team.

However, if we’d created symbols much earlier on, we would’ve avoided losing time after realising components needed to visually change; a constant part of the process.

 
 
 

Exact specifications detailed for each element, component and module

 
 

Using atomic principles to form complex module interactions

Having defined such granular element behaviour and styling, the next challenge was to combine these to form larger modules. We considered, for example, how the Banner component behaves inside the Form module and how the presence of multiple components affects the rules we’d set.

It was a massively iterative process, often having to go back and redefine initial hypotheses, which caused significant delays. However, the use of our matrix ensured gaps in thinking were captured, which was one of the protagonists for creating the Design System; developers would no longer be left to assume.

 

What we achieved

A thoroughly documented Design System, with a catalogue of Sketch files and a digital ‘Storybook’ - the majority of which could successfully be applied to user journeys. 

 

What I’d improve next time