Revolutionizing Web Page Creation: How Structured Content is Slashing Design and Development Time

Co-authored with Julie Muzina

A year ago, during our Madrid Engineering Sprint, we challenged ourselves to dramatically reduce, or even eliminate, the need for constant design involvement in the day-to-day creation of web pages. Our strategy for achieving this is based on a smarter, more structured approach to content.

The Challenge: Bridging Content and Structure

In both design and web engineering, structured data is our bedrock. It’s the magic that allows us to package content into reusable blocks, streamlining workflows and reducing repetitive tasks across disciplines. However, for many content creators, “structured data” isn’t the most intuitive starting point for crafting the engaging narratives that populate our websites. The traditional process often involved manual handoffs, meticulous alignment with mockups, and significant back-and-forth.

So, we asked: what if we could embed the principles of structured data right at the source – the moment content is conceived? What if we could seamlessly align the structure of the content with the predefined schema of our design patterns?

The Evolution: From Templates to a Robust Pattern System

Our journey towards this vision began a couple of years ago. Sophie Felder, Juan Ruitiña, and Elaine Liman from our UX team took the first steps by creating Google Docs templates that mirrored our early page layouts—back when pages were still pieced together from individual components.

As our design system matured into a more defined pattern library, our designers worked to evolve these templates in lockstep. As the patterns became tangible and their schemas more concrete, the copydoc templates we craft for our Content contributors mirrored these advancements. We aim for high fidelity, right down to critical details like line wrapping and character limits. This meant content writers could visualize exactly how their text would render on the final webpage, directly within their familiar writing environment.

Fast forward to the last two development cycles: we have designed, built, and meticulously documented eight new sophisticated patterns. Each pattern isn’t just a component; it’s an entire section of a page, bundled into a reusable asset built around a strict schema. This schema dictates the number of elements, which are mandatory, and the optimal and maximum length for each piece of content.

Crucially, this wasn’t a top-down imposition. We established a collaborative process where content contributors are integral from the outset. They play a key role in defining the schema of new patterns, agreeing on the structure, and approving the final designs. A huge thank you is owed to Gloria Quintanilla and her team; their partnership has been instrumental in making this collaborative model a success.

Putting Theory into Practice: The Hero Pattern

So, how does this schema-based approach actually transform our page-building work? Let’s consider a concrete example: our widely-used “Hero” pattern, a familiar sight at the top of many of our web pages.

Just twelve months ago, constructing this hero section demanded intricate knowledge of the Vanilla Framework, our underlying CSS framework. Developers had to manually craft the HTML structure, meticulously apply the correct CSS classes, and constantly cross-reference design mockups with copy documents from the content team. It was time-consuming and prone to inconsistencies.

Thanks to the concerted efforts across Design, Content, and Engineering over the past year, we’ve fundamentally changed this. By identifying the discrete content elements for each section, we’ve built templates that directly feed content into pre-approved, beautifully designed layouts. Templates are published as Jinja macros, enabling developers to consume the pattern through a clean API. This innovation abstracts away the complexities of manual alignment, making the interface for page creation primarily content-driven.

The Impact: Speed, Accuracy, and a Glimpse into the Future

The efficiency gains are remarkable. We’ve even created a short demonstration showcasing the new speed of assembly. With clean, schema-aligned content, development transforms into a simple process of assembly.

The results speak for themselves:

• No more tedious design adjustments.
• No more frustrating formatting fixes.
• No more multiple rounds of design review. What we get is accurate, on-brand output, delivered incredibly fast.

To put it in numbers: leveraging this schema-based approach for templated, higher-order components elevates the initial quality of our work, significantly reduces the review workload, and condenses development time for a typical web page from approximately 6 hours to around 20 minutes.

This workflow simplification doesn’t just save time now; it presents a clear opportunity for even easier automation in the future.

What’s Next? Scaling Our Success

We’re proud of what we’ve achieved, but we’re not done yet. While our current library of eight patterns is a strong foundation, it doesn’t yet support the full spectrum of content our diverse teams produce. Our ambitious goal for the next couple of cycles is to triple this number.

Each new pattern we build further liberates both our design and web engineering talent from routine, business-as-usual (BAU) tasks. This allows the entire process to accelerate, building momentum as we expand the system.

The journey to a more streamlined, efficient, and collaborative web creation process is well underway. By embracing structured content from the very beginning, we’re not just building pages faster; we’re building a smarter way to work.