Sharon Huntley Land
Enthusiastic student of Design, Art and Life.
Kohls Project Page.png

Kohls Yes2You Rewards

Is Kohl’s Yes2You Rewards site an effective tool for advertising and bringing in new customers?

Is it functional and does it stay on brand?


Screen Shot 2018-03-13 at 12.53.45 PM.png
Screen Shot 2018-03-16 at 11.12.37 AM.png
  • research / wireframes / prototype

  • illustrator / photoshop / axure

  • duration: 2 months


Approach

In order to evaluate Kohl’s Yes2You Rewards website, metrics must be chosen to measure the effectiveness of their advertising, and the functionality of the site. In this case study, I chose to focus on 2 items:

  • Invitations - does Kohl’s parent website adequately advertise it’s member rewards program?

  • Layout & Design - is the member rewards site laid out well, and is it easy to navigate?


Research

system

For a solution to properly work, it must fit within the current framework and navigation of the site. Also, the design must be seamless. I chose Illustrator to manipulate screenshots for a visual demonstration of the fixes/additions. I also created wireframes and a prototype of working solutions to allow the user to take a walk through the fix, and try it themselves.


pain point

invitations

Kohl’s retail is geared towards the average middle class consumer.  Target is a competing company in this retail space, and will be used for comparison.  Both have their navigation on the left via a drop-down, a banner area at the top, and sign-in areas. There is an invitation in the header for Kohl’s cash, but not the Yes2You member rewards program.  Target has a clear invitation to their member rewards program, REDcard, very close to the invitation to sign-in:

Kohl's header invitation

Kohl's header invitation

Target header invitation

Target header invitation

Looking through the rest of both sites, it is very hard to find information or links to the Yes2You program, whereas Target displays a banner promoting its REDcard in the shopping area of the site:

Target’s banner invitation to their member’s rewards program

Target’s banner invitation to their member’s rewards program

The only place that one can find to access the YesToYou member rewards program is on the footer of the home page with all of the other navigation. Furthermore, the only way I found information on the program itself was to type it into the search bar on the homepage:

Kohl’s invitation in page footer

Kohl’s invitation in page footer

I had to do a search to bring up an invitation to the Yes2You Rewards Program

I had to do a search to bring up an invitation to the Yes2You Rewards Program

Additionally, 4 subjects were also asked to find information and access the Yes2You member rewards area.  Three out of four stated they had to “roam around the website” to find information, and only one found it easy and had no issues.

 

solution

Simply put, addressing this lack of invitations can be easily done by adding them.  First and foremost, adding a visible invitation on the homepage, and within the retail portion of the site as well.

Why?

Gutenberg Rule

Gutenberg Rule

The Gutenberg Rule shows us that web user’s eyes track and read the web in a left to right, top to bottom pattern.

Therefore, to get the highest visibility to the Yes2You member rewards program, the invitation should be put in the upper left quadrant.  Since this quadrant is already crowded, top right is a good spot.  Even if it is on the smaller side, it will alert customers visually.

Header without invitation

Header without invitation

Header with invitation - a quick placement of Yes2You invitation would make a big difference.

Header with invitation - a quick placement of Yes2You invitation would make a big difference.

Adding in a simple banner ad for Yes2You is also quite easy, as shown below.  It does not detract from the look and feel of Kohl’s site, and is a good call to action for customers before they start shopping.

Here is an example of a current Kohl’s page that is within their shopping area. They have a banner ad promoting their workout gear.

Here is an example of a current Kohl’s page that is within their shopping area. They have a banner ad promoting their workout gear.

This is the same page, but with the banner ad removed ad replaced with an ad for the Yes2You rewards program. Simple fix, invites customers to explore before shopping, and dangles to carrot of a $5 reward at the same time.

This is the same page, but with the banner ad removed ad replaced with an ad for the Yes2You rewards program. Simple fix, invites customers to explore before shopping, and dangles to carrot of a $5 reward at the same time.


pain point

Layout & Design

In order to evaluate the effectiveness of Kohl’s Yes2You member rewards site, the site’s navigation, information, and brand continuity must be looked at.  Starting from the sign-in area on the homepage, the rewards member can select Offers, Yes2You, or Kohl’s cash. The member is then prompted to sign-in.  Once the member is signed in, the member is in brought to their personalized member site with their “Wallet” full of reward information listed.

The Kohl’s Wallet is a good metaphor and usage.  Customers used to carry coupons around in their wallets or purses, and most still carry around their member cards for stores or services in their wallets. 

It is also a handy organizational idea for Kohl’s, and is well laid out.  Navigation is on the left as expected, and when a section is clicked on, it stays highlighted in green, which tells the user where they are:

Kohl’s Yes2You Rewards sign-in

Kohl’s Yes2You Rewards sign-in

Kohl’s Yes2You Rewards Wallet and navigation

Kohl’s Yes2You Rewards Wallet and navigation

Rewards program members can check their Kohl’s cash, Yes2You rewards, special offers, and gift cards all in one place.  The only area in this section that I found problematic was when clicking on “New to the Wallet.”  Once clicked, the customer is taken to a different view, and the only ways to navigate back are by the back button on the browser window, and by clicking on your account area again, and selecting an option listed under Wallet.

One of these things is not like the other. The window in the bottom left that says “Wallet” is the screen the customer is brought to upon clicking “New to the Wallet” in the member rewards navigation. This is inconsistent with the rest of the screens.

One of these things is not like the other. The window in the bottom left that says “Wallet” is the screen the customer is brought to upon clicking “New to the Wallet” in the member rewards navigation. This is inconsistent with the rest of the screens.

The other section of the rewards members area of the website I found to not be consistent was when clicking on “view Yes2You account.” Members are then brought to a page with a completely different design. It is not consistent with the rest of the member rewards site.  Kohl’s would do itself a favor to redirect to the Yes2You page that was presented via the left side navigation.

There are also a couple areas missing from the main member rewards navigational menu that are present in this other version.

Kohl’s Yes2You Account page

Kohl’s Yes2You Account page

Navigational menu that Yes2You Rewards Members are accustomed to

Navigational menu that Yes2You Rewards Members are accustomed to

These two things are problematic, however, in terms of keeping consistent with Kohl’s brand, I think the Yes2You and Wallet sections are pretty good.  The colors, patterning, and font are all consistent, and by leaving the main Kohl’s banner area static on the member rewards program section of the site, the customer knows they are still on a Kohl’s website, and can navigate away to shop at any time.  

 

solution

Again, fixing these problems is actually quite easy.  Adding the “My Info” section to the left side navigational menu, and adding secondary navigation that pops up when Yes2You is selected:

Adding “My Info” to the bottom of the navigation

Adding “My Info” to the bottom of the navigation

Adding secondary navigation menu as a pop-up when “Yes2You Rewards” is selected

Adding secondary navigation menu as a pop-up when “Yes2You Rewards” is selected

Why?

 Consistency and ease of use are key in the world of web design.  If a customer gets frustrated or bothered by something on a website, they can easily leave. 

 In the article, The Importance of Visual Consistency in Web Design, Ava Garcia states, “…maintaining visual consistency can help users to easily communicate with your system.  A web design that’s more usable attracts more traffic towards is, and visual consistency is a great way to increase usability of you UI design.” Therefore, by having just the one navigational menu instead of two, and having it stay static on the page will attract more users, and make it a better experience for them on the whole.

 Having the navigation stay consistent on the left side of the page adheres to the Stay on Page principle of web design.  This principle is all about keeping the user in a state of flow by “creating the experience in context, within the current page.”[1]  Kohl’s accomplishes this by employing an In-Page Update to only the main body area of information.  The rest of the areas on the page (the banner area at the top and the navigation along the left side) stay the same.

In order to keep the customer within their flow, adding the “My Info” section to the navigation, and adding an Overlay box of additional navigational areas from the Yes2You section keeps the customer on the page and allows them to stay in the flow of their shopping experience.

[1]Designing Web Interfaces, Bill Scott & Theresa Neil - Page 126


Design Deliverables

wireframes

Attached are three wireframes completed to show solutions to the problems within the Kohl’s Yes2You Member Rewards program site.

Kohl’s wireframes

Kohl’s wireframes

prototype

I also completed a prototype showing changes and enhancements to three pages from the Yes2You Rewards program.

Kohl’s prototype

Kohl’s prototype


Conclusion

Kohl’s Yes2You members rewards site has some flaws, but is overall a good design, and is consistent with the Kohl’s brand. Simple additions of invitations to their members rewards program site would benefit them greatly in attracting customers to sign-up.  Also, simple changes to their member rewards site would add to the ease of use and consistency with the main site.  Overall, the brand presence within the member rewards site is maintained, and by having the member rewards site being embedded within the main Kohl’s site, members can sign-in, check their rewards, and go right to shopping.  


Lessons Learned

This was my first prototype produced with Axure, so I had to learn it from scratch. I also learned how important consistency is within a system and design. Every time I logged into the site - during research and documentation - I was struck with how much the lack of consistent organization and layout bothered me. In future projects I know that principle will stay in the forefront of my mind.