Creating a Design System for Arbor Education MIS.
MY ROLE: USER JOURNEYS, UX & UI DESIGN, DOCUMENTATION
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.
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.
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
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.
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.