Case Study:
Kolcraft Enterprises

• Review other multi-brand eCommerce sites (like Gap/Old Navy/Banana Republic/Athleta) for how they toggle between brands; organize their headers, footers & menus; organize category structure; require sign on; and other shared functions.
• Document existing Information Architecture and revise it to reflect consistent structure & menu options across brands. We used Writemaps, a cloud-based app that's perfect for sharing with and editing by clients/stakeholders.
• Review modern WordPress base themes and development environments for best option to build a parent base theme & three child themes.

The header & menu research let to a design of a ‘Unified Header’ structure that would be consistent across brands. Color palette, typography & imagery would help differentiate brands to customers while offering a consistent user flow for the customer.

The IA was simplified to focus on shopping/product discovery as primary menu items, and moved the company info and secondary menu items to footer. A top-level ‘menu bar’ is consistent across brands and allows customer to easily jump between brands as well as view their cart contents.

Sage was selected as the starter theme, because of its advanced frontend workflow. I selected Bulma as the CSS framework because it’s based on Flexbox and layout-centric classnames could be avoided in the theme’s HTML.

Next were wireframes and user flows. The team met with client via Google Hangouts twice weekly to share progress and plan the week’s priorities. The client actively worked with us, sharing content & feedback via Trello, Google Docs, Sketch cloud & email. Design and feedback were collaborative & iterative.

Once the wireframes were approved, work began on hi-fidelity mockups for key pages in each site: home, category, product and blog. All low & hi-fidelity wireframes and mockups were designed mobile-first. For some layouts and responsive treatments, mini-prototypes were built on Codepen. With Sketch cloud and Codepen links, both client and the FullStack team could readily visualize the direction of the designs. Sketch cloud was particularly useful for this distributed work, as it allowed everyone to contribute questions and comments on the designs, w/o requiring all users to have a Sketch license.

Once in development, the first task was to set up a solid baseline grid for layout and typography. The 8px grid from Sketch mockups was then used in frontend code. Having 8px = 1rem allowed for finer tuning spatial relations throughout the sites. Originally responsive font scales were set with 3 sizes and 2 breakpoints. However, Kolcraft preferred to not use the largest font scale for very large screens. Since the scales were all set up in SASS with variables, it was a simple matter to drop down to 2 sizes and change the breakpoint in code.

Plumber was used to build the baseline grids–note that each theme has a slightly different ratio, based on the fonts. See this spreadsheet for the grid values.

The beauty of this system is that everything–once the ratios are established–aligns cleanly to the baseline grid. This gives harmony & balance to each page on the theme. It’s a simple matter to set layout spacing to consistent measures such as 1rem or 3rem, knowing that the next line of text will align with the adjacent element.

Once the base theme template partials were built out in HTML & CSS, our engineer began working on hooking up Advanced Custom Fields to the backend. We set up a staging site where the client could begin adding their content to the first brand. During this stage, I built out each brand’s child theme and home pages. We were able to iterate on the base & child themes along the way as the client reviewed during development. Having a live staging site is always the best option for device & browser testing.

The project kicked off in late November, 2017. The first marketing site (Sealy Baby) went live in early June, 2018, Contours Baby and BigCommerce in August, to be followed by Kolcraft later in summer of 2018. All told, design tasks took a solid 6 months.