UX DESIGN
Kohl's Yes2You Rewards
approach
In order to evaluate Kohl's Yes2You Rewards website, metrics must be chose to measure the effectiveness of their advertising, and the functionality of the site. In this 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. In this comparison, only their member rewards programs will be evaluated. Specifically, their calls to action, and invitations to find out more about their programs. This case study is geared specifically to Kohl's and Target's websites as well. No other advertising will be assessed.
Both Kohl's and Target 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 members rewards program, REDCard, very close to the invitation to sign in:
Kohl's's header invitation
Target's header invitation
Looking through the rest of both sites, it is hard to find information or links to the Kohl's Yes2You program, whereas Target displays a banner promoting it's REDcard in the shopping area of the site:
Target's banner invitation
The only place that one can find access to the Yes2You member rewards program is on the footer of the homepage 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 footer invitation
Search results of "yes2you"
Additionally, 4 subjects were also asked to find information and access the Yes2You member rewards area. Three out of four stated that the had to "roam around the website" to find information, and only one found it easy and had no issues.
Pain Point > Layout & Design
To evaluate layout and design, the Kohl's Yes2You rewards program site's navigation, information and brand continuity were evaluated. Starting from the sign-in link on the homepage, the member can select Offers, Yes2You, or Kohl's cash. The member is them prompted to sign-in. They are then brought to their personalized member site with their "Wallet."
The Kohl's Wallet is a good metaphor and usage. Customers are familiar with carrying coupons in they wallets or purses, and most still carry around their member cards to stores and services in their wallets.It is also a great organizational idea for Kohl's and is well laid out. Navigation is on the left as expected and when a section is clicked, is stays highlighted in green and serves as a way finger for the user:
Sign-in
Kohl's Yes2You Wallet and navigation
Rewards program members can check their Kohl's cash, Yes2You rewards, special offers, and gift cards all in one place.
The "New to the Wallet" section is problematic. Once clicked, the customer is taken to a different view, and can only navigate back through the back button on the browser window, or by clicking on their account, and selecting an option listed under Wallet.
"New to the Wallet" screen does not match
When users click on "view Yes2You account," members are brought to a page with a differently styled navigation section, and header. There are also a couple areas missing from the main rewards navigational menu that are present in this alternate version:
Kohl's Yes2You Account page
Default navigational menu
<< 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.
<< solution >>
Again, fixing these problems is actually quite easy. Adding the "My Info" section to the left side navgational menu, and adding secondary navigation that pops up when Yes2You is selected.
why? >
The Gutenbery Rule shows us that web user's eyes track and read the web left to right, and top to bottom.
Therefore to get the highest visibility to the Yes2You member rewards program. the invitation should be put in the upper left quadrant. Since this area is already crowded, top right is a good spot. Even if it on the smaller side, it will alert customers visually.
Gutenberg Rule
Header without invitation
Header with invitation
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.
Banner ad example
Yes2You Banner ad
why? >
Consistent and ease of use are key in the world of web design. If a customer is frustrated or bothered by something on a website, they can easily leave.
Having navigation stay on the left side of the page adheres to the Stay on Page principle. This principle us 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 page remains static.
In order to keep the customer in their flow, adding the "My Info" section to the navigation, and adding an overlay for the secondary navigation keeps the customer on the page and allows then to stay in the flow of their shopping experience.
[1] Designing Web Interfaces, Bill Scott & Theresa Neil, Page 126
new menu
Secondary navigation added
These pain points are problematic, however, overall Kohl's stays consistent with branding in the Yes2You and Wallet sections. The colors, patterning, and font are all consistent throughout, and by having the Kohl's header stay static on the page, the user knows they are still on a Kohl's site, and can navigate out of their member rewards section at any time.
In the design deliverables section below are wireframes and a prototype that illustrate an interactive fix for the design and layout problems found on the Kohl's Yes2You member rewards site.
design deliverables
wireframes
Wireframes completed to address problems and provide solutions to pain points found within the Kohl's Yes2You Member Rewards program site.
prototype
I also created a prototype using Axure that shows changes and enhancements to three pages from the Yes2You Rewards program site.
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 the consistency principle will stay in the forefront of my mind.