Kohl's Department Page

IdeationResearchIterationSummary

Project Overview

overview of the current project

In my role at Kohl's, I was in charge of the Homepage and Coupon page of http://www.kohls.com. As expected, the homepage and coupon pages are constantly changing on a daily, if not weekly, basis. We call these sale events, and they can range from subtle differences such as a removal or addition of content to an entirely different sale event layout. The general structure of the page stayed the same, however the content and images that relates to deals and coupons, along with link changes, are dynamic. Here is a sample from September 23rd to September 25th

view site

Technology Used:

  • HTML
  • CSS
  • JavaScript (ES 5)

Ideation

This is the old at Kohls page

Background

The layout of content was done through Kohl's proprietary grid system, as much of the homepage at the time of writing this. It was similar to Bootstraps. However, each item is layered over an image and has the links, text absolute positioned. For rows of links, we were free to use flexbox. Some of the limitations were accounting for Internet Explorer 11. So modern approach and techniques in CSS such as CSS Grid were unavailable to us.

Objective 1: Make the page ADA compliant

Being a part of a huge company and on the marketing side, it was crucial to abide by a11y and to make anything we are coding on the homepage accessible. Because this is a major retailer visited by thousands of users on a daily, if not weekly basis, we could not afford any accessibility violations.

Objective 2: Responsive design on all channels and timer set

At Kohl's we used a CMS to time pages. Each page is loaded into a slot. Within this slot we could decide when pages can go live and overlap. The web, mobile, tablet and app were also split due to the way the infrastructure was at the time. So extensive testing is needed.

Preliminary drawing idea of homepageHow the staff page may possibly lookAn alternative view of the staff page

Research

There was little research needed for this specific project. But regardless, these were what we had to keep in mind when creating content pages on the homepage and coupons:

  1. Users need to be drawn to specific catalog and click.
  2. Organize information structure / content. Relevant ads, which spotlights should be made.

Iteration

This was the general markup of our homepage, very specific CSS IDs and classes. Most of the content I would write needed to be encapsulated within div class="grid-content" anddiv class="grid-box d8x8" Most of the images came from the design team, since the homepage is set up like a newspaper / ad. It was important for our images and assets to be laid out perfectly on all devices before we add in any texts or links atop of the images. My team worked directly down the center of the page.

Preliminary drawing idea of coupons
The coupons page was a bit more uniform and standard. Since it always looks like the above image. Coupon offers rarely changed in format and there were only a set number of ways to configure. Similar to homepage, we follow a simple-pattern whilst changing the content.

Summary

Due to how short and sporadic events were, this design and code is not live anymore. Kohl's also rebranded their site so the homepage does not look like this neither. However, at the time, it was what I dealt with at Kohl's along with QA checks. The main take away was abiding by a11y and making sure our site was accessible as possible not just in colors and contrast, but also on-screen readers. Semantic HTML, alt tags, aria-breaks were heavily used when designing pages like these for Kohl's, especially in the marketing department. There is no repo for this but a link to the current Kohl's site is provided below.

view siteReturn to Top