Content Library
Creating a fully-integrated Content Library has always been a dream. Here's how we built our first Content Library for Paribu.
Content Management
Project overview
My mission was to build a content management system that would allow us to maintain consistency, remove content duplications that bloated the code and integrate with a localization software that would allow us to edit and translate the content easily.
I had the chance to create the first version of Paribu's Content Library with the help of my fellow UX Writers and Product Designers in SHERPA / Paribu.
Challenges and constraints
We had multiple problems with our content management processes. The first of them was the lack of control over the content. We didn't have the necessary infrastructure that would allow us to find a text inside the Paribu mobile app and change it without affecting other copies.
Another problem was the lack of consistency in the content. Because the content was written by several people and passed on to new writers, each flow had different copies for similar components. As a result of different copies used for the same component, deciding which one to use was difficult and time-consuming.
The process
Content audit
The first thing we needed to do was to carry out a detailed content audit to identify our components and existing text elements. We separated each component and grouped them together in a different Figma file and started to form our Content Library.
The content audit also helped us to identify where and how each copy was used. Detecting any content duplications along the way, we went through the entire app using screens from the Figma design files and noted which copies needed to be changed.
Language keys
With this project, the term "language keys" officially entered our lives. Language keys are used to create an alias or shortcut to the text. Using language keys saves developers from writing the copy into the code itself. As we were frequently lost inside thousands of lines of code each time we needed to change a copy, we decided to use language keys in our content system.
Just by writing the appointed single-word language key into the code, it's possible to show multiple lines of text. This meant that we would know where each copy was without getting lost in the code. Cleaner codes, cleaner apps.
With this method, we were able to manage and edit all the content of the app on a single screen. It also allowed us to create content in different languages and translate our mobile app.
Lokalise
Apart from the content library, we were forming in Figma, we needed a tool to help us manage the content that was written inside the app. We also needed the language keys that contained the copy to be exported and delivered in the correct format, which was a JSON file. So we decided to use Lokalise as our localization tool.
The interface of Lokalise allows you to enter both the language keys and the text values into the same screen.
The syntax of the language keys was quite important, so we worked closely with our front-end developers to decide on the syntax of our language keys. Our format for writing language keys allowed us to separate each content according to its flow, containing the message and content type.
After completing the integration with Bitbucket, we were able to change any copy from Lokalise and send the changes to the development team with just a push of a button to be checked and deployed. This facilitated and sped up our entire content delivery process.
Content library
With our content audit, we went through each copy and we combined them into a different Figma file. We appointed language keys to each content and grouped each content according to its flow, component, and message. Now each content had a language key and a group it belonged to.
The only step left was to complete the content library. The entire process allowed us to think about what we needed in our content management system. We needed to see all the content in a single place and also needed to see the appointed language key right next to it. The content library had to include both the copies and their language keys so that a developer, product designer, or content designer would only need to search for a term to find the related content or language key. All the content of the app was finally in a single Figma file.
Each content of a component was grouped. So for example, if we needed to write an error message, we would just go to the error messages section to see the format we were following to create consistent copies.
Key takeaways
This project was a great opportunity to analyze our content management processes
and discover what we need to create consistent and clean copy inside an app that has multiple flows.
I believe that building a Content Library has multiple benefits:
- Creating a space to check if every content is written consistently,
- Being able to manage all of the content in a single place and
- Creating a content delivery structure that is easy to work with for everyone (especially developers) to name just a few.
So I highly recommend building a Content Library to every UX Writer who wants to keep track of the copy that they write.