Overview
My objective in this 2-week sprint was to introduce an improved e-commerce design solution to a local independent bookstore. The goal was to have an improved e-commerce experience for users while keeping the local bookshop appeal.
Duration: 2-week design sprint
Team: Solo
Tools & Methods: Research, card sort, Figma, Whimsical, pen & paper
Type: Concept project - Helping a local independent bookstore in the growing world of e-commerce.
Better Read Than Dead
An icon for over 20 years the Better Read Than Dead bookshop has thrived in the heart of Newtown with a specially curated collection of books with regular author and community events.
It prides itself on the quality and specialized knowledge of its booksellers who with a collective of decades of bookselling experience, diverse tastes, and deep love of reading are able to provide a unique customer experience.
The Scope
Through an improved web redesign, Better Read Than Dead wants to increase its online customer activity, targeting existing and potential new customers on the lookout for cost-cutting and savings.
My role was to design a better user experience focusing on-page navigation, product listing & visibility as well as streamlining the click-heavy checkout procedure.
Following the double diamond phases Discover, Define, Develop, Deliver, these were my findings.
Discovery
The Challenge
Competitive Landscape
I conducted a competitive & comparative analysis on the current online bookstore landscape. I reviewed both international and local stores.
The 3 key areas I focused on were:
Navigation
Sale items
Shipping
It’s all in the cards
I moved on to a simple card sorting technique to assist in reorganizing the Better Read Than Dead website navigation menu.
The menu was divided into 2 groups, “Page Headings” and a “Category Menu” for books to be listed under. The current category list is too long and broad which makes searching for a book, an unpleasant experience.
Simple is always best
A simple more direct category system for its most popular selling genres was a better solution. These categories were based on the results of the data collected by the card sort where volunteers grouped books into categories that made more sense to them.
Define
Problem Definition
User Flow
My user research had a key personality archetype that I had to keep in while designing my solution. In this instance, the user was a “deal diver” someone who is always on the lookout for cost-cutting and savings.
I created a user flow to clearly see the steps of how a user would purchase a book on the current bookstore’s site. Having this clear image helped identify key areas where a new design solution could help.
One key element that came to light during this process was that the checkout is vastly process-driven, making the user click through various steps to purchase a book.
Site Map
I created a site map of the bookstore website so that I could easily identify each section of the website and understand how it all fits together.
I used the Card Sort findings, to create new book category labels to design a better navigation menu making it simple and easy for any visitor to navigate website.
Original website navigation menu
Redesigned website navigation menu
Develop
Problem Definition
Sketching out
Ideas
I drew several concept sketches focusing on 3 areas of the website the navigation, home page display and checkout process.
Sketching these out on paper was a great way to see how all the information collected up to now could be used to design a more easy to navigate website.
Concentrating on my particular archetype I felt like these 3 elements would be key points to present to my client as a way to increase their online traffic.
Usability Test
I performed a usability test with seven potential users using low-fidelity wireframes.
The feedback and insights received from the usability testing were crucial in enabling me to create higher fidelity wireframes as well as a prototype smoothing out tedious site navigation and customer processes.
Deliver
Outcome
Mid-Fidelity
Wireframes
Guided by the usability test insights and my sketches as a blueprint I created several pages of a wireframe to show exactly how a user could navigate to the website, find the item they were looking for, and checkout with ease.
My takeaway from this project.
As a first assignment, this was an eye-opening experience in the world of UX.
It wasn’t about designing pretty wireframes or prototypes but it was about finding the right solution to a problem. The fun part is that you may not always know the problem when you begin your work, but the fun part is discovering the real problem.
ASK the right questions, get the RIGHT answers, find the REAL problem, and provide USEFUL solutions.