Build-A-Bear Workshop

In my first project as a Front-End Architect, I was responsible for participating in client discovery, planning the frontend approach, and leading a team of offshore (India-based) developers, while also handling some complex development tasks on my own.

Leadership of the offshore team included daily standups, ticket delegation, frontend code reviews, pull requests, and mentoring of lesser experienced developers.

One of the biggest complexities of the Build-A-Bear project was that all of their products resided in a single master catalog, and they would only be using a single SFCC site despite needing to represent 3 separate brands: Build-A-Bear, Bear Cave, and Heartbox. Each brand had its own unique look and feel, and the site needed to be able to switch between them seamlessly. To accomplish this, I architected a complex data model (see below) that included automatic theming based on category structure, content classification, and page contents. All theming also included the ability for manual overrides should a page require a specific theme.

The latest version of our SFCC "Accelerator" was utilized as a starting point for this site implementation, which meant it started with our core-site optimizations build in, but it also rolled out with an entire suite of custom Page Design components. For these, I worked with the Merkle Design team and the client to determine specific themed components to use on content throughout the site.

The clients old website also held a lot of legacy content that they wanted to port over in it's existing form to be used as-is until they were able to use Page Designer to create new updated versions of the content. To achieve this, we were able to import the old site's content assets, as well as some of the base styling to allow the content to render in it's existing form. This approach allowed easy replacement as replacement content is created and eased the burden on there internal dev team. Rather than having to meet launch as a deadline for all content on the new site, they could methodically make updates.

Finally, due to the heavy use of a custom Page Designer solution, I was responsible for leading several workshops with the clients merchandising team. These session were used to "teach the teacher, explaining what Page Designer is, how it works, and how their custom solution could be used to achieve their needs.

Notable Customizations

• Data & Content Brand Theme Model (3 brands: Build-A-Bear Workshop, Heartbox, & Bear Cave)
• Page Designer
  • Custom Components & Theming
  • Store Locator Store Landing pages
  • Utilized component that allows page designer content be included within content assets and slots
    • Turns Page Designer into a "component" developer rather than only allowing full page solutions.
• Bear Builder Wizard

Data Model Explanation

All themed site pages can be broken in 4 main page types: Content, Category, Products, Checkout. The logic that defines what theme shows on each page has a slightly different context.

1. Content (Content Assets, Page Designer Content Pages):
   1. Theme is set using attribute.
      1. contentBrand on Content Assets
      2. brand in Page Designer (Page Settings > Attributes)
2. Category (CLP, PLPs):
   1. Theme is set by detecting if active category is a child category of one of a brand category (i.e. Bear Cave, Heartbox)
      1. Page Designer CLP/PLPs will follow default logic, unless brand attribute is set to a specific brand override.
3. Products (PDPs):
   1. Product theme will first be determined by the brandTypes attribute.
      1. If there is only a single brand selected (i.e. bearcave) then that brand theme will be used on the PDP.
   2. If there are 2 brands defined, or no brand defined at all logic will look for a cgid value in the querystring
      1. if this (cgid) category id is a child category of one of a brand category (i.e. Bear Cave, Heartbox) then that brand theme will be used
   3. If no brandTypes value is defined, and no cgid is present brand theme will be default Build-A-Bear
   4. Page Designer PDPs will follow default logic, unless brand attribute is set to a specific brand override.
4. Checkout
   1. If cart contains all Heartbox products then checkout will show Heartbox theme
   2. Default, Bear Cave, & Mixed carts will use Build-A-Bear core theme