PROBLEM AREA
While E. Shaver Bookseller captivates visitors with its cozy, personal atmosphere in-store, the website falls short in delivering that same experience.
How might we get Savannah locals who consider reading part of their lifestyle, to recognize E. Shavers as their top choice when buying books by making the virtual experience as accessible as the physical store.
A book lover wants to order online from their favorite local book store
But the site they find is hard to navigate and doesnt match the same effect you get when you visit
THE ISSUE WITH POOR INFORMATION ARCH
FEATURES
1
2
3
Visual appeal and social validation
Social media and personal recommendations
Intuitive website with strong filtering options
3
1
2
SITE MAP
BEST SELLERS
NEW RELEASES
STAFF PICK
ABOUT US
AUDIO BOOKS
EVENTS
HEADER
OUR HISTORY
OUTSIDE LINK
OUTSIDE LINK
STAFF BOOKS
BOOKS
CART
WISHLIST
DISCOVER
We began by creating a site map of the current E. Shaver Booksellers website to stay organized and establish a foundation for our research and testing. Here’s what we found:
The current site map is confusing, partly due to the inclusion of external sources for purchases. This contrasts with E. Shaver’s identity as Savannah’s first independent bookstore, known for supporting the local community, from publishers and writers to customers. When a website doesn’t reflect the essence of the business, it risks losing potential online sales.
We used the site map to design surveys and guide interviews, allowing participants to rebuild their ideal version of the E. Shaver’s website. This became a key component of our research.
In addition to this method, we also looked into academic forums and online articles
RESEARCH
“For every $100 you spend in a locally owned store, $73 stays in the local economy”
Our primary research involved surveying individuals aged 15–25, primarily SCAD students, to understand their book-buying habits, preferences, and frustrations.
The survey focused on aspects like the choice between online and physical stores, factors influencing book choices, preferred formats, and desired website features.
“Not only do you get a book for those dollars you spend in local stores, but they stay in your community.” - Julie Rosenberg (2018)
14
5
Survey Participants
Interviews
For our primary research we conductied both quainltative survets and interview
204 Data points
Based off all of our research, we broke everything down into
Once we pulled everything together, we grouped the data and came up with key insights.
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
“ For our primary research we conductied both quainltative survets and interview “
-Survey Respondent
Clear navigation boosts usability and encourages returns.
Social proof, like reviews, builds trust.
Emphasizing E. Shaver’s community focus sets it apart.
Aesthetic design creates an inviting experience.
Users found the navigation confusing and struggled to find books.
Research shows community engagement, like reviews, builds trust.
Users prefer supporting local bookstores over big retailers.
An organized, cozy layout is key to user retention and enjoyment.
Insights
Takeaways
By implementing these insights into the E. Shaver’s site
NEW SITE MAP
With all the information broken down, our solution became clear. We applied what we learned to create a new site map, aiming to deliver the best results for E. Shaver’s website.
HEADER
HOME
SHOP BOOKS
COMMUNITY
GIFT SHOP
GIFT CARDS
CALENDER
GENRES
CART
LOCATION
BULK SALES
ABOUT US
SERVICES
WISHLIST
HOURS
HISTORY
CLOTHING
BOOK CLUBS
BEST SELLERS
COME VISIT
FIND A BOOK
LINKS
FOOTER / HEADER
With a clear direction in mind, we drew inspiration from effective examples of headers and footers, analyzing what makes them functional and visually appealing. We then explored how to incorporate these qualities into E. Shaver’s website design.
We started by examining major online book retailers, focusing on Amazon and Barnes & Noble. We analyzed their current navigation bar, features, and UX writing to understand what makes it successful.
4
1
1
2
3
3
4
2
1
Placing the logo on the left of the navigation bar helps users identify the site and doubles as a home button for easy navigation back to the starting point.
2
Placing the search bar at the center between the left and right icons improves accessibility, encouraging more searches across the platform.
3
Adding a cart link to the navigation bar makes it easy for users to access their items and complete a purchase.
4
Adding important shortcuts to the navigation bar improves efficiency, allowing users to quickly access key sections and complete tasks faster.
4
With a clear understanding of what makes a good navigation bar and its essential elements, our team reviewed E. Shaver’s current navigation bar and compared it to the new examples.
E. Shaver Booksellers
Title, author or keyword....
1
Most eCommerce websites and apps place the cart and profile icons on the right side of the navigation bar.
2
Placing the logo in the center works, but it takes up a lot of space, limiting other possibilities for the layout.
3
Most eCommerce websites center their search bar, so it is easy to see and access
4
Without key buttons in the navigation bar, users may struggle to find what they’re looking for quickly.
1
2
3
4
Store Merchandise
Services
With the pain points of the current header identified and an understanding of what works for successful book-selling companies, we began rebuilding the navigation bar using this new information.
E. Shaver Booksellers
Title, author or keyword....
Store Merchandise
Services
Before
After
We followed the same process with the E. Shavers footer and this is how it turned out
After
Hours & Directions | Privacy Policy | Return Policy | Help
E. Shaver, Bookseller | 326 Bull St. Savannah, GA 31401 | 912.234.7257
Copyright @ E. Shaver, Bookseller
If you need assistance with this website, please contact us.
3
2
4
1
Logo can still work as a home button as well as to further establish brand identity
2
Social media links are clear and accessible opening up the company to share on social media
3
Necessary information is provided, without compromising clarity and organization
4
By organizing the links it makes it easy for users to find what they need fast
Adding these features to the footer creates a more functional space, serving as a reliable spot for users to find what they need.
HOMEPAGE / PRODUCT PAGE
With the footer and header finalized as the foundational elements, we moved forward in our process to tackle the homepage and product page.
As we began, we gathered inspiration from Pinterest and existing websites to gain a clear understanding of what elements are essential and which ones can be replaced
FOYLES
WATERSTONES
During our visit to Foyles, we were impressed by the site’s frequent use of recommendations and how consistently it presented new ones.
Exploring Waterstones, we recognized the impact of a strong hero section in shaping the overall feel of the website.
Inspired by our research, our team designed two versions of both the homepage and the product page, each with a distinct feel. This allowed us to gather user feedback during testing and determine which approach would be most effective.
PINTREST
PINTREST
While browsing Pinterest, this design stood out to us for its visual impact and the engaging experience it provided through detailed product information.
We were impressed by the clean layout and design, along with the unique approach to providing recommendations, which offered plenty of inspiration.
HOMEPAGE DESIGN 1
HOMEPAGE DESIGN 2
1
1
2
2
Drawing from our inspiration, this design begins with an impactful hero image that sets the tone for the site.
Design 2 takes a calmer approach, prioritizing the functionality of the site.
We included a key fact that E. Shaver proudly promotes and embraces.
PRODUCT PAGE DESIGN 1
1
2
Having the cover of the book large and visible proved to be the most effective
Providing a quick book overview for user convenience.
Now that we had something to work with we switched gears into testing to get first hand user opinions on what they would prefer from their local E. Shavers site
1
2
Take advantage of prioritizing recommendations fro users
PRODUCT PAGE DESIGN 2
Added add to cart or Wishlist to the top, to make sure for efficiently purchasing
We added a local estimate of how many people are reading the selected product to foster a sense of community.
Audio book option is hard to find.
Not prompted to scroll down.
Version B needs
a bolder 1st impression.
Reviews from other customers.
Elegant and clean.
Direct = Faster purchasing decision
UPS AND DOWNS OF USER TESTING
Based on our testing, we received valuable feedback on what worked well and what needed adjustments. Here are the key highlights of what did and didn’t work for the site.
In addition to testing both versions, we asked our testers to choose their preferred version, which led us to select Homepage Version 01 and Product Page Version 02 for our final iterations.
Despite the progress, there were still adjustments to be made based on our insights. Our next step was to refine these changes through UX writing.
Ninth House
$14.80
$14.80 |
★
4.6
Ninth House
Original
New
In this example, we found that while it works, it has some weaknesses in the information its giving.
This version highlights all the essential information while maintaining a clean and easy-to-read design.
By applying this approach to every feature in our redesign, we ensured a cohesive and user-centered experience throughout the site. This careful integration of insights and feedback led us to the final iteration of the E. Shaver’s website.
Final Design
Final Homepage/ Product Page
We crafted a user-friendly platform for all ages, emphasizing effective UX writing and thorough user testing to ensure seamless communication. Our design encourages both online shopping and in-store visits, with strong branding that bridges the digital and physical store experience. By integrating cohesive branding elements, the website becomes a true reflection of the store’s identity, fostering connection and engagement.
One of my biggest takeaways from this project was the chance to creating a cohesive, user-centered design. This experience enhanced my ability to structure content effectively and communicate clearly.
Additionally, I further developed my skills in crafting intuitive navigation and refining content strategy, which strengthened my versatility as a UX designer.
Thank you to the team and professors who supported this journey and helped make it a success!
Thank you for taking the time to look at my work :)
Results
Summary
For testing we conducted A/B testing with 14 participants, comprising local and online book shoppers.
The purpose of these interviews was to assess user preferences and usability challenges. The question that we aimed to answer by the end of testing was:
For testing , we made the users go through the whole experience of purchasing a book. We first showed them the current website from the store and then one of the options we made. The users journey would look something like this
Does the new design improve the user experience when browsing both home page and product page?
OBJECTIVE
VERIFY
DISCOVERY
Signed In
Create account
Create profile
Homepage/ Search
Search Title
Read Details
Add to Cart / Wishlist
Recommendations
About Page
Select Book
Navigation
USER TESTING
SCAD
2024
Select a local or small business with an eCommerce component. Improve both the website navigation as well as information architecture for key pages on the client’s website.
Project Overview
E. Shaver’s Bookseller
Duration
10 Weeks
Role
UX Writing Lead
Responsibilities
UX Writing , Information Architecture
Team
Lilly Spiller , Stef Baracoldo, Max Claride - Hook, Mariana
