Dollar Book Swap Website REdesign Case study

While I was taking a User Experience and Interface Design class, I had to choose a website to redesign using the principles and user testing techniques we'd learned. I selected a website for a local used bookstore and proceeded through the design process.

Table of Contents

• Project Overview

• User Research

• Findings

• Revised Project Goals

• Thumbnail Sketches

• Low-Fi Wireframes

• Wireframe User Test

• High-Fi Wireframes

• Style Tiles

• Initial Design Comps

• Final Design

I was tasked to choose a website that had elements I found jarring or out-of-sync with my expectations, and I chose a local used bookstore, The Dollar Book Swap. From my initial examination of the site, I settled on the following elements to address in my redesign:

• Autoplaying video on the homepage that’s mostly “below the fold”

• Important information about the books hidden in huge blocks of text or the (outdated) floorplan on the “About” page

• Semi-regularly updated blog buried (either in the footer or the navigation)

• The logo doesn’t actually take you back home – it takes you to some other site...

• Naming inconsistent – “Dollar Bookswap” or “Dollar Book Swap Community Book Sale” (and their Facebook page is “One Dollar Book Swap”)

• The home page needs a complete overhaul, moving the video to be completely above the fold and working with the currently centered address and hours section to keep it prom- inently displayed. The rest of the content further down the page also needs to be worked with to present it in an understandable format. There’s a map further down showing their location, and it’s currently very far from the address listing.

After developing my project proposal and goals, my next step was to conduct at least five user research sessions using what I had learned about contextual research. Each session started with an informal interview, gathering information on how each user interacts with bookstores and their websites in general. Then, we moved to a contextual interview where the user used the site to find the information they’d need to make a decision about visiting it.

Key Findings

• Nobody liked that the video autoplays every time you go to the homepage. Some were okay on first view, by the time it started a couple times, they were quite frustrated. And a couple just didn’t watch it.

• They wanted pictures to show the atmosphere of the bookstore and also exterior pictures to get a feel for the neighborhood

• Most important elements that should be on the site: hours, contact information, location, products in stock

• Most everyone thought the “I want a free book” button felt like a scam

• The Reading Challenge page felt like a different site and thus was confusing

• Most important information is currently on the home page: location, hours, what makes this bookstore distinctive

• About page has useful information, but it’s tucked away on the right side of the nav

• Text on About page is daunting to read because of the amount of it

• Irritating that “Volunteer” page takes you away from the site

• Social media icons are in the footer instead of more prominently displayed

After reflecting on my findings from these five research sessions, I revised my project goals to be in line with what the users actually needed and wanted out of the site.

1. Overhaul website design, bringing all the pages together with cohesive, updated branding and removing so-called “scammy” design.

2. Restructure home page, keeping the current important information front-and-center, adding other important details from other pages, and having the video not autoplay.

3. Add more pictures to the website to show the atmosphere and location.

Now that I knew what the users needed out of the site and I had clear project goals, I moved on to the wireframing process. Instead of creating actual-size digital wireframes, I started with thumbnail sketches on paper to quickly experi- ment with different layouts.

Now that I knew what the users needed out of the site and I had clear project goals, I moved on to the wireframing process. Instead of creating actual-size digital wireframes, I started with thumbnail sketches on paper to quickly experiment with different layouts.

I then put the wireframes through a round of user testing. I developed a protocol to prompt users to complete key tasks using my redesigned interface. During each of the three user tests, I traded out the pages or added layovers to simulate the changes to the interface from the users’ interaction. View my user testing protocol.

Results

• Overall, the interface clearly communicated to the users for the majority of the tasks they were asked to complete

• One user looked for links to social media when asked what they’d do to keep up with the store [#1]

• Two users paused when asked to find the bookstore’s perks for kids [#2]

• Two users were unsure or noted multiple locations they thought they could find the free book coupon [#3]

Planned Revisions

1. Add links to social media to the header

2. Rename “Reading Challenge to clarify the contents and avoid confusion

3. Add the link to sign up for a free book coupon to the “About” and “Contact” pages

From the wireframe user test data, I planned some new revisions to my interface for the website. I then created high-fidelity wireframes, again using actual content that would be in the site and simulating the hierarchy of elements. I didn’t incorporate any graphics or color yet in the wireframes, but instead created style tiles.

I created two separate style tiles, each exploring a slightly different visual direction for the site. The first is based off of the colors in their logo and uses contemporary fonts. The second uses sim- ilar fonts, but I explored a different direction for colors. I chose a deep, royal green to play off the idea of saving money by going to this bookstore, then I found complementary jewel tones for the secondary and hyperlink colors.

I ended up merging the two ideas. I kept the text styles and the majority of my blues from the
first style tile, but incorporated a bright green as my secondary color. I also redesigned their logo, incorporating the bright green on the “Dollar” side to play with the money aspect and to also pull it away from the tech company vibe.

Now that I had high-fidelity wireframes and a defined style direction, I applied the styles to my wireframe and started incorporating images and graphics into the site. I adjusted the placement of a few elements, such as the “Reading Challenge” button. After I finished creating the design comp, I uploaded all of my screens to InVision and prototyped the various changes that would occur as a user navigated through the site.

After completing my initial comps, I made some small changes to finalize my design. I changed the slab serif font used in my navigation to match the body copy – the original slab was too heavy for the navigation links and didn’t play well with the sans-serif in the logo. I also tweaked some spacing between headings and body copy.