Foodstuffs had been managing separate websites for its brands: a content-focused brand site and, for some brands, a separate e-commerce site. The goal was to bring these experiences together into a single website per brand, simplifying website management for the business and creating a more seamless experience for customers.

The e-commerce sites for PAK'nSAVE and New World had already adopted the new design system, but their brand sites remained on the legacy stack to support content management.

My role was to audit the existing brand site patterns, rebuild them using the e-commerce design system, consolidate duplicate components, and document how each component could be edited and configured by content editors.

My approach

I started by meeting with the business analyst and content editor to understand their pain points and identify opportunities to improve the content editing experience. It was important to address their needs while keeping changes within the project scope and maintaining the development timeline.

I worked through the brands in order of complexity, starting with Four Square, which had no e-commerce site to consolidate. I then moved on to PAK'nSAVE, which shared many components with Four Square but required additional elements and consolidation. Finally, I tackled New World, which had more unique components of its own.

As I worked through each brand, I rebuilt existing patterns using the e-commerce design system, merged duplicate components where possible, and documented their configurable properties. After completing each brand, I reviewed the work with its content editor to confirm that the required functionality was covered and that the updated components met their needs.

Designing for real content needs

One of the most valuable parts of the process was identifying improvements that went beyond simply matching the existing designs.

Example: Improving the recipe video experience

During my discussions with the Four Square content editor, I learned they wanted to give social media videos a more prominent place on recipe pages. The existing layout required videos to sit within the recipe method, either at the top or bottom. At the bottom, videos were pushed down the page; at the top, vertical videos felt awkward in a horizontal layout.

To solve this, I introduced an optional additional column designed for vertical videos, allowing them to sit naturally alongside the recipe content. I also made this option available to PAK'nSAVE and New World, extending the solution across all three brands.

Creating a more cohesive experience

As part of the audit, I identified inconsistencies between the brand and e-commerce sites that would become more noticeable once they were combined. For example, the brand sites used a narrower content container than the e-commerce sites.

I updated the brand site container to match the e-commerce design system and refined components such as hero banners, carousels, and callout banners to create a more seamless experience across the page.

The outcome

My work enabled Foodstuffs to bring its brand and e-commerce experiences together into one website per brand, rather than maintaining separate sites for content and shopping.

This simplified website management for the business and gave customers a single destination for both brand content and e-commerce. By consolidating duplicate components, aligning layouts, and introducing more flexible patterns, I helped create a consistent experience across Four Square, PAK'nSAVE, and New World while preserving the functionality content editors needed.

The result was a more unified digital experience, supported by a shared design system that balanced consistency with the unique needs of each brand.