As part of the MACH Alliance’s hackathon, we were set the challenge of designing and building a tool in five short days. The tool we created was The Food Bank Connector. It highlights which food banks are in demand, it sends out alerts and connects food banks to the help they need. This was a big task to complete within a very short space of time. It provided the perfect opportunity to showcase VERJ and other LAB group agencies skills, innovative thinking and creativity.
When you’re up against the time, efficiency is key. Not only that, but we had several collaborators working from the same designs. This meant we needed to be clever with our creativity by streamlining the design process. We need a single source of truth so that people could work side by side, following clear creative direction. Enter the design system…
What is a design system?
Design systems have been the buzz word for designers for the last couple of years now. Different people have different definitions of what a design system is but essentially it is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
If you haven’t already heard of Atomic Design System, then it’s worth having a deeper dive here. In short, it’s a methodology to building interface design systems with explicit order and hierarchy. It starts with the small bits, called atoms and it builds up to larger organisms and templates.
How did a design system help us?
Our design system acted as a single source of truth. This meant that people from different disciplines and teams were all aligned as they had a clear guide to follow. Once we had the fundamental design elements down like typography, buttons styles, field styles we could then start building more complex components. It’s an easy and logical way to ensure the success of your designs.
Having a team that is aligned on a goal with clear direction helped in the following areas:
Speed – With our collection of reusable components and clear standards of how to use them, building our product became a lot faster.
Efficiency – Everything became far more efficient with the design system in place. It allowed for more efficient collaboration between teams as all the components were laid out and accessible for the whole team. If halfway through the project we decided we wanted to tweak the colour palette slightly, we were able to make one small change to the master component and see our designs automatically update accordingly. This is a huge time saver.
Consistency – Where our product is built over different devices and platforms, we wanted it to be a seamless transition from one to another. Having the design system in place allowed for a consistent experience across all platforms.
The Food Bank Connector is more than just a passion project, this platform will make a real difference in people’s lives. With the intent of continuing to work and scale this product into other areas, solid foundations are a must. Having a design system in place at such an early stage as our foundations allows us to scale the project moving forward.
As far as our other projects go, we will continue starting every web design project by building out a clear and extensive design system. We’ve learnt how valuable atoms and molecules are. They are the building blocks to success.
What do your design systems look like? We would love to hear from you.