Carter’s
product design.
In February 2023, the site merchandising team, development team, UX team and creative design team were tasked with coming up with a plan to deliver the following:
Movement of all CRI sites from AEM into Contentful content management system (CMS)
Create more structured templates for the new CMS
Streamline workflow of teams
I was the product design lead in charge of creating and leading creative development of the new homepage components. This involved design and integration sessions across teams to gather business requirements, defining component functionality, alignment on future state functionality, and of course design creative + UX for the whole experience.
Issues with Current Homepage
Lack of consistency - Each homepage is thought of as a “new design for a new campaign, and pricepoints change position, size, and colors.
Lack of consistent branding - as you scroll down the homepage, it may not be apparent you are still on the Carter’s page as there is a lack of brand elements being used down the page.
Lack of structure - Nothing is ever static, in the same place, so consumers don’t want to try to figure out what the deals are.
Lack of shopability - There’s no shoppable product on the homepage besides at the very bottom, and even then, you have to click into a separate PDP to view and add to basket.
Lack of responsive design - The entire homepage currently is composed of separate assets for desktop and mobile because it was not designed to scale or stack for responsive web.
Many designs were concepted, but we narrowed down to a few. The plan is to add or update components on a quarterly basis based on feedback from teams using them and performance analytics. Each component will be customized per brand to meet brand requirements.
Components/Building Blocks ⤴
The New Homepage
The main purpose of the hero marquee is to represent the essence of the brand identity. It is typically the first thing that users will see when they visit the homepage. It is usually used to promote the main message or call to action of the website. The key metrics which we need to elevate are the click thru rate, conversion and driving more engagement.
Examples of variations available within each component:
IN DEPTH EXAMPLE
Hero Marquee & Hero Support
CONTENT MODEL EXAMPLE
Hero Marquee & Hero Support
Other redesigned pages and elements
Icons
A redesigned icon library of over 160 icons to match our sleek new look.
Phase 1 Blog Pages
Phase 2 is being designed currently, our blog lacks a lot of functionality, but with tight timelines, we focused on getting the blog to match with the rest of the design system.
Consumer Segment Landing Pages
The main goal of these pages was to redesign them so that there would be less creative lift. We accomplish that by connecting these images to style IDs the merchandisers have the option to choose from, and it pulls in the images from the product description page.