Page Variables for CMS
Project overview
The company's content management system (CMS) allows the marketing team to customize the platform's web and mobile pages. When it is necessary to create customized multiple pages with few changes between them, duplicating and editing small pieces of information ends up being tedious and time-consuming for our users. With this in mind, we created Variables, which allow the user to easily create the same page with different paths (slugs) and customize them as needed.
My contributions
In partnership with engineers and product managers, I helped discover user needs and system capabilities to define requirements. In this project, we had two types of users: developers and content creators. I defined the workflow for creating variables used by developers and the experience for assigning previously created variables to pages.
Findings and project requirements
One of the biggest challenges of the project was the internal limitations of the CMS (content management system), and the complexity of the actions that the user needs to perform to add variables to a page.
Taking our limitations into account, I reused experiences that the user already has in the tool when performing other actions, so that they would not feel strange when using this new feature.
This new feature is very dense in content, since there is no limit to the number of variables that can be added to a page or content, and there is no limit to the number of paths that can be created to accommodate these variables. With this in mind, I needed to condense the information on the page so that the user could quickly scan the screen in search of what they need and then expand the data on that specific piece of information.
Create a variable
This action is only done by engineers. To create a variable, users need to define a unique name for this variable, a unique key, determine the type (text, number, link, and image), and define a default, in case the user uses this variable but does not edit the text/number/link/image field.
Add variable to a page and create multiple paths (slugs)
This process is carried out by users from the marketing teams. When creating a new page for the platform, they have the option of adding variables to this page. To do this, they need to click on the “add variable” button and select the variable previously created by the engineers. Each variable already has a default, but they can define a new specific default for this page if they wish.
After adding the variables, it is necessary to create a path (slug) for this page. It is mandatory to add at least one path per page, and there is no limit to the number of paths a page supports. In each path created, the user can determine custom values for each variable that was added to this page. If no custom value is added, the default value of the variable will be used.
After adding the components to the page and saving, the user is directed to the preview page. On this page, it is possible to see the default preview with all the spaces where these variables will be applied in the content. The user can then choose one of the paths they want to preview and “Apply Variables”, this will make the preview adapt and replace the highlighted fields with the variables customized by the user in the previous steps.
