COLUMBIA SPORTSWEAR

E-commerce

As senior designer, I was hired to aid in a global site redesign on a responsive platform (AEM), optimize mobile capabilities, build out user experience, content integration and creative support of brand initiatives that contribute to the consumer journey, while progress is monitored via metrics and user testing.

Goals

  • Bring structure to the design process

  • Unify responsive design efforts and templates to fit into new AEM framework

  • Rethink all sites from a visual and UX perspective

  • Educate the company on digital needs vs. print or in-store

  • Constantly test and check

  • Lead design campaigns and new thinking

  • Be the advocate and go-to resource for all things digital design

My role

  • Iron out efficient workflow processes

  • Think about our designs like an ecosystem, working closely with engineering

  • Leverage customer feedback and insights to tackle the highest trafficked areas first

  • Build relationships across teams to help educate them on our unique business and work cross functionally

  • Stay up to date the current and future landscape of design

  • Be very opening minded and flexible!

DESIGN WITH INTENT

“We’re on a mission to offer consumers the best shopping experience on any device, any time, any place.”

– VP Columbia Ecommerce

  • Responsive design templates

  • Used customer feedback to make informed decisions

  • Extend brand initiatives to into the digital realm like email marketing campaigns, homepages and category landing pages

  • Create clear visual separation between brands yet still have a holistic approach to solid UX throughout all site redesigns

RESULTS

  • Four, redesigned, responsive sites in one year

  • 5 to 100 million visitors (since 2009)

  • 40% growth rate after site launches

  • Overall affected 58 sites in 26 countries

  • Team of 3 designers and one design manager

  • Huge increase in affiliate and email marketing revenue, as well as loyalty programs

STATISTICS

OWN IT

Where process meets culture

I view good design work as a combination of diverse brains, hands-on approaches to solving problems and cross functional communication. Sometimes, you have to invite yourself to meetings, or take over an entire white board wall.

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