Prisma docs
Truelayer's design system
I wrote some words about why documentation really matters and my experience building TrueLayers design system.
Prisma (TrueLayers design system) has the been the largest project I've worked on at TL, but it has given me an opportunity to learn and grow a lot. One part of my role on the Prisma team was designing and developing the Prisma website (currently internal only).
V1
Like any new website I started with an extensive discovery phase. The site had a complex IA as we wanted it to include areas for Brand, UX/UI and code. I also wanted to create something engaging that told the story of Prisma while also being easily digestible.
It was also important to create website that was scalable, maintainable and easy to update for everyone on the team. These were the main reasons I created a headless CMS called Storyblok using the Gatsby framework. I then created designed and developed components that could be used to create pages and templates for the documentation.
After a few iterations and feedback sessions I had the final site live in November 2019. As with any design system the site is always changing and being reworked to suit the needs that have appeared in the mean time and me and my team are currently working on v2! Currently the site is internal only, but I've included some screenshots of some of the pages and sections below.
V2
As with any project we're always looking to make improvements and expanding on the original idea.
Prisma was no different and in 2022 after doing some testing and receiving feedback from our users, we decided to restructure the site to improve the UX and also refresh the UI.
The main pain point from the feedback was users finding the content they needed. So we started by looking at the IA and main navigation. After some tree testing and some discovery we found that wasn't the main problem. Rather it was not directing our users to the most relevant content at the right time.
In V1 we wanted to tell the story of Prisma more, but in V2 we brought the content to the front and centre, direct links earlier on the user journey to the most visited pages.
This is why we introduced direct links to pages on the homepage, popular pages on the pillar pages and lots of clear CTA's within the content.
Speaking of content. We also simplified these pages, creating more traditional documentation feel. clear easy to read layout and more relevant visuals. Some of the main changes to the documentation pages were:
More neutral colour palette
Centred content for easier reading
Removed side elements, all CTAs within the main content
Accordion element to condense information
All of these choices were made to give our users easy access to the data they need as quickly as possible.
In 2023 I will be looking to introduce a search function, and re running our feedback so I can see what users need. Although since the rebrand my main focus will be updating the content along with brand.