VOLUMES is your friendly neighborhood independent bookstore cafe in Chicago. They were mainly selling their books in person to create a community and build relationships with their customers, however, due to the unexpected COVID-19, the avenue of revenue has sharply shifted online. Now, the owners want to redesign their website to improve the visual design, usability and discoverability. They are particularly interested in improving the online checkout process for their customers.
• Responsive e-commerce website
• New Brand Guidelines: “Your Community Bookstore”
UX/UI Designer, Illustrator
Figma, Invision, Illustrator
• Get insights to customer needs and preferences when choosing insurance.
• Identify pain points of selecting insurance in the absence of an agent.
• Discover the most common insurance bundles out there vs. users needs.
• Identify all factors that impact the decision process for the customer.
To get a better understanding how to redesign the website, the owner and I met over Zoom and discussed about the industry and competition.
We also did a usability audit of the website by utilizing Nielsen’s Heuristics as a guide.
Once I had an idea about what we’re working with, it was time to determine who I was designing for. What better way than to conducted Customer interviews with 6 people who had experience with in store and and based in the U.S. All 6 participants expressed their pain points to be the shopping cart, a busy and outdated UI, and the checkout experience.
If you’re interested in seeing the breakdown of the severity level analysis, you can view them here.
One of the goals is to help the user seamlessly proceed to checkout with or without the bundled policy option and consider how they can get started afterwards. I approached this by including the account creation step during the checkout process so that they may log in soon after checking out to manage their policies and get the information they need.
Meet Jenn! She’s our user persona - the amalgam of our user interview participants.
Referring back to my persona during the design process helps me to stay aligned with the user goals and
remind me of the problems I need to solve.
In this stage, I explored the possibilities of how the user will accomplish their goal(s) using flows.
In this case, how will Jess purchase books from our website?
Next, I created some sketches to create my lo-fi wireframes before digitizing them.
See full lo-fi responsive wireframes here.
Next, it was time to rebrand VOLUMES. The goal of the brand was to make users feel welcomed and kept community values so I created a mood board trying to capture the bookstore’s essence.
See full hi-fi responsive wireframes here.
To test these designs, I created a high fidelity prototype using InVision and conducted usability testing over recorded zoom sessions. I have recruited 6 participants between the ages 20-40 who have experience purchasing books online. I have prepared three scenarios for the participants to complete specific tasks. They were instructed to share their screen and “think out loud” as they navigated through the prototype.
• Test the overall quality and ease of use regarding the navigation and flow to complete a checkout.
• Test how users prefer to search for a specific book/product.
• Identify any areas of frustrations, hesitation or confusion (pain points).
• Observe how the website makes the users feel about the checkout process
100% completion rate
75% error free
All participants were able to complete the tasks given by the scenarios but not without error.
To sort out the feedback from testing, I’ve created an Affinity Map shown below:
See full affinity map here.
• Search Bar was easy to locate & appreciates the auto-suggestion feature
• Shopping Cart was easy to locate and enhances the participant’s purchase experience
• Participants appreciate the display of recommended book lists on the homepage
• Checkout process was simple and straightforward
• All participants’ primary search method is through the search bar
• All participants proceeded with guest checkout
•Most participants skip over the product page if they know what they’re looking for
• All participants’ primary search method is through the search bar
• All participants proceeded with guest checkout
•Most participants skip over the product page if they know what they’re looking for
The key changes need to be implemented for the next design iteration. The next step for this project to take off would be to regroup with the owner and test the prototype with real VOLUMES customers and keep iterating.
What I enjoyed 😁
- Learning more about the bookstore industryCreating a persona from customer interviews
My favorite moments 🤩
- Sketching (such as the low-fi wireframes)Customer interviews and usability testing
My least favorite moment 😭
- Heuristic Evaluation. It was super time consuming but it was super insightful so I’m glad I did it!
Some personal improvements for the future 🤔
- Prioritize lo-fi wireframes to digitize and make time to create annotations if possibleUtilize Figma constraints and components more effectively for future projects
Go to the next case study: Adding a Feature
