UNDERSTANDING

The company had just committed to using a brand new CMS platform (AEM), in which all sites had to move onto a unified system. It was a great opportunity to rethink these sites from a visual and UX perspective. But with three designers and four websites to manage, where do you start? Most importantly, how can we think about four, very different sites as an eco-system, streamlining the creative process while using our limited insights and user research?

On top of that, photography at the time was controlled by brand for print only. Digital realities required a high volume of constantly updating assets shot in a variety of sizes - so our designs had to accommodate assets not made for the web.

DEFINE, STRATEGIZE, PRIORITIZE

Since brand was heavily involved, they hired an agency to do the first round of high level page designs and style guide. It was a great start but ultimately was just a first step. As we began to test their ideas, we noticed they had planned for best case scenarios and our actual content didn’t fit into their designs. So, we prioritized where we could fill in the gaps.

• Unify framework

• Create a seamless experience on all screen sizes

• Optimize highest impact areas first (filters, product pages, checkout)

IDEATE

Now that we have goals, we can strategize tasks that support these goals.

• Audit pages, identify templated pages and shared functionality

• Define any edge cases or unique, site specific experiences (ie. Columbia had loyalty programs that other sites did not)

• Design for scalability (plan for localization, don’t design for the best case scenario, design for the worst)

• Design for mobile first, then scale up

• Define and breakdown patterns across these areas

EXPERIMENT

Prototype, design, iterate

Based on our audit, we identified these common templates:

• Homepage

• Category landing

• Product detail

• Search results

• Checkout

• Account

• Specialty (seasonal campaigns, loyalty)

Within these templates, we were able to identify sections or functional components and start testing actual content within them, again, starting with mobile. Laying out designs and working with engineering and merchandising teams to get feedback quickly. Each designer would work from a main wireframe and interpret that wireframe in their unique site styles.

Designing for mobile first allowed us to focus on what was important

• Since we were testing actual content in our designs, we were able to learn quickly what to prioritize and how to approach assets in designs which led to standardization of image production and content recommendations such as word count. Create rules and live by them

Optimize highest impact areas first (filters, product pages, checkout)

• Once patterns were established, implement styling, test and document values

BUILD IT

After all of our sites launched successfully, we hosted a big carnival party at the headquarters where we had learning stations set up about our business. “Hello, we are e-commerce!”

Very closely with engineering, brand, marketing, external agencies, operations managers, copy writers, ux researchers, technologists

The company culture was fantastic. I learned so much about the business while playing volleyball on our lunch breaks. The people and teams I worked with were also fiercely passionate and hardworking and we were all proud of our accomplishments and ultimately what we could provide for our customers.