Fall 2022
Remote, Conceptual
Optimizing the e-commerce experience for book lovers purchasing from a local bookstore
Project Details
(Conceptual)
My Role
UX/UI Designer
Duration
October 15 - November 14 (1 month)
Tools
Figma
Overview
The Last Bookstore is California’s largest used and new book and record store, based
in Los Angeles. It also offers venue renting and sells their own merchandise. This
bookstore has been open since 2005 and has been a local favorite ever since.
Why a redesign? 🔥
Although The Last Bookstore was locally loved, their website was convoluted
with a variety of images and text and the process of purchasing a book was
not efficient and clear enough. If you wanted to browse a book, it would lead
you to another website. Once there, browsing a book was complicated as
you had to search thoroughly in the website to find genres and filters.
UX Research Plan
To gain more insight on the bookselling world, I conducted a competitive and
comparative analysis on popular bookstores and entertainment websites.
The main research goal is to understand e-commerce sites in order to improve
usability. To do this, we need to understand users and what their pain points,
goals, and needs when using this website to purchase a product.
C&C Analysis
Below is a comparison of The Last Bookstore and it's competitors. I highlighted in
yellow features I thought made the website more efficient.
Heuristic Evaluation
After comparing the Last Bookstore to it's competitors, I then did a heuristic
evaluation in order to directly address and identify the issues and violations.
User Interviews
The next step was to conduct user interviews to pinpoint what users needed and wanted
in an e-commerce website. I interviewed a total of 5 users who were avid readers.
The task: Please browse the best sellers section and select a book. Afterwards, go
through the checkout process. (No actual purchases were made)
Below are what I heard from users that showcase their desires when purchasing a
book online.
"I personally love Amazon, I think it's the standard for e-commerce these
days. I love how fast and easy the checkout process is."
- Physician, 27
"I get influenced pretty easily so I always go on the best sellers section
to get some inspiration before picking out a book"
- Graduate student, 26
"I tend to get anxiety when I shop online so I prefer if the checkout process
is clear and all on page page. That way I can go back and edit my mistakes."
- Nurse, 27
"I've lost packages so many times in my life so I hate it when a website
doesn't properly tell me when my package will come home. That's why
I make my purchases on Amazon."
- Graduate student, 26
User Journey Map
The final step on the research plan was to curate a journey map to pinpoint user's
pain points while using the website. I conducted 3 usability tests and asked users
to pretend to check out a book using Last Bookstore. Afterwards, I illustrated their
experience on a journey map shown below.
Top Takeaways
While each users had their own pain points and goals, the most important
takeaways were:
1. Create a checkout process that is easy and fast
2. Showcase best sellers for users needing inspiration
3. Alleviate anxiety by providing accurate delivery times
Card Sorting
Because the original website actually had 2 websites, I thought it would be more
efficient to condense both into two. There were a total of 29 tabs between the two
sites, most of whichcould've been in the same category. To confirm my hypothesis,
I conducted a moderated card sort with 8 users to better inform the navigational
structure for the redesign.
The results show that everything was able to be condensed and categorized into 5 navigational tabs. With this information, I applied it to my wireframes.
Site Map
I then created a site map so I can easily view and plan the overall structure of the site
before I begin wire framing.
Wireframing
After the card sorts, I applied what I learned into my wireframes/low-fidelity prototypes.
I also tried to tackle the issues the original site into my wireframe, as shown below.
Homepage
The background/drone shot of the bookstore was an amazing touch so that new
viewers are able to see how the bookstore looks. However, it is huge and a bit
overwhelming. There is a video in the middle of the site and the background is
the same video.
Genres/Browsing Books
The original genre selection was on a page on the bottom right. I thought it would be
more efficient for buyers to be able to browse books/view genres if it was part of
the navigation.
Best Seller Display
With no other information on the book besides the book cover, I didn't want the books to be judged based on just that. I applied a quick add to cart option and some.more information on the books like title, author name, price, and rating.
Product Display
There were a couple of issues with the product display. It was hard to read the white text on a black background and I wanted to include more information on the book for buyers to be able to read.
Checkout
The white text on background makes its return during the checkout process, which makes it difficult for an efficient checkout flow. The checkout is one page long and with my interviews, I wanted to create an easy checkout process where buyers are able to see their information and be able to go back to edit.
Usability Testing
Upon completing the low-fidelity prototype, I administered usability testing on 4
users before starting on the high-fidelity prototype. I wanted to see if there were
any improvements that could be made and make the final site even more
efficient for buyers.
The task was the same as the pervious usability test:
Please browse the best sellers, select a book, and do the checkout process.
What I Heard
Overall users enjoyed the prototype but had some recommendations that I took into
consideration when designing the high-fidelity prototype.
"I would love it if there were excerpts I can read before adding to cart. I
would also love to read more about the author!"
- Student, 31
"Before checking out on Amazon, I like how there's an easy add to cart that has
my browsing history or recommended books. "
- Resident, 27
Evaluating the
Psychology of the
Consumer
While it is difficult to accommodate to every user's needs and wants in a site, I
decided to implement these suggestions because:
1. As a booklover myself, I've encountered situations where I would buy a book but
didn't enjoy the material once I received the book. That is why I believe it is
imperative to include as much information possible in the product display.
Purchases of any kind does not simply end after checkout, and in order to decrease
returns and raise buyer's happiness, I added excerpts, genre tags, and author
information.
2. Abandonment issues: Consumers are able to view their browsing history and
quickly add their item to their cart. To streamline the process, this function
would allow buyers to add to cart and continue. It is too inefficient to go back to
search and look up a book to add to cart, and that might cause users to
abandon their cart.
Final Redesign
Applying everything, the demo gifs below reflect a design that was guided by
research, user interviews, feedback, and usability testing.
Product Display
In the high-fidelity I included the author's information, the ability to zoom in the
cover, and see excerpts and the print of the book.
Checkout
I wanted to make the checkout process as streamline as possible, but also
made it easy for users to navigate. Accessibility was important to me, so I
wanted to make it easy to read.
Reflections
Connecting past experiences with the current
This redesign has helped me understand different aspects of an e-commerce and
shopping experience for the consumer. Before this, I've only had experience
in-person interacting with customers on the sales floor. But because of this
redesign, I was able to connect what I already know on a digital platform. Being
able to grow more in terms of understanding users/consumers on a different
level was incredibly rewarding.
Redesigning a website
Although this website had some violations in terms of product display and check
out, I never wanted to change the whole aesthetic and change the website's
overall message. I did my best to keep it's original essence of feeling like you're
walking around Los Angeles at night and stumbling upon a bookstore. I felt like
the biggest challenge was creating a black themed website because of the risks
of not being able to read the text, but I wanted to try and challenge myself
anyways. The next time I would love to do more research and learn more about
how to create an impressive black/dark themed website.
