Creating Block Builder to Drive Custom Content Experiences

Homebase aims to reduce the high level of effort and long time to market associated with bringing compelling experiences to customers. We created Block Builder to eliminate the need to build acute point solutions every time teams want to create and experiment with experiences by federating a set of core capabilities.

Challenge

How might we enable teams to work faster, enable consistency, and promote testing?

Outcome

A CMS that enables users to add, edit and plan content while improving team workflows

My Role

Led Homebase’s project scope, processes, design direction and delivery.

Key Takeaways

Improved general clickthrough rate by ~30%

The Problem

Currently, it is complex and time consuming to bring compelling content-driven experiences to customers. Simply differentiating messages based on audience requires a considerable amount of engineering effort. Because of this, teams are forced to make difficult choices. They must pick one of many good ideas to roll our or they must simplify experiences to ship them quickly. In both cases, we are leaving value on the table.

At Wayfair, our ecomm websites used a variety of CMS tools and hardcoded pages in order to put any type of content or experiences in production. This meant that it was hard for teams to reuse layouts/patterns that were already built and applications did not work well together. Additionally, if Homebase updated it assets package, it could take months (and sometimes years) for teams to adopt the latest and greatest from our design system.

Mission

Homebase Design System team aims to reduce the high level of effort and long time to market associated with bringing compelling content-driven experiences to customers

  • Enable creation of more highly differentiated experiences by reducing the level of effort

  • Reduce duplication through code reuse, enabling teams to focus on the hard problems

  • Drive visual consitency through component reuse

  • Enable product and business to focus on feature and content configuration rather than UI visualizations or rebuilding atomic components

  • Enable faster iteration of experiences

Strategy

Eliminate the need to build acute point solutions every time teams want to create and experiment with customer experiences by federating a set of core capabilities.

  • Simplify front-end work by creating clean data pipelines with clear swimlanes for upstream calculations and downstream delivery

  • Create and drive adoption of generic, thematic, reusable and carefully governed components

  • Utilize customer context and rapid experimentation to drive tailored customer experiences

  • Decrease overall code footprint

Determining Block Builder’s Domain

In today’s world, content is inextricably linked to to the presentation layer that a customer views it on.

We decided that Block Builder would be a configuration layer where non-engineering admin users can program content to power reusable content blocks. Users could decide what content and experiences should be displayed to customers and when from a library of reusable components. Representing a fundamental shift in the way we create customer experiences, Block Builder would serve as a pass through of curated and dynamic content to the front-end by integrating with external microservices.

Exemplary Narrative: Baking Pies

Talking with the Product Teams

We knew that introducing a single, unified CMS for the entire Wayfair organization would be a big task. We needed to gain alignment from all feature product teams and also get approval from leadership to enable. In order to communicate how this tool would work, we created this narrative to teach everyone about this new tool.

Baking Pies from Scratch

Baking pies from scratch and by memory yields ok results and is expensive and labor-intensive.

You need to make a pie for a dinner party. You remember baking one with your grandma when you were younger and you come up with the recipe by memory.

  • Build the recipe: determine ratios and ingredients

  • Make the filling: get the apples, prep, add sugar/spices

  • Make the crust: get the butter, measure flour, roll it out

  • Bake it: Decide the temperature, baking time.

  • Tastes ok and was labor intensive. Time to eat = 3 days

If you find out someone is allergic to apples, you might decide to make a strawberry pie. That means you will need to rethink every step above to fit strawberries instead.

Bottom Line: Both pies took a long time and were expensive to create. They tasted ok, but you aren’t sure it was worth the effort.

How does this translate to Wayfair?

Because of the way our systems work today, teams must operate in the “from scratch” zone every time we want to create and iterate on a customer experience.

Baking Pies with Modern Conveniences

Baking with modern conveniences yields better results and is less costly and labor-intensive

This time, you go to the grocery store and buy a two-pack of pre-made crust with a recipe on the back

  • All you need to do is make the filling: get the apples, prep them, add sugar/spices

  • Pour them into the premade crust and bake per instructions

  • Tastes great and was cheaper and easier. Time to eat = 1 afternoon.

If you find out someone is allergic to apples, you can still do a strawberry pie but with simpler steps. You can Google a strawberry pie recipe and use the same ingredients.

Bottom Line: When you take big buckets of work out of the effort, the pies taste great and were simpler to make.

How does this translate to Wayfair?

Block Builder aims to provide reproducible aspects by creating customer experiences that can be reused by multiple teams. Teams still need to do some “baking,” but they can now better things faster. Instead of putting time and effort into crafting every aspect an experience, teams can take advantage of a foundation of capabilities so that you can focus on what they know best: the customer’s needs.

Today’s Wayfair

  1. Business: Define target end-state requirements

  2. Business: Create content

  3. Engineering: Create custom components

  4. Engineering: Program business logic into front-end

  5. Add even tracking to components

  6. Create KTLO plans for new code created

Tomorrow’s Wayfair with Block Builder

  1. Business: Define target end-state requirements

  2. Business: Create content

  3. Engineering: Invest in reusable components

  4. Business: Select from a list of readymade, reusable components and select the content to see in the components

  5. Logic: Business programs logic or engineering partners with a decision engine to make real-time decisions

  6. Tracking is standardized

Overall, Block Builder helps us save on engineering effort and rework. It opens the door for more content creation and content-driven experiences.

How It Works

Block Builder would allow users to configure the content and user experiences on existing pages on web as well as create new pages. As more pages become powered by Block Builder, users would be able to “stitch” together a connected journey for a customer by creating and managing cross-page campaigns.

Breaking Pages into Simple, Reusable Components

This new way of placing content on a page means breaking pages up into reusable slots.  It is like a subdivision - the layout of a page is the subdivision plan. Slots are like lots; they can be filled with blocks that adhere to certain rules. Finally, blocks are like the houses. They’re customizable and personalized, but they fit onto the lot.

Layout

  • Grid of rows and columns

  • Visually represents real estate of a page

  • Contains slots where content is placed

TYPE #1

Blocks Rendered on a Page

Users can select presentational components and program content and experiences to appear on an website.

Personalized Block Content via Decision Engines

Product designers and user researches would identify different user types and create different slot experiences to make the ideal page layout for each user.

TYPE #3

Slot

  • Holding container where content components (Blocks) can be programmed

  • Contain a single Block or multiple Blocks

  • Slots have rules to tell Block Builder which blocks to insert

TYPE #2

Layout Management

By breaking entire pages into a set of configurable slots, we can enable differentiation of the entire experience through component and content nuance.

Block

  • Component responsible for rendering content

  • Admin users program blocks with the content they want the customer to see in that slot

  • Multiple blocks can be assigned to one slot (see block personalization)

Types of Experiences to Build & Manage

Block Builder would enable different types of admins to manage different types of content based on their goals.

Rollout & Adoption

The next step was for our team to understand how to roll this new tool out to the entire ecommerce organization. Our strategy is broken into four theme that mapped out to different initiatives on the team. Themes are broad problems that describe many capabilities. We planned to communicate our progress out in the context of these themes and highlighted big milestones that unlock a major piece of business value.

#1 Foundation

Nuts and bolts, including content delivery, Admin UI, support.

KPIs:

  • Increased self-service adoption

  • Decreased total number of support requests

#2 Reuse

Ability to reuse content across experiences.

KPIs:

  • Reduced time to stand up a new experience in a class, geo, or category

Closed participation. First pass at functionality, learning through concrete use cases

Focus: Stability

Working Model: High partner and my team’s involvement. Iterative.

#3 Decisioning

Ability to show content to a targeted subset of users.

KPIs:

  • Increased total number of personalized journeys

  • Reduced time to created personalized or targeted experiences

Selective participation. Ensuring functionality is extensible.

Focus: Scalability

Working Model: Partner and my team will work closely yet independently.

#4 Layout Configurations

Ability to configure the information hierarchy and order of components of an experience.

KPIs:

  • Increased total number information hierarchies supported by a single experience

Participation Model

Pilot Functionality

Managed Adoption

Widespread Adoption

Open participation. Functionality has been vetted and is performant.

Focus: Self-service adoption.

Working Model: Partner teams can self-serve. My team supports as needed.

Work in Progress

🚧

Work in Progress 🚧

This project is under construction. Please come back in a few days.