Earlier on in the year, myself, and Derek Hawthorne from SDS connected on LinkedIn about a mutual interest in an article about making the web a greener place. Through further conversation we discovered that we are both working on Design Systems.
SDS are at the very early stage of creating a Design system while we are further on in our journey. Derek reached out to see if we could share what we are doing, so we set up a sharing session.
What SDS are doing
SDS are at the beginning of their journey and are really interested in our process so far, they have had an initial workshop with Brad Frost to learn more about atomic design – the methodology we are also using. We had a chat around the benefits of this and the flexibility it brings to design, development, and the benefits it then brings to our end users.
They are also researching features and styles of other design systems to compare the different approaches and take any learnings that apply to their needs.
They have a team of content editors but no dedicated UX content writer, we talked a lot about the benefit of having somebody with this skill within the team. We have found it beneficial not only to the design system project but to other projects. Having someone that can create content, consider the user journey, touch points and micro interactions is a huge benefit.
What we are doing
We are much further along the process than SDS, we have a selection of components designed, user tested with guidelines and accessibility information for each one.
The system is at the build stage, and we have started our training with content editors.
What I shared with SDS
Co-design – getting the internal users of the system involved early at the design stage. They have helped us design to their needs, we have created rules and guidelines together and shared user testing insights round the group. Getting everyone involved early was a positive experience all round. The earlier the better.
Consider past work – there is lots of good research, testing previously done with the websites and features that have not been worked on. Looking at past work helps us prioritise what we need to work on first.
Interface audit – we screenshotted all components to review what they looked like and how they have been used. There was a lot of variations which leads to an inconsistent user experience. We also created a matrix of all the components used across our sites, this allowed us to see where they had been used and how many times they had been used.
Review, prioritise and create rules – we held workshops to help review and prioritise what should be designed first. Looking at what components would make the biggest impact in getting content onto our sites, removing any if we can, if we could combine components to make them more flexible and would they improve the customer experience.
What tools we are using – XD for design and simple prototypes, we will be moving to Figma in the future. Axure for more complex prototyping and we previously used UserZoom for remote testing, now using UserTesting.
Community and support – We have a showcase site which has guidance for each component, research and test information, accessibility information, content writing guidelines, development, and test patterns.
Training sessions to show how to use and not use components, examples, and rules. We have started a yammer group for information and support using the design system and we will create drop-in clinics for anything that needs supported on.
Measuring success – we all know the benefits of a design system, but as a business we need to show how successful this is in terms of time and money. Recently one of our designers completed an ROI course with Nielson Norman, this really helped us to look at our aims and potential metrics.
What has gone well – we talked about what has gone well, lots! We are a small team, so communication has gone well, and the business realises the potential of a design system. However, resource is always an issue so we are behind in where we would like to be.
Benefits of sharing
It was refreshing to speak to a completely new team that were equally enthused by the complexities of creating a design system. It gave me an opportunity to step back and review where we are and how we got to the stage we are at.
Here are a few of my thoughts about sharing:
Learning – If others can learn from the steps we have taken or the mistakes we have made then it will make it easier for their journey.
Networking – It is good to connect with likeminded people out with your own work group. Creating new connections brings opportunities (like this sharing session)
Reflection – It gives you an opportunity to reflect on the work you are doing, and it helps to give fresh perspective.
Openness – Creates accountability for the work you are sharing.
Self-esteem – It is always good to get feedback on the work you are doing.
What’s happening next
We had a further session with Amanda from the SDS team to talk more about how the UX content role worked within the project:
Katie our UX content writer was involved early at the design stage, helping us to form our guidelines and rules. We also ran a weekly guideline meeting for everyone involved in shaping the guidelines from accessibility to the content writers.
We talked about the tone of voice we use for our guidelines and how SDS might approach this.
Through discussion we realised that our marketing teams both also create guidelines, Amanda was interested in how we approached this. We work closely with the content team, and we looked at where any duplications were, made sure our style of writing and terminology were consistent and looked at a logical place on the showcase site that their content could also sit.
Katie our UX content writer has had a further session with the SDS team to talk more about her experience and the benefits it has brought to the design process so far.
I will be having a future session to go over the audit process more and we will continue to stay in touch with the team as our journey’s evolve.