Optimizing E-Commerce for Literati Bookstore
Overview: Redesign this local business e-commerce mobile and desktop platforms to increase sales.
Role: UX Designer
Skills: Wireframing, UX research (comparative analysis, card sorting, interviews), Figma
Timeline: September 2021 - October 2021
Problem
Since COVID-19, Literati Bookstore has struggled to transition their services to the digital realm because all business processes have been carried out by hand. This issue has led to revenue losses and shopping cart abandonment as customers express frustrations finding specific updates, merchandise, and navigating through the checkout process. Along with this, the client expressed that the website does not reflect the bookstore’s unique charm.
Current Literati Bookstore Website Homepage
Approach
While my solution includes redesigning the mobile and desktop interface, three key design decisions that I made included:
1) Restructuring the navigation bar
2) Displaying a cross-sell section at the bottom of the product page
3) Incorporating a progress indicator
I realized that Literati Bookstore's customers need a way to access their products and services that are accessible, easy to navigate and enable users to experience the uniqueness of the store as if they were visiting it in person. By incorporating my three design decisions, it provides users opportunities to have a better e-commerce experience.
Users: Literati Bookstore customers, specifically returning customers
The Setting: Mobile and desktop (Analytics highlight that nearly 50% of customers use a mobile device to view the website)
Methodology
The current website design is not mobile-friendly, making it more challenging for customers to find what they're looking for.
Comparative Analysis: I completed a comparative analysis to see how other bookstores marketed their products and services. To do this, four bookstore websites were evaluated and compared.
Takeaways from the analysis:
--> Provide the product availability for each product being sold in-store
--> Use a different text color specifically for availability status
---> Offer an option for users to share their email so they can receive an update when a product is in stock again
Comparative Analysis
Card Sorting Technique: I did a card sorting exercise to reorganize their Information Architecture and intuitively group content to offer a foundation for the new navigation structure. Unsurprisingly, the results resembled other bookstores' navigation structures from the comparative analysis. This is because according to Jakob's Law (Laws of UX) users prefer a specific site to work the same way as others. If this concept is applied to Literati, then their customers will prefer the site to work the same way as other bookstores.
After evaluating the results from the comparative analysis, card sorting technique, and client input, I developed wireframes to include the product availability status, a cross-sell section, and a new navigation bar structure.
Wireframes
Key Takeaways & Lessons Learned
Throughout this project, I was able to take ownership of this project and learned how to incorporate essential designs for e-commerce. Specifically, I ensured the brand was consistent across all wireframes, adopted a visual hierarchy throughout the checkout process. Lastly, I incorporated iconography that was intuitive and easy for users to understand.
