VOLUMES is an independent bookstore cafe in Chicago that offers a collection of carefully curated books and a good cup of joe. The owners were mainly focused on their in-store activities to maintain a sense of community with their customers. When COVID-19 hit, majority of their sales have shifted online. The owners are looking to redesign their website to improve the visual design, usability, discoverability and overall checkout process.
The Volumes website is more than a bookstore as it serves multiple purposes and holds information on store updates, event updates and other products. For the purposes of this case study, the redesign will mainly be focused on pages related to book purchase.
• Implement a scheduling and reminder system
• Recommend daily mindfulness reminders to meditate
• Create a mindful product that puts users at ease upon use
For our project kickoff meeting with the owner, we explored the problem space and hypothesized that the customers were experiencing frustrations navigating the website and ordering books. We brainstormed our research goals by listing up important questions that we needed to answer from our hypothesis.
Market Research was carried out to gain insights of the target markets of bookstores and learn more about the target demographic.
With the help of VOLUMES’ owner, we've identified who their rivals were for a competitive analysis to learn more about their unique selling point of indie bookstores in this area. Through this analysis, we were able to highlight business opportunities by identifying potential customer expectations that Volumes currently lacks such as:
I wanted to learn more about the current flow of the website and took screenshots of the pages vital to the book order process and conducted a usability audit based on Nielsen’s Heuristics shown below. Some things that were easily identifiable right away was the misuse of typography, the missing shopping cart in an e-commerce website and the lack of books shown upfront.
With the findings from desk research and speaking with the stakeholder, we've identified some target customers and created provisional personas to understand their needs and frustrations. From this information, we were able to narrow down what the traits of the in-store's regulars (repeat customers both offline and online) and started recruiting them for some interviews.
With the owner's help to recruit 3 of her regular customers, we were able to test the current website and share their experiences with VOLUMES safely over zoom. We carefully noted each painpoint of the existing website and later determine the severity of each during research synthesis. While all participants were long-time regulars at the bookcafe since its first opening and loved the in-store experience, they have a few comments about the website:
It was now time to condense our research data with empathy to understand the end-user’s common goals, needs and behaviors.
This is Jenn! She is the amalgam of the customer interview participants. Jenn will guide us through the design process so our decisions along the way are aligned with the end-user’s goals and tackles the problems that need to be solved.
Although understanding Jenn’s goals and needs is important, turning them into actionable problems statements is a crucial step to creating the right solutions for her needs:
Based on the data gathered from testing and interviews, each pain point was listed and prioritized based on effort level and value.
I studied Volume's original checkout flow as a base and redesigned it based on the pain points we chose to prioritize from the severity analysis. The main changes are shown below in the blue area or the redesign when the users adds an item to their cart and gets a banner notification that it has been added accordingly and the shopping cart is now made more visible to assure customers that the website it responding to their actions.
With the new user flow in place, I sketched out pages vital to book purchase to decide the layouts of each page in the process while keeping the user needs and preferences in mind. Before sketching things out, I've studied and referenced some of the layouts from our competitors and took the best parts that worked well and implement to our rough wireframes.
The sketches were digitized and with some feedback and revisions from the stakeholders, the responsive low fidelity wireframes was created. Shown below, you can notice the shopping cart right away and the books brought forward into the homepage:
The owner has been creating and revising their website using a platform builder but did not have an established brand guideline. She wanted to create a brand to make users feel welcomed, create a sense of community and capture the bookstore’s essence. They also wanted to incorporate their owl mascot more.
Staying true to the brand attributes, I’ve chose the brand color to be a teal blue. This color represents open communication and clarity of thought which was a great way of describing what a bookstore can offer people. Orange and yellow were chosen as secondary colors to express passion and happiness. As per the owner’s request, I kept the original logo intact and incorporated their owl mascot in the footer.
Applying the brand guidelines and UI kit to build my high fidelity wireframes (shown below), I put them together into a limited prototype in preparation for usability testing.
Check out the prototype here.
In order to determine whether the redesign tackled the problem, it was time to put it to the test so we can understand what works well or what can be further improved. The test was conducted with 6 participants over a recorded Zoom call and compared the test results between the current website and the redesigned prototype.
We carefully recorded all the feedback from usability testing and created an affinity map and organized related information and observations into distinct clusters. In doing so, we were able to use this data to learn what we did well and what areas to improve on for the next iteration.
The final presentation was made to the stakeholders and were very excited about the redesign outcome. The next steps would be to conduct another round of usability testing from the reiteration until it is ready to implement.This project is currently put on hold for the future until we find a developer to help us implement this design. Throughout this process, I've come to a greater appreciation of how much though going into building a smooth e-commerce experience and a greater understanding of how to balance user and business goals.
My favorite moments 😊
My favorite moment would have to be talking to real customers during research phase! It was refreshing to hear each participant’s passion and love for the book cafe.
My least favorite moment 😭
The Heuristic evaluation took a long time because there were many pages to audit. It was a rewarding experience to have learned one of the industry-known approaches to redesigning a product.
Room for Improvement 🤔
I believe I could have used the constraints feature more effectively on Figma when I was building my components for the website. Also, this project also took a little longer than expected because I did not take into account the time it takes for recruiting participants and will take this learning with me for future projects.
