Iteration and Refinement 02/18/2003 1. Case Study: Columbia House Columbiahouse.com has some unique challenges. Although not many people have visited the site, almost everyone has been a member of their club at one point. Many people feel like there must be a "catch" to joining the club, and that it's safer to not get involved. We conducted usability studies to uncover how users perceive the process of joining the club. To do so, we tested the "Join Site," part of the suite of company sites. Our findings led us to some unexpected and useful results that we used for a redesign. Figure 1: Original site The original site had been created very quickly, with the intention that user research would be performed later on. Our goal was to uncover and address the any issues by making a clearer, more intuitive interface that communicated the value of the Columbia House offer. Our testing revealed that the primary challenge we had to overcome was that of establishing trust. Figure 2: Usability Issues Overwhelmingly, participants in the study expressed concern and confusion about three key elements: 1) what the "catch" was; 2) how the process worked; and 3) which DVDs they could 1
choose from. Although we felt that the page communicated this information in a clear way through messages such as "1. choose 4 DVDs" and "pick from these categories," participants were not seeing these messages. Instead their eyes were immediately drawn to the product images. Figure 3: Product Listings Further, we had organized the page to make the maximum number of products visible (within speed constraints). To do so, the top products on the page had cover images; the remaining items were line listings. More choices were useful, we thought. What we observed surprised us. Participants thought that to participate in the offer, they could only choose from DVDs that had covers, ignoring the simple line listings. This limited their choice to 14 instead of 50. They felt that the line listings, because they looked different, were only available for members. To make matters worse, almost no one saw that there was a second page. Figure 4: Information Architecture and Nomenclature 2
A few simple language and emphasis changes helped clarify the homepage, making clearer what steps needed to be taken, and the breadth of choice. We emphasized that users could choose from DVDs anywhere on the site through language, and through a visual change to the navigation. We used both language and design elements again to visually integrate products with and without covers. We added additional DVD genres, and named and designed them in a familiar way. Next, we had to tackle the shopping cart and trust issues. Figure 5: Proposed Wireframe In the original design, participants did not understand the label "bonus cart" and were, therefore, hesitant to add additional items to their cart. When we explained that adding a bonus item would reduce the number of items needed to complete their commitment, they said they were very interested in selecting an additional item. By explicitly adding the commitment length (two years) and adding a link to more details, we could let users know key information up front. Once users felt the site was being straightforward, they might be more likely to trust the interface. Figure 6: Hidden Details 3
Again and again, our participants demanded to know the complete details of the membership. In the original design, users had to click a "membership details" link to read these details. Research showed that this page was visited often, but the views didn't often translate into successful conversions. In addition, the page offered an overwhelming amount of content. Because the page combined marketing and legal terms, participants felt they were being tricked, even after reading all the content. Figure 7: Details, up front We decided to face users' suspicions outright and with purpose. Instead of presenting fine-print detail and legal terms, assuming incorrectly that users wouldn't read them, we made this page one of the most exciting. We used the exact phrases that participants used in testing, and made them bold. We admitted up front that they probably suspected the offer was a trick, and then told them otherwise. We presented the legal terms on the page (which were required to be there) and created a friendly way of presenting them. 4
Figure 8: Redesigned Site Through a focused redesign plan, we addressed each usability issue uncovered in testing. Through specific and thoughtful nomenclature and emphasis changes, the site became more fun and more approachable. Importantly, we faced the issue of trust, spelling out users' potential suspicions before they had time ask the questions themselves. The result: A site that provides users with a clear offer, explains the details in an approachable way, and makes it easy to get free stuff. 2. In-class Activity: Redesign your redesign Because you are a communicator, part of your professional role will be to present design arguments to your peers, employers, and/or clients. The construct of your presentation, how strongly you believe in your ideas, how convincingly you can relay them: These will largely predict how successful your presentation goes. (Of course, some designs need no presentation, but for the purposes of this class, we ll assume they do.) Your presentation Get into groups of two. Spend five minutes each presenting your redesign to your partner. Use the rationale you developed for homework. As presenter, your job is to convince your audience of the merits of your redesign. As the presentee, your job is to challenge the redesign, to find areas that still need improvement. The result Based on the presentee s comments and feedback, your job will be to improve the interface. You should be making small changes to the language, placement, and color of interface elements. If you find you need to completely overhaul your design, talk to me first. You should hand in your redesign at the end of the class. 3. Background Reading For background on how the original site was created, read: Making Joining Easy: Case of an Entertainment Club Website http://www.aiga.org/resources/content/7/6/2/documents/forum_fletcher_case_032102.pdf 5