We had an unsustainable process

Fastly relies on multiple organizations to own and contribute content for various areas of the marketing website. It quickly became unsustainable for the Web teams (Web Design, Web Engineering, and Web Production) to custom create a new page for each new content request.

We democratized the old waterfall web production process by creating a modular, reusable system that is built on top of our Content Management System (CMS), Contentful. Here are some of our visible results:

1. Faster time to produce a new web page—from a typical 10 days to 3 (80% increase in publishing speed)
2. Streamlined visual impact, accessibility and flexibility for content owners
3. The amount of teams that needed to be involved in the production of every web page was reduced from 5 to 3 (40% decrease in cross-functional bottlenecks)

Identifying bottlenecks in the flow

Each involved team had their own lead times that added onto one another, pushing the expected launch date between 13 to 30 business days after the request was received. In order to “expedite” a request, content owners kept labeling their requests as “urgent”—putting constant stress on the teams responsible for producing a new web page.

We hypothesized that the work for Web Design and Web Engineering could be automated—usability and page performance does not need to be revisited for the same patterns every time.

The key players have repeatable goals

A standard web page is created to inform, and aid prospective customers in the discovery (a.k.a Top of Funnel) process. The success criteria for a standard web page can be understood as a compilation of goals from the key players in this process:

1. Content Owners: To publish time-sensitive content due to competitive response, or a product initiative.‍
2. Web Design: To organize opportunities for an accessible, and dynamic web experience while conforming to brand guidelines.‍
3. Brand Design: To create supporting visuals that enhance content and evolve the brand. ‍
4. Web Engineering: To develop highly performant pages with clean code.‍
5. Web Production: To ensure that the new content is appropriately populated, and translated, within our CMS.

Reusable patterns save time

We defined, and tested, groups of standard patterns that can be reused in a “plug-and-play” manner.

Responsive behavior ensures readability

Responsive behavior between Desktop, Tablet, and Mobile was coordinated with Web Engineering in Figma so that it only needed to be defined once per pattern.

Patterns accelerate design operations

Patterns were defined using a "slot method"—this provides a stable sandbox for designers and content owners to explore within.

Quality control out-of-the-box

The available reusable patterns had accessible, on-brand web themes defined from the start. Each theme was defined to preserve the intended information hierarchy. (e.g., critical blocks of information having the highest visual contrast) 

A centralized source-of-truth

A master content template is stored as a Google Doc template for the whole company to access. Content owners can independently copy this content template to coordinate new pages on their own.

Continuously iterating with my users

I occasionally field for feedback on this new framework from my stakeholders via Slack or on our monthly team calls. So far, there's been demand to add more conversion-elements (e.g., forms) to the next phase of this framework.

‍