Sage / AutoEntry

Date of project - 2023

Design System

Needs Updating

FIgma Prototype - This is the prototype we used for User testing

Introduction

I started this project to help the team create faster more consistent designs. I recognised the importance of the team needing a Design System. I begin with reviewing the current product at the time which was when I joined the team in 2020.

There was a few consistent components, must of the buttons where alike. That was the starting point in Figma. Before then there was no master component for this. Designs had originally been in Sketch and the team was migrating to Figma. I had a lot of prior knowledge of Figma as I had been using it in a previous role for about 3 years.

So first up our Primary Button. Next I created the Navigation and then a Secondary Navigation. At the time there was a slight disconnect between the Mobile App and the Web Product. Primary Buttons where not consistent and many other items.

After about month I had established a solid designer friendly design system. Where we could reuse master components for designing new features. Not many rules or guidelines where established and probably more aligned itself to a Figma component library. But it did help with the output of the UX Team and speed design work. So a marked improvement.

I have titled this project as a Pattern Library as it has evolved and changed. It was initially started as a Design System but its so many projects on it never got he hard and fast rules of one and then a rebranded was required after about 2 years since its conception. So now it has evolved into the AutoEntry Pattern Library.

We have the benefit of a very large team. Where we have dedicated Design System designers in Sage, so we have the fortune positions of being able to use the Atoms and Molecules for that team to build our Organisms and Templates.

FIgma Prototype - This is the prototype we used for User testing

FIgma Prototype - This is the prototype we used for User testing

FIgma Prototype - This is the prototype we used for User testing

FIgma Prototype - This is the prototype we used for User testing

FIgma Prototype - This is the prototype we used for User testing