Kohl's Department 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.

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.

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.

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.