case studies

Columbia Sportswear

I started at Columbia during an exciting time where our team was tasked with redesigning and re-platforming the brand families four separate websites (Columbia, Mountain Hardwear, SOREL and Montrail) to be responsive under the same framework.

Columbia homepage being displayed on a variety of devices
 
UNDERSTAND

The challenge

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.

MY ROLE

This challenged call for highly collaborative efforts between myself, the other two designers, the platform engineers, an agency and our front end developers. I was responsible for handling the highest trafficked page templates on the most visible brand (Columbia) and our smallest, most unique brand (Montrail). I often bridged the gap between design, merchandising, retail, brand and UX creating new and lasting relationships.

 
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.

  1. Unify framework/functionality.

  2. Create a seamless experience on all screen sizes.

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


IDEATE

Generate ideas

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

  1. Unify framework/functionality.

    • 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).

  2. Create seamless experience on all screen sizes.

    • 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.

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

    • Define and breakdown patterns across these areas.

 
EXPERIMENT

Prototype, design, iterate

Finally, where the rubber meets the road, we can start designing and implementing our ideas to see what sticks.

  1. 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.

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

    1. 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.

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

    1. Once patterns were established, implement styling, test and document values.

 
BUILD & TEST

Solidify

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!”

I create this light one-pager as a handout that listed some quick learning nuggets about or business and success metrics.