KEEN

All deliverables and artwork created at Tomorrow UX: Hagar Vander Design: Gerald Hastings & Fahad Asvat

Overview

KEEN is an American footwear and accessories company based in Portland, Oregon. They specialize in performance shoes for outdoor activities (hiking, water, etc.) as well as for work (construction, warehouse, etc.) They came to us for a full redesign and re-platforming. I was the lead and sole UX designer on the project.

Discovery

I took over as UX lead towards the end of the Discovery phase (which sometimes happens in agencies). To catch up I watched all recordings of UX Discovery sessions. I also looked into requirements documentation and marketing materials provided by KEEN to be well-informed before moving into the Design phase.

Design

I was tasked with keeping the needs of various personas in mind as well as KEEN’s business goals. It was important for us to better communicate KEEN’s brand attributes (ethical, trustworthy, community-focused). It was equally as important to build a frictionless experience that helps users find the right shoes for the job.

Navigation

A few highlights:

  • The original KEEN navigation mixed Featured links like New Arrivals with product categories like Socks or Accessories under a single column. Not having a clear organizational pattern makes it more difficult for users to scan the navigation and locate the right category. In my proposed IA approach I created clear separation so users can see the first item in a list of links and make more accurate assumptions about the rest.

  • The original navigation got overlay specific. Encouraging users to pick “toe type” as an example means they are unable to compare between different toe types when proceeding to the PLP. I opted for broader categories for the global header and more sophisticated filtering on the PLP.

  • The original navigation had global tabs separating Outside shoes from Work shoes. This distinction may not be very clear to users but it also forces Work users to actively change the global tab to see relevant products. My proposed approach was inclusive to both users.

  • The branded section (also a tab) was named KEEN Effect, which may be a bit too branded for users to understand the type of content that lives there. I recommended clearer naming conventions in my proposed approach.

  • We created a brand/shopping benefits section as part of our footer to ensure important brand information is present on every page of the site.

Product Listing Page

A few highlights:

  1. We designed various PLP hero options that would serve different use cases. For more specific categories, a hero image that is short enough to not take up too much vertical space and push products down. For broad categories, a visual filter to help users quickly narrow the assortment.

  2. We created collapsable filters so users can see more product on desktop if they prefer.

  3. We incorporated top features into the product cards to give users additional information an image alone can’t provide.

  4. We adjusted filter order/prominence based on user needs.

Product Detail Page

A few highlights:

  1. I aimed to successfully serve the user looking for very specific product information without having to dig for it (weight, materials, reviews, returns info, etc.)

  2. I also wanted to serve the user looking for a richer product story they would typically get in-store (dynamic photography/video and story-telling sections).

  3. I wanted the user to find the product that is best for them so clearly communicate product differentiators and fit.

  4. If the user reaches the bottom of the page and is not “sold” It’s then important to display alternatives via a “you may also like” product carousel and/or a comparison module.

  5. We created several flexible sections not meant to be used at once necessarily, but to cover any use case presented by the client knowing different products come with different content needs.

  6. I recommended including global brand content below any product specific story-telling to ensure information more relevant for the user is prioritized.

Blog

KEEN wanted us to design and build a very custom blog on top of native Shopify functionality. To work through the blog’s structure and ensure we are all aligned before creating more involved wires I put together some high level visuals.