arbor design system

web & mobile UI | prototyping | research | team leader

Arbor provides simple, smart benchmarking analytics and MIS for schools, MATs and Groups, helping centralise their data and workflows to improve student insight and save staff time

While at Arbor Education, I worked on creating a design system in order to standardise not only the interface of the current system and any future features, but to create better, unified processes and workflows internally. The design system will serve as a toolkit to reduce inconsistencies in the system as well as knowledge gaps within the team, thus creating a coherent, delightful experience for the end users.

The team working on this task has changed a few times over the course of the last eight months - we began with a three person team, myself alongside two freelance designers, after a few moths this changed to just me for a month with one of the freelance designers returning for a further three months. Currently the team consists of myself and a freelance designer working alongside our front-end engineering team and product manager to deliver the first components while continuing with the design of new ones.

Our team decided on taking on the mammoth task of creating a design system for an enterprise product, as we felt that that would be the best way to provide all other teams in the company with a reusable, scalable, component-based approach to product improvement and development.

The design system is a thorough single-source-of-truth entity, defining all the visual elements of the system and any behaviours associated with them. Thus it includes everything from typography (both for the digital product and any printed out materials), layouts and grids, colours, icons and components, to voice and tone, as well as development documentation.

All the design work is completed in Sketch, sharing design resources within the team through a Craft library. The completed components are added to a website hosting all guidelines and development information. In addition, I created a Sketch library containing all components, ready to be used by anyone in the company when wire-framing and taking any design decisions.

For each component designed we ensure we:

- audit the existing system, uncovering all the (usually surprisingly creative) ways components have been used, in order to understand the existing context

- interview the key stakeholders within the company (product managers, engineers, senior management who still take part in product development), to gather all the requirements

- research best UX and UI best practices, ensuring the designs created are up-to-date and leveraging the existing knowledge in creating usable and useful components

- create detailed documentation covering all possible attributes, variations and states of each component alongside pixel-perfect visual design

- work closely with the front-end engineers to ensure all design is technically feasible

- user test any assumptions and major changes to the components,

In addition to the components, I took part in defining the guidelines for various use cases such as messaging within the system, entering data and displaying large amounts of information.

I took an active part in creating all site-wise guidelines such as page layouts and typography, as well as specifically looking at a number of components including tables, forms, modals and buttons on both desktop and mobile.