Capture
End-to-end mobile app
Background
Beers Books has been selling books in Sacramento since 1936, it has had 4 owners and existed in several locations making it the oldest bookstore in the city. Beers’ is a staple of the community, even withstanding the major bookstore boom of the early 2000s.
Beers recently had a location change and moved around the corner due to their old building being demolished to put in an apartment complex. It has moved to an up-and-coming area called the Ice Blocks. Beers’ current website has an outdated feel and could use a fresh, modern update to go with its new location.
Problem
Beers Books has an outdated website that is lacking in resources and information. They have recently moved locations and are in a unique position to appeal to a new audience.
Solution
Redesign the website from the ground up, starting with user research to prioritize what the users need. Apply cohesive branding throughout the site so that it can flow as one. Bring online book sales away from a 3rd party affiliate to increase profits.
My Role
End-to-end UI & UX Designer
Timeline
80 Hours
Tools
Figma, Google Suite, Canva
Empathize
Bookstore Breakdown
Key Takeaways
I focused my analysis on two bookstores in Sacramento, a specialized bookstore in San Diego with particularly good branding, and a well known large scale independent bookstore in Portland, Oregon. This was a nice range of bookstores that allowed me to get both a broad and detailed look at what goes into bookstore websites today.
Intuitive filter systems make the browsing process fun and exciting, helping to avoid frustrated book buyers
Bookshop.org is a current trend to shop for books through your local bookstore, but it is not the best option for customers or businesses
A well-thought-out navigation system is essential to a smooth book-buying process
Having an engaging staff and social media presence does a lot for small bookstores
In-store events help to bring in new customers and sell books
Curated booklists are trending, and a fun way to engage customers
Bookstore blogs are a fading trend
Survey
How often do you purchase books in person?
Key Takeaways
19 participants
Majority aged 25-34
The vast majority of survey participants were women (17)
The majority of the people who took the survey lived in Sacramento (7), followed by Los Angeles (3)
Most people who took the survey access the internet on their mobile phones 68.4% (13)
How often do you purchase books online?
What is the number 1 reason you would visit a bookstore website?
Please choose the top 3 reasons you would visit a bookstore website.
The top 3 reasons users visit a bookstore are to purchase a book, look if they have a specific book in stock, and to buy a gift card. These 3 reasons should all be well represented on a bookstore website, especially with the majority of users purchasing books online. The majority of users access the internet from their mobile phones, so this project should be approached from a mobile-first, and responsive standpoint. While newsletters are not extremely important to users they can be an effective way of communicating useful information, along with social media. Events are a great way to bring customers in and possibly increase the conversion rate of customers to lifelong customers.
Affinity Map
3 participants
Majority aged 30-65
All of the interviewees were women
Conducted two interviews in person, one over the phone, and one via Zoom
Key Takeaways
Users are shopping for books online and a bookstore needs to have this ability. Bookstore shoppers are busy and want to be able to check the inventory for certain books before they go into a bookstore. It is also important that it is easy for users to find the book they are looking for on the website, a search feature and a filter feature need to be prioritized. The “vibe of the store” was mentioned by 75% of the people who interviewed, there has to be a good vibe, and it is even better if this vibe can begin to come across on the website. Users like trinkets and other little things to be available for purchase at bookstores, including bookstore-branded merchandise.
Events are a good way to bring users in and potentially convert users to lifelong customers. Events need to be easy to find and organized for SEO. Every user gets recommendations from family and friends, there could be something here, possibly an easy way to share books or a gift-it option. Recommendations are also coming from social media and podcasts, this could be incorporated.
Define
User Personas
I chose to create two user personas to accurately represent the profiles I developed through my research. I wanted to include both an older and a younger generation to ensure that all user needs were covered going forward. I decided to give my user personas a “favorite genre” as this brings a more lifelike quality, and as a nod to being an avid reader myself.
Feature Roadmap
This was crucial in the design process for this project. A bookstore website can be a huge undertaking, as a digital market alone can be wide. I used the roadmap to ensure the minimum viable product to showcase necessary features. As mentioned above a search feature and a filter feature must be prioritized.
Sitemap
I designed the sitemap to have a broad main menu, I wanted the user to be able to find what they are looking for in the most minimal amount of steps possible. I utilized my secondary research to create a navigation that was in line with current business practices, as well as fresh and intuitive.
User Flows
I created two User Flows, I wanted to emphasize the search feature and the filters feature in my flows as they were two pivotal features of the site redesign. The first flow of searching a specific book is rather straightforward but does allow for error, this is crucial as errors are made regularly. The second flow is a bit more complicated, with a lot of alternate paths. I wanted to emphasize how the site design would work to allow for alternate paths.
User goes on website to find a specific book for book club
User goes on website to browse for a book with filters
Task Flows
User wants to search a specific book
I created three Task Flows to highlight the search and filter features even further. I worked to show the ease with which these features can be utilized. As the most important features on the redesign they need to be extremely accessible.
User wants to look at books from a specific subcategory
User wants to browse a subcategory with a filter on
Design & Ideate
It’s not that Sketchy
I tried to sketch out as many ideas as I could in order to see what was working and what wasn’t. I wanted to move away from the current site but keep the bones. At this point I was thinking about as many screens as possible, later I was able to narrow it down to the most important for the prototype. If I had more time I would love to develop the timeline style “About” page.
MidFi not SciFi
To take my work from paper to digital I put my sketches into Figma and worked directly off there. I focused on grids, spacing, and layouts. I worked on the overall look of the filters menu as this would be crucial to the final product. At this point, I was also highlighting the two separate views that the final design would have, grid and detailed. This would be to allow shoppers to choose between seeing more books per page or seeing more info per book.
UI Kit and Branding
My interviews revealed just how important the “vibe” of a bookstore is to users, this left me with a challenge to create branding that presents a good vibe digitally before users ever stepped foot in the store. I wanted to stick with their classic red as it immediately demands the user’s attention, drawing people in at first glance. I used a lot of white and grey to tamp down the excitement. I created a photo treatment to be applied across the board to bring cohesion to the site. I went with a mix of Serif and Sans Serif for my typography to emphasize the rich history of classic literature as well as the ever-changing market of contemporary literature.
Components
During this project components were both my best friend and my greatest adversary. They allowed me to streamline changes to entire pages with a few short clicks, but I also saw how pesky it can make things down the line.
High Fidelity
It’s time to put it all together! Using the branding guide I created I was able to create a cohesive look across desktop and mobile. The photo treatment tied the entire site into one. The filter feature was a bit tricky as it needed to be a pop-out on mobile but could exist on the side of the desktop, as mentioned above this was one of the must-have features on the website so it was a priority while designing.
Prototype
Creating two Flows
I created two flows based directly on the user flows I developed earlier in the process. One would be a user searching for a specific book, and the other would be browsing based on chosen filters.
As I started to create the flows I realized I was missing key screens needed for testing
A Key Screen
It became clear that I needed to create a product detail page to move forward with my prototype. I started by going back to the drawing board and then developed a new screen using the same process as before. This allowed for the full user flow to be completed.
Test & Iterate
Moderated Usability Testing
Key Takeaways
I conducted four, ages 25 - 62, usability tests remotely through Zoom. This allowed me to have the user share their screen and verbally let me know what they were doing. I was able to locate the pain points in real-time and ask important questions.
I noted early on that my first two participants had a hard time locating the “politics” category while filtering by genre. I decided to update this immediately to see if the next two tests went smoother.
“Politics” needed to be its own sub-category within the filter menu
The search feature is utilized well
“Add to Cart” is used both on the PDP page and the results page
Having 2 “Add to Cart” buttons on the PDP was a bit confusing
Users liked that you could favorite books
Key Changes
Pick up vs. ship changed to a radio button
Checkout page updated to match the overall design better
Politics as its own category (above)
Next Steps
Final Thoughts
The next step in the process would be to present the updated website to the business and then continue to develop necessary screens. One of the biggest changes I made was to incorporate an online book marketplace directly into their site, this would be a big undertaking as a company and would create new tasks to continue to work on in the future.
I was happy with the MVP for this project, I think I captured the vibe of Beers Books. The mobile and desktop screens convert excellently, demonstrating my ability to design using a mobile first approach. I was able to identify early on what features would be most important and demonstrate them in my prototypes.