Mobile

Mobile

First

Mobile


First

First

Year: 2025

Project Overview

Project Overview
Project Overview

Kohl’s Product Guides were outdated and inconsistent with our evolving brand and digital design system.

Over time, multiple site-wide design and structural changes left the product guides looking disjointed and underutilized. There was also no clear UX hierarchy, and mobile usability suffered.

Role
Role
Software
Software

Problems

Problems
Problems

Our research team identified 3 primary problems with the old Product Guides.

  1. Mobile Last

Our research team identified 3 primary problems with the old Product Guides.

  1. Off-brand

Our research team identified 3 primary problems with the old Product Guides.

  1. Too Long

Our research team identified 3 primary problems with the old Product Guides.

Research & Discovery

Research & Discovery
Research & Discovery

I began by auditing existing product guide layouts across key categories and analyzing:

•    Traffic + engagement data (with analytics/PM)

•    Bounce rates and scroll depth

•    Competitive benchmarking (e.g., Target, Amazon, Nordstrom, Walmart)

Opportunity

Opportunity

How might we make Product Guides Mobile First, Modern and Relevant?

How might we make Product Guides Mobile First, Modern and Relevant?

How might we make Product Guides Mobile First, Modern and Relevant?

Goal

Goal
Goal

Create a mobile-first experience for the 80% of users who view Kohls.com on mobile, while reestablishing brand standards through the Kohl's Design System.

  1. Mobile Last → First

The current product guide styleguide was not approached in a mobile first manor and lacks important aspects that engage the customer for a better buying experience.

  1. Off-brand → On Brand

Utilizing our existing brand guidelines and industry trends to influence the creation of the mobile-first user experience.

  1. Lengthy → Concise

Reducing the size of the current guides to nearly half of the required vertical space minimizes human interaction and enhances the optimization of modules for user-friendly operation.

Kohl's Design System (KDS)

Kohl's Design System (KDS)
Kohl's Design System (KDS)

The backbone of the new Product Guide redesign was based on the Kohl's Design System. KDS was ported over for the website; built specifically to ensure high performance.

Design Iterations

Design Iterations
Design Iterations

The new Product Guide components went through many iterations before we had a shippable design candidate.

Final Designs

Final Designs
Final Designs

The following designs shipped publicly to everyone across the world.

New & Improved

New & Improved
New & Improved

I began by auditing existing product guide layouts across key categories and analyzing:

•    Traffic + engagement data (with analytics/PM)

•    Bounce rates and scroll depth

•    Competitive benchmarking (e.g., Target, Amazon, Nordstrom, Walmart)

New Layout

50% Shorter

50% Shorter

Old Layout

Developer Reviews

Developer Reviews
Developer Reviews
Michael K.
Michael K.
Michael K.

"Thanks for all your work on this project. The asset organization is amazing, which is deeply appreciated on such a large project! The overall design looks awesome too, time to start building."

Nelson H.
Nelson H.
Nelson H.

“Thanks again for all your help on this seriously! Big projects like this are easier when the designer and dev are on the same page and have an open line of communication.”

Mike W.
Mike W.
Mike W.

“I appreciate all your hard work in putting this beast together.”

Website curated with coffee in hand. ☕

All Rights Reserved© — Blake Brewer | 2024