research / wireframes / prototype
illustrator / photoshop / axure
duration: 2 months
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?
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.
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:
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:
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:
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.
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.
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.
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.
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:
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.
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.
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.
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:
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.” 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.
Designing Web Interfaces, Bill Scott & Theresa Neil - Page 126
Attached are three wireframes completed to show solutions to the problems within the Kohl’s Yes2You Member Rewards program site.
I also completed a prototype showing changes and enhancements to three pages from the Yes2You Rewards program.
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.
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.