December 2, 2021
As Head of Design for both Products and Brand, I’ll aim to tell you what I’ll be getting up to over the next 3-6 months.
We’re definitely updating our ways of working. For example, we’re alining and structuring to create a design tokens system , which is essentially where tech and design come together. So, as opposed to building one experience for one part of our product, one for our User Dashboard, and one for Content, we’re building an experience and then we use these tokens as a way of putting the brand expression onto that. It’s all done through the code. It means when you use any part of Addland to search for your perfect plot, the CTA button for ‘Find Land’ is coded to work with all our CTA buttons, but it gets an Addland brand colour, font and spacing just by changing the tokens. Nobody has to create three separate code bases or designs. This way of working enables us to scale more effectively. It really fast-forwards what we can design and also what we can build.
A design system isn’t just code, designs or documentation. It’s all of these things, plus relationships between the people who make the system and the people who use it.
Our design systems build on our culture of collaboration here at Addland. It brings together various teams; Product & Engineering, Marketing & Brand, Sales & Operations. To create reusable components and guidelines, that help us build a consistent look and feel across everything we do.
A Design System is a collection of documentation on principles and best practices, that helps guide a team to build digital products. They are often embodied in UI libraries and pattern libraries, but can extend to include guides on other areas such as ‘Voice and Tone’.
There is a new UI Styleguide set up and is designed around Tokens (Tokens are all the CSS values needed to construct and maintain a design system and its Apps). With in the UI Styleguide are all the Atoms that make up our components and pages… All the CSS, guidance around hover and focus will be held here. Nothing is added to this UI Styleguide unless its signed, from Stakeholders and Accessibility.
Accessibility is at the forefront of our Design thinking. We should not be creating anything without it in mind. Accessibility is not just ticking a box to gain favour within SEO, it helps massively in a greater design experience, coherency and reason for being. The integration of Storybook would mean that we can deploy small snippets of CSS such as colour changes or patterns to all or targeted components - Live to App or via UAT ready to release, without the need for engineering time. Storybook is also a perfect partner for use with AWS.