Forma 36, our Contentful design system, enables internal teams to make updates to the web app more frequently and efficiently. Because Forma 36 is open-source, our customers can also use the design system to customise their Contentful experience. It covers everything from components to foundational design elements such as typography, color and transitions, as well as guidelines for UX copy and accessibility. We’re continually evolving the design system by adding more and more components and guidelines.
We recently used the design system to refresh the content on the home screen and empty states — all those screens you see before adding content, successfully creating a local or mispelling a search result. These updates are intended to create a more accessible experience for editors and content creators, and went smoothly and quickly thanks to Forma 36.
Here’s to a more inclusive, more enjoyable web app experience.
We set out to make the web app more inclusive by reconsidering the screens content creators frequently see and use. We started with the screens that users may see when they’re starting something new or a little confused in the web app.
We used the UX copy guidelines from Forma 36, which we created to empower product teams to write consistent and intentional product copy. Our UX copy aims to be simple, clear, approachable and supportive to help all users navigate through Contentful.
Updating the role-based variations of the home screen was our first priority. It’s the first screen that users see when they log into Contentful. We rewrote the copy to make it as clear and direct as possible. One UX copy guideline from Forma 36 we considered often on this screen is start sentences with an objective. This enables a user to quickly scan the screen and take an action. We also focused on progressive disclosure by considering the information a user should see initially, and which information can be revealed after the user has taken an action. The home screen now helps users explore Contentful and Contentful projects with links to case studies, documentation and the Contentful community forum. Below this introduction, users can invite co-workers and ask Contentful experts questions. Technical language is reserved for the bottom of the screen, where the content for developers lives.
The web app has twenty-seven empty states. That’s twenty-seven nearly-empty screens where we can express our quirky warmth and add in the occasional German word. (Contentful was founded in Berlin, after all!)
Empty states shouldn’t be dead-ends. We’ve added links for users to take the next logical step with a single click. If you try to preview your content before setting up a content preview, you’ll see a link with instructions to set it up. In cases where a user’s role stops them from proceeding, we share an explanation or let them know that they may need guidance from their admin. Giving simple guidance through direct UX copy reduces the need for users to contact support when something isn’t clear.
Developing the empty states in a consistent layout went relatively quickly with the Forma 36 React components. These screens benefit directly from a using design system: a fixed layout where components can be reused to create consistency across similar content.
Forma 36 is an open-source design system created by Contentful to create consistency, improve workflows and reduce the time and effort it takes to create extensions for the web app. It provides digital teams with tools, such as a UI kit and react component library, and guidance on everything from copy and layout to accessibility and keyboard shortcuts. We relied on Forma 36 to accelerate our own project and it reduced the development time dramatically. We assembled Forma 36 components to develop quickly and consistently.
As a growing design system, this update helped our developers and Forma 36 team identify improvement areas for working with Forma 36 and best practices for contributing to the design system. As Forma 36 is open-source, defining the contribution model and design system support is important to the success.
The web app offers users an improved experience with updated empty states and refreshed home screens. We’ve even provisioned for the future by creating a template and illustrations for use in building future empty states, and making it easier to refresh onboarding content in the home screen by building a component-based layout in React. The work we did to create content, copy and illustrations continues paying off.
We’re proud of improving the user’s experience, clearing up tech debt and making future work easier.
Want to see more? Checkout the web app for yourself: sign up for a free demo.
A front-end developer at Contentful and Forma-36 fan and enthusiast.