The Book Loft

Website Redesign

To complete a redesign of The Book Loft's website, we first had to identify website goals, their user base, and problems with the site. To do this, we conducted interviews at The Book Loft on two separate occasions. We talked with 18 people to find out why people visit this store, if they had ever been to their website, and their opinions on it. After this, we conducted card sorting among our group to determine a better way to structure our site. With our results analyzed, we begun to develop wireframes of the site. Once our wireframe was completed, we created a prototype of the site using Adobe XD. We then conducted 9 usability tests to evaluate our prototype. After we completed the usability tests, we made any changes necessary and finalized our prototype.

Client

The Book Loft is a classic and antique bookstore made up of 32 rooms located in the German Village neighborhood of downtown Columbus. They offers a large variety of books, from old to new. Their specialty is their clearance books, where they display outdoors in their central courtyard. It houses deeply discounted popular titles and is a popular spot for people to browse books at. Besides books, The Book Loft also boasts the largest collection of jigsaw puzzles in the Midwest, posters, board games and music.

Goals

The website is a combination of information and functionality. The objectives for the company on their website are to achieve several goals:

– Serve as a digital medium for customers to purchase books from

– Display information about opening hours and location

– Promote special events and sales they often have going on 

The Book Loft’s website serves as an alternative tool for them to engage with their customers. While maintaining the physical medium of a brick-and-mortar store, their website can bring in potential new users who don’t have the time to visit their store. With this, we believe that we should retain The Book Loft’s classic and heritage-heavy look that their store is based around while keeping everything else simple to meet the user’s needs.

User Base

The Book Loft offers a wide range of books for different genres and age groups. However, the users of the website will most likely range from teenagers to adults (i.e. 18 to 65 years old). This is because kids under 13 years of age will probably visit the physical store with their parents to choose a book or have their parents use the website for them. The elderly (over 65 years old) probably prefer to visit the physical store instead of using the internet. The average user should also be someone that’s an avid reader and is relatively in touch with technology 

Problems

There isn’t necessarily a specific usability problem inherent in The Book Loft’s website. In fact, it does seem to do its job pretty well. However, after looking further into the it, we found a number of smaller usability problems that ultimately add up to a potentially frustrating user experience.

1. Visual Inconsistency

There are many issues with colors, typography, and sizing, potentially making the viewer uncomfortable and confused when viewing the site. The current color scheme of orange, blue and white do not complement one another and are harsh on the viewer’s eyes. The quality of elements on the site such as buttons and images are lacking; many images appear blurry or pixelated. This also affects viewers with vision issues, making it difficult for them to look at and purchase books.

2. Online Shop

The Book Loft’s online shop is confusing to navigate. The shop is separated into 2 columns by genre or self-made categories. Firstly, the presence of a two-column structure with different content in each might be confusing. There’s also a lack of feedback from the website to the user if the user chooses to browse books in a specific genre. There’s no indication of which genre the users are browsing. There’s also a lack of design consistency among different categories and genres.

3. Navigation Bar

Users may find the navigation bar frustrating as the navigation tabs don’t provide feedback well when you hover over it, making them second guess whether the tabs are buttons. There’s also a significant amount of white space in contrast to the tiny navigational tabs, potentially causing users to miss out on the navigational tabs 

Suggested Solutions

1. Visual Consistency

– Construct a design guideline that consists of instructions for visual aspects of the website such as the colors, typography and image sizes to ensure consistency throughout the entire website.

– Revamp the color scheme of the website to make it appear more inviting and comfortable to look at. We suggest lighter pastel tones (e.g. cream, light green) or neutral tones (e.g. white with some shades of blue).

– Update the pictures of books and/or promotional events with proper resolution to avoid bluriness.

2. A Cleaner Online Shop

– The first column consisting of the book categories can be removed and instead be integrated into the genre area as there’s too much clutter on the online shop.
– The design for both categories and genres will be consolidated and matched to avoid confusions for users browsing the online store.

3. User Friendly Navigation Bar

– Provide more feedback to the users when they hover over the navigational tabs, such as changing the background of the tab to white when they hover over it.
– Reduce the size of the website’s logo and move The Book Loft’s social media links to the page footer and/or the “About/FAQ” page.

Interviews

We conducted interviews at The Book Loft on two separate occasions. We talked with 18 people total (8 male, 10 female). Of these people, 3 were individuals and the rest were in groups (6 total). 7 out of 9 groups liked The Book Loft for its large selection of books, and 6 out of 9 groups think it’s unique and stands out. A majority of the people individuals were first timers at the store, and most of them found out about The Book Loft online or through a friend. 7 out of the 9 groups hadn’t been to their website, and 6 out of 7 of these groups didn’t even know that The Book Loft had a website. We also found out that all of our participants shopped online frequently using Amazon, but they only shopped online for books if they needed a specific book. We also had participants look through the website and let us know their thoughts.

“This website looks more modern than expected!”

“The website looks cluttered in certain parts”

“There’s inconsistencies between the fonts”

Card Sorting

We did card sorting as a group. However, when we first began looking at which parts of the website were disorganized, nothing seemed to stand out. In the end, we decided to conduct card sorting on the website’s online store as it seemed to be the one with most glaring organizational issues. This was because there was an absurdly amount of book genres (over 50!) and categories (at least 10!) under the “Shop” tab. Another reason why we went with the shop to reorganize its information was because the rest of the website did not have much content within them to sort, and each page (except the shop) seemed straightforward and easy enough to navigate. Our team decided to use OptimalWorkshop to conduct card sorting. OptimalWorkshop is a free online card sorting program that allows users to do either open, closed or hybrid card sorting. We decided to use open card sorting as there weren’t pre-existing categories on the website. After collecting a whole list of the book categories (21 of them), we inputted them into OptimalWorkshop and passed the link to all group members.

Card Sorting Insights

The most important thing we discovered from card sorting was that the online shop wasn’t organized in a logical manner. We only had 3 overlapping categories, with the items in each category not being the same as well. This showed that if even we, the evaluators, had issues with navigating and understanding how the categories were organized, how would the users? Also, to have an average of 8 categories created per member, with an average of 3 to 4 cards in each categories suggests that there wasn’t a clear pattern in how the online store organized its categories. The 3 main categories we’d like to focus on when reorganizing the online store are the 3 overlapping categories – Best Sellers, New Arrivals and Indie. However, more testing is needed to identify what “Indie” actually means. While Indie had some overlap between our members, the items inside didn’t really make sense to us.

Personas

We created 4 different personas and scenarios for Book Loft website users. For each persona, we defined their goals, needs, pain points, behavior and their own unique scenario. We created these personas and scenarios based off our interviews and people who frequent The Book Loft.

Wireframes

For wireframing, we each were assigned 1 to 2 personas to create wireframes around their specific scenarios. Claire was assigned to personas that concerned the About page; I was assigned to personas that concerned the Events page; Joey was assigned to personas that concerned the shop page. Each person were also required to create a wireframe for the homepage as we wanted a variety of choices to pick from.

Our Wireframe

Our Redesign Approach

Our team wanted to redesign The Book Loft’s website to be simple, user friendly, and easy to navigate. A month ago, we conducted interviews at The Book Loft to investigate customers’ opinions on the website and to analyze how they interacted with the site. From this, we were able to determine much needed changes to the site. We also took inspiration from e-commerce sites such as Amazon. We wanted to use what was working for them for The Book Loft’s site, as they are a successful e-commerce company and that was the direction we wanted to steer the redesign towards. We also reflected on Half Price Books, a popular resale and discount book store located in Columbus. We referenced their website while designing the the five planes, as represented what The Book Loft’s website could be a more responsive and modern online platform for a book store.

User Needs

– Conducting interviews at The Book Loft allowed us to understand what customers wanted from a website.

– From interviews, we found out that customers liked that important information about the store (e.g. the address, hours) is easily accessible on the site.

– From our heuristic evaluations, we determined that the shop page of the site is not user friendly and confusing for customers to navigate

Functional Specifications

– We didn’t think the site needed any new functions as we thought it was already stacked in that aspect. What the site needed was a visual redesign and reorganization, not new functions to further complicate things.

– The only new function we added was the new Calendar feature which didn’t require users to visit an external site to check out upcoming events happening at The Book Loft.

Information Organization

– We wanted to make the site flow for users seamless and navigation as simplistic as possible.

– Looking at ecommerce sites such as Amazon and Ebay and analyzing their flow in terms of browsing the website for items was a huge influence in how we reorganized our website.

– Half Price Books also served as an inspiration for how we condensed the navigation categories at the top to reduce possible misintepretation by users.

– On the current homepage, the search bar is under the event slide. This is difficult to find and unconventional. We decided to move it to the header.

Usability Testing

We conducted usability tests on 9 people using our prototype created on Adobe XD. Each participant took about 10-15 minutes to complete the 10 tasks. There was an average completion rate of 95.7%. Interesting observations noted include that parking information was difficult to find, and too long. From this, we decided to shorten it and put it on the home page. Some participants notes that they would use the search bar to look for a specific book, and found the search bar easily. This was positive, as we moved the search bar from under the photo slider to the header. Many participants enjoyed the website’s easy navigation, cleanness, and simplicity. From our usability testing we were able to perfect and finalize our prototype.