Simple Design System

UX | UI | Templates | Developer Handoffs

A Simple Design System

For Christopher & Banks

Overview

Christopher & Banks had a problem. Every asset that went out the door was unique. Everything was designed to be one-of-a-kind with no ruleset. Nothing was designed to be correlated or associated with other assets. Of course, this is an issue for any company trying to maintain a unified brand. But when you add in the fact that this eCommerce brand is making lightning-fast decisions and assets were live for just one day, you have a disastrous recipe for designer and developer burnout and customer confusion.

This was costing them money, time, and talent. Here’s how I helped solve their problems.

Problem

None of the designers on the team had experience creating designs for websites. They would present designs to developers that did not work in a digital space. Something that might work as a print piece or non-HTML email doesn’t necessarily work on a website. But not knowing any better, the team would struggle through production every single day trying to wrestle their designs into submission.

Solution

One of the first tasks I tackled after arriving at Christopher & Banks was developing templates, cheat sheets, and organized guidelines that would allow designers to create assets that consistently work for the web. This involved meeting with the developers to understand the site’s structure and limitations, and providing one-on-one training for the designers.

Problem

The creative team was not large enough to keep up with business demands. Christopher & Banks business partners and decision-makers move at a breakneck pace to keep up with their ever-changing eCommerce market. However, that meant there was never enough time to truly review and ideate designs. Hasty designs always made it out the door. This resulted in low-quality content that did not best represent the brand. The partners were dissatisfied with the work but didn’t understand the cause, which caused the creative team to be micromanaged and further delayed work.

Solution

The business partners didn’t understand the design and development process. So I taught them! I got them involved earlier in the process to get them thinking about structure rather than just single assets. An email is just a set of cards. A homepage is a set of slots. I can deliver templates for these and turn them into something beautiful that is always accessible.

This solution allowed business partners to feel more involved in the creative process, in turn allowing them to guide the right parts of the design process. They can focus on which products are shown or how best to deliver a message rather than debating logo sizes or color choices.

Problem

Since most of the design and development effort was focused on the daily churn-and-burn asset workflow. The marketing materials were the only content getting designer attention. This mean that the brand kept evolving as the website architecture fell behind. It looked as if the framework of the site and content on it came from two different brands.

Solution

I needed to set the brand up for the future. While you cannot reinvent a brand in a day, the choices I made while teaching the designers allowed me to test and ideate the components I wanted to bring to the larger design system. Once I had my best practices in place I simply applied my design system onto bigger projects. This worked two fold, as suddenly the daily assets “clicked” with the larger website again, and the aesthetic the business team already approved was now being extrapolated out onto the site.

Full Visual Redesign Prototype

Here is a link to an InVision prototype featuring all major areas of the site. You can toggle back and forth between the current versions and my redesigns using the tabs at the top. Below you will see an image of the PDP page from this prototype. I presented this to senior leadership and was prepping it for the 2021 Development roadmap.

Open InVision Prototype >

Landing Page Using Templates

Third Party Vendor Implementation Using Design System