Landing Page 2.0

Problem

Content managers need a self servicing page builder tool within Contentful to create new landing pages without the assistance of designers and engineers.

‍

Identifying the needs

• Styling
  The users should be able to choose from a number of brands’ style guides to maintain visual consistency.
  ‍
• Guardrails
  Users should be able to create a full page without breaking the design or the overall experience.
  ‍‍
• Modularity
  Allowing the users to mix and match different components to create a comprehensive landing page experience.
  ‍

The Challenge

The challenge is in the balance between freedom of styling and limited options. Having too many options will create complexities and errors. Having too few options will result in stagnation of layouts. The team has to figure out when to impose strict rules and where to enable additional options.

‍

The Approach

Identifying what can and cannot be optional within the components is the first step. Knowing the difference between a must-have and a nice-to-have can make all the difference. The team will need to audit the entire list of components to get a better understanding of its use cases. Things that need to be determined:
‍

• Spacing between each component with and without a background
• Atomic components that can be toggled on or off
• Variants of the same component

‍

Assumption

The team had a main assumption in the beginning of the project. We assumed that content managers and creators don't always have eyes for finer design details and that they aren't designers. What we did not want was for them to change every single aspect of the design and be bogged down by the intricacies of each component.

‍

Validation

We were provided with a list of components by the content managers for a round of audit. From this audit, we took it to the drawing board to narrow down on some of the look and feel and also consider some of the guardrails and flexibilities that would be necessary for error prevention.

‍

‍

The team quickly constructed a mock up to bring in front of our content managers. We asked them to start interacting with it to build a page using a draft of a previously published landing page. We were able to confirmed a few points:
‍

• Content managers weren't paying attention to design details and worked right off of their word document with the page outline.
  ‍
• They like to place CTAs across different points of the page.
  ‍
• There are redundancies in the components that were provided.
  ‍

Through this quick test, we were able to make our first iteration of our component design.
‍

‍

Ways of working

It’s always good practice to loop in the engineering team as early as possible. For this project, it is absolutely essential to communicate with our engineering team from step one.
‍

• Understanding use cases
  The engineering team will need to understand the use cases for each component as much as the designer does.
  ‍
• Communicate the requirements
  Annotating all the small details is critical. The engineers will need to know the complexity of each component as well as the conditional logics.
  ‍
• Iterate, iterate, and iterate
  Each component goes through multiple rounds of QA between designers and engineers before it is committed.

‍

Solving the puzzle

This particular project is like a game of Tetris, fitting all the pieces together isn't always simple. There are a lot of variables that need to be accounted for depending on the combination of components. Standardizing horizontal or vertical spacing required a lot experimentation. Once the values of spacing were set and committed; the components can be arranged in any direction.

‍

‍

Optional sub-components

Often times, a component needs to be modifiable to further expand its flexibility. These modular sub-components are built as "toggles" where the user can simply switch on or off as needed. Some components can have as many as 2 to 3 of these toggles to improve its adaptability to different use cases.

‍

• Optional text fields
  Some sub-header texts can be toggled on or off depending on the content needs.
  ‍
• Call to action
  CTAs is a component by itself and it can be inserted anywhere on the landing page. Some components have it built directly into itself with the option to be toggled off.
  ‍
• Conditional background
  Certain components have a background color assigned with a conditional logic. The spacing between components will change accordingly depending on whether the background is on or off. In most cases, if the background is visible; spacing is set to 0. When the background is not visible; spacing will be decreased relative to the contents in the container. Additional variables have to be accounted for as well; background component against background component, background component against text component etc.
  

‍

‍

Testing

Instead of sending usability tests out to customers or SMEs. We tested directly with our content managers who would use this tool. This step is more arduous than designing or developing it. Each component  will have to be tested individually, then with a number of combinations with others. This is to further inform our rules and guidelines as we continue to work towards an autonomous solution.

‍

Full autonomy

The result is a tool built within Contentful, a highly modifiable platform for content management. The users can now combine 27 modular components into any number of marketing landing pages without designer or engineering assistance. There are multiple guardrails and rules put into place to prevent any errors. The tool's been used to create several landing pages and campaign page with little to no intervention from designers or engineers. It's a win win for all parties.

‍

‍

Future state

Fast forward to present time, there hasn't been any plans to add any additional modules to this tool. This means that there's enough modular variety to meet the needs of the users. For the time being, 27 modules produce more than enough permutations than our minds can fathom. There are 6 to 8 modules that are frequently used more than others; which means this tool will require occasional updates eventually to expand its capabilities.

‍