With four brands, eight active Shopify sites and an established wholesale operation, my team and I were able to create a solution to migrate all 8 sites into one cohesive site.

Client

The Cozy Shop
A clothing company that makes the coziest PJs and loungewear in Canada.
Visit Site

Tasks

UI, UX, Website Design
Information Architecture
Brand & Identity

Role

Solo UI/UX Designer

Platform

Shopify Website

Tools

Figma, InVision

Duration

5 months

Type

Agency

Image of all brands associated with Cozy

About the Project

When the client first came to us, they had individual sites for each of their PJ brands. For kids, women, men, and families each with their own unique branding and styling. They also had licensed PJs exclusively made by them such as Disney or Universal Studios. They have an established wholesale operation and are available in large department stores such as Walmart and Amazon.

The problem was how could we create a solution for them that combines all these uniquely branded entities into one coherent site. The only way users could access these sites were from the department stores.

01

Creating the Navigation

With many brands & licences to account for. We stripped back the experience to the main goal "how can user's buy PJs quickly and effectively?". Our team prioritized what the user would like to search first by task. We researched other competitors and saw similar patterns in the shopping experience.

Mockup of wireframe

I established a new navigation experience for the user to seamlessly search for Pjs based on type.

Prioritizing Search

When the user comes to the site, they have a basic idea of what they are looking for (ex needing new PJs for a little girl). In our primary nav we prioritized shopping by gender for those who know what path they want to go.

Within the primary tab we categorized type one step further (feature, collection, and brand). This user flow ensures the user can get to their desired purchase quickly and effectively without getting lost.

top half of background
02

Showcasing Brands

The client wanted the opportunity to have an additional promotional section to showcase the brand & licences on the product listing pages, homepage and homepage. Doing this would be able to add more of the licences branding and give more personality to the pages. For user's who know exactly what brand they want to go too, these additional marketing sections gives users' the trust they need to continue their purchase.

mockup of branded product listing page

Giving the client more real-estate for marketing gave them more opportunity to showcase the licences for the user.

mockups of homepagemockup of all brands
image of bottom of background
03

Scaleable Components

In our design process, we made sure to create scaleable components. We considered components that could be used site wide to ensure consistency. Some requirements the client requested in the components were, multi-language, size guide, best seller grid section and 50/50 sections.

mockup of size guidemockup of mobile size guide

Size Guide

The client had many PDFs of each size guide based on brand. They came to us asking for a solution that could be applied to their new website. After the navigation work, I was able to break down each size guide based on age. We created two components for the size guide.

One when the user is on the product page, this component will be in the form of a modal and only show the specific size guide for the project. If the user would like to search for all size guides the other component is in the footer. This component has been adapted with mobile-first to ensure the user can read it effectively.

Creating scaleable components helped ensure the client could grow and the website would not break

image of top of background
04

Impact

This project was very successful. We were able to create a seamless solution to integrate eight Shopify sites into one cohesive site by creating an effortless navigational experience and easy to use backend administration. We were able to create a scaleable solution to account for multiple languages (French and english). Lastly we incorporated additional marketing sections site-wide to give the licences and brands an opportunity to add more personality into the site.

When we found the components that were created were a hit, we were able to create feature components such as the mega-navigation, size guide, and filtration system that could be applied to our agency theme to sell to future clients. These components were a big win that they have been a major selling point when we work with new clients.

We were able to create a new design process after completing this project and incorporating it as a standard in our agency at Pixel Union. I now onboard new employees at our company about the design process and educate them from the beginning of discovery all the way to the design quality assurance.

image of bottom of background

View More Case Studies

Spaah case study

Enchant Christmas

Create a funnel for millions of customers to buy and manage their tickets this holiday season.

View More

Mines digital services case study

Mines Digital Services

Data driven development where we change the existing system to a new and improved system.

View More

Playbook hub case study

Playbook Hub

Provides global reach, exposure and growth opportunities for talent through a single platform.

View More