Wicked Good Books

What

The goal of this project was to revamp a local bookstore's website into a more modern and better structured site. Research and information architecture, such as user interviews, content inventory, and site maps, were used to learn how the site functioned well and how it could be improved. At the end of 2 weeks, I presented a redesigned website with 22 new screen states to show a user moving through the checkout process and to show other pages they would find while exploring the site.

Background

The local store's website is Wicked Good Books (WGB), a bookstore in Salem, MA, that sells a mix of mainstream items, specific books on Salem's history, horror and mystery novels, and gift items. They also sell their own product line and emphasize their connection to their community. Their site is disorganized and lacks a structure that can guide users easily and intuitively to purchase books. 

Wicked Good Bookstore Site

Initial Site Research 👀

I explored the WGB website to find patterns in their current design. My initial impression was that the site aims to cater to their local community but that their current layout and navigation makes moving through their site difficult with unclear categories and 404/Not Found Pages. A more modern visual look, that still speaks to their distinctive brand, may also help highlight their niche and local market.

Themes

Themes that were emphasized through their site were a focus on connecting to their local community, showing their unique identity, and sharing their history to Salem, MA. There was less emphasis given to their ability to sell books online.

 Competitive and Comparative Analysis

Next, I compared WGB to other stores and websites. Barnes & Noble and 2 local bookstores, Pages and Books Inc., were the first sites I looked at to compare how they organized their navigation and represented their store with visuals and site layout. I also researched the National History Museum to see how they presented their navigation for museum visits, educational resources, and exhibit information, because WGB has a focus on their building's history in Salem too.

 Next Stop, User Research

To narrow in on how to best design for both the user and WGB, I asked about user perceptions on brand identity, views on community and connection with local stores, online shopping and book preferences, and their interest in knowing about the history of unique places. I interviewed local shoppers, bookstore enthusiasts, and online buyers to learn more about what they would value in a site like WGB.

Summed up into themes, the users’ positive experience of local shops prioritize: 

Affinity Map Insights

These themes were synthesized from user responses and from affinity map groups.

Users care about:

* Ethics and ethos of smaller businesses

* Quick and convenient checkout process like Amazon

* Connection with people 

* Face-to-face interactions

* Exploration of interesting places and items

* Learning about the history of places - if they have the time to

* Discovery of unique and interesting products

* Experience of exploring a bookstore in person

* Websites that are safe, help find what you want, and are easy to navigate

These insights show how users value the connection and charm of a local bookstore in their interactions but want the effectiveness and conventionality of a site like Amazon when they interact with a local store’s website.

Persona 

With this user feedback, the primary persona for this website redesign was created.

Journey Map

Sabrina travels through the WGB site to buy a book, and along the way, she interacts with products, like autographed books, forms, such as billing and shipping, and processes, such as choosing a book to purchase and moving through the checkout phase of her shopping experience. 

Because there are niche items, like autographed books, select novels, and oracle cards, Sabrina may want to purchase more items later and save what she likes. At the time, she may have a limit to what she is able to purchase, so creating a wish list feature would add a fun interactive experience and also be a reason to visit the online store again to browse saved products and to add new ones to her list.  ⭐️ 

Journey Map Insight : Sabrina may find a wishlist useful in keeping track of books and other products she likes. This feature would also organize her product selection and be an incentive to visit the site again.

 User Flow

A key point from Sabrina's user flow shows that as she moves through the WGB site, there is a hotspot where she may be motivated to stay online to browse products. 

The best places to motivate Sabrina with new content is when she questions if she is ready to buy a book, checkout, and complete her order. In these situations, there is a decision that reoccurs. Should Sabrina continue to browse products and move through the online shopping flow again or should she move through the checkout process to complete her buying loop with WGB? 

User Flow Insight: “Recommended Reads” and “Featured Items” may keep users interested and motivate them to move back into the flow of online shopping instead of moving into the checkout phase.

Next Stop, Map Out and Sketch the Design

A clear navigation will lead you to where

you need to go and find new

discoveries along

the way. 

Redesigned Sitemap

Color Scheme

A purple announcement on the current site inspired the purple hue chosen for the redesign. A light purple color is used to convey the welcoming and whimsical nature of the store. A light brown color was picked to bring to mind a well-used library and the bookshelves, worn pages, and cozy chairs that make for a reading nook. 

The colors are intended to support the local charm, more modern design, and professional feel of the new site. The main site is shown in shades of black and white, so splashes of color will bring more character to the local store site and help to break up the content on the different pages.

Brown : Warmer tones suggest a well-used and well-loved bookstore

Purple : Pops of purple add to the store’s charm and emphasize WGB’s niche market

Wireframe Build

The user, Sabrina, travels through the site with the intention of purchasing a book. In this wireframe build, she views book options, decides what to add to the cart, and moves through the checkout process.

Along the way, the user may be drawn to the wish list, stumble upon a sold out book, and decide to learn more about the store's location and history. 🐱

 🤚 Stop! User Feedback Pitstop

User feedback fueled the changes in visuals and page layouts from the original mid-fidelity mockup to the hi-fidelity mockup. A user mentioned that Netflix and Nike websites have page layouts and product images that look clean and are easy to browse. This critique gave me new material to draw from, which led to adjustments in the format of pages with more space between content and in the placement and sizing of items with larger product images.

Hi-Fi Mock-up Pages

22 screens show the checkout process and the additional pages that aim to solve for Sabrina’s and WGB’s goals. There is a more seamless and sequential process for completing tasks personalized with a more modern and charming look.

Sign-In Page

The WGB redesign draws on the intuitive checkout process with Amazon. User interviews highlighted the speedy checkout, order confirmation notification, and option to save payment and shipping details. This is the framework for the WGB sign-in page and checkout process, an experience customers find natural to move through but adapted for WGB users. The WGB sign-in page gives people the option to checkout as a guest or sign in to an account, and it is individualized to the local store with a witch icon and new color scheme.

Wishlist Page

There is an option to add items to a wish list at the upper right corner of the WGB website. Because they sell noteworthy items, a visitor may wish to purchase more than they had intended. Before or after checkout, they can save items to the list, and this may incentivize them to create a WGB account, return as a WGB customer, and front load purchases they intend to make in the future. Additionally, it shows recommended reads based off customers’ browsing histories, and it is meant to be a fun way for visitors to keep interacting with the WGB website.

404/ Not Found Page

Oh, no! An alert will inform visitors of a sold out product or unavailable page. Content inventory and site research showed many products were sold out or had 404/ Not Found pages on the original WGB site. To design for these instances, a personalized page was created to alleviate surprise with the local cat’s message and to redirect users back to their previous page with the breadcrumb, “Wishlist,” or with the back tab. There is also a third choice, where a user can browse available books suggested in “Books You May Also Like,” underneath the initial 404/Not Found message.

Bonus Pages! Further Developments

For enchanted and curious readers, there are new “About us” and “Contact” pages. The original WGB “About Us” page was the same as the “Hours” page, and the page visually prioritized the store map. The map becomes the main focus of these pages and overwhelms other store details. It is confusing to have these 2 different navigation titles leading to the same page, so I created 2 new pages, with their own titles, to show the distinction between the store’s contact information and WGB’s background.

Original “About Us” and “Hours” Page

Redesign with an “About us” and “Contact” Page

The redesigned “About us” page is ready to share a description about the local store, expound on the store’s connection to Salem, and present a timeline with WGB’s history of events. A picture of the storefront with the year it opened is shown as well, and the “Best of” awards can be presented under “About Us” or “Timeline”. A clearer navigation title and specific page content represents who WGB is versus where they are located. This page brings more context to their identity, which was displayed on their original homepage, into a section that readers can review at their own leisure.

The redesigned "Contact" page succinctly informs visitors where to locate the store with WGB’s address, a Google Map, and nearby directions. The Google Map icon and link replace the map that was shown on the original WGB “Hours” page allowing for more information to be shown. Store hours are included on the Google Map. There is ample spacing between contact details so people can discern all of the available information. The new “Contact” navigation broadens what is offered on this page compared to the original “Hours” navigation. Informal directions speak to the local community and personable tone of WGB.

Hi-fi Mockup Prototype

The redesigned homepage is where WGB visitors engage with opportunities to search and purchase products, learn more about the store, and connect to WGB’s online and local community. The redesign integrates user and store goals with upgraded visuals, colors, and layouts. These tie together the unique branding of WGB with a professional and more modern experience, so users are positively propelled into a book buying experience, feel comfortable exploring the site, spend time reading product descriptions, and feel trust moving through the checkout process.

The hi-fi mockup prototype starts on the homepage, the first point where a user experiences WGB’s online store and decides to stay on or leave the site, and goes through a new user’s task of purchasing a book. From this initiative, users discover new site pages, like a wish list, during their WGB journey. After experiencing user-friendly forms and checkout stages, learning more about WGB history, and interacting with personable features, visitors will be inclined to connect with and support a local store they enjoy and revisit the store in person or online for a wicked good experience. 💫

Reflection and Next Steps

In-depth usability testing is the next step to gather other people's perspectives on the function of the site and to see if the design vision matches their experience of it. From this, adjustments will be tailored to their feedback and responses will show how the original site compares to the new one. A goal is to look into a smart search and turbo checkout process to improve people's book search and checkout experience.