Project Overview

PROBLEM

Local businesses are hit during covid-19

Small businesses like Open Books were drastically affected during covid-19, so they needed to digitalize their storefront for customers to purchase books. I asked myself - how do you redesign an e-commerce experience so customers would choose to support them rather than buy from big corporations?

DESIGN HYPOTHESIS + SOLUTION

Users will buy more books if book genres are reorganized

I leveraged the user research and the design analyses to maximize the way for the users to easily find their desired book choice and an easy checkout experience. Specifically, I hypothesized that if I fix the information architecture of the current website then user’s will buy more books and have a pleasant shopping experience.

Features to focus on:

1. Category organization

2. Product reviews & recommended products

3. Checkout

COMPARATIVE RESEARCH

Open Books funds literacy programs

I analyzed 3 used book store competitors who had successful e-commerce experience. They all had similar traits, BUT I found that Open Books’ speciality was they were the only bookstore that used their profits to give back to the community.

HEURISTIC EVALUATION + SITEMAP

Too much redundancy

USER PERSONA

The Careful Critic

Due to time constraints of the design sprint, I used hypothetical user research that presented to me in the project brief. The user is a “Careful Critic” who makes thorough decisions and does research before purchasing a book. I used an illustration as the avatar because I wanted to be inclusive and set aside any preconceived biases as I designed.

CARD SORTING

“I can’t find the book genre I want”

I conducted an open card sort with three users where I asked them to individually group 70 book genres. I analyzed their decisions while they sorted the book into separate categories. I specifically asked users to sort book categories because I identified it as a major friction point on the original website. Through the research analysis, I discovered that the users used similar book category titles and I chose the six recurring themes.

USER FLOWS

Cart Checkout Happy Path

Based on the wants, needs, and goals of “The Careful Critic,” I created their happy path or user flow of how they purchase a book. This user flow helped me prioritize the features for the MVP and decrease any drop off points. I empathized with “The Careful Critic” and I wanted to make their checkout flow as easy as possible.

FIRST ITERATION

Sketches

Based on the user persona and the user flow, I sketched out pages of what the Careful Critic would see when they completed their tasks. I wanted the Careful Critic to easily find what book they’re looking for as well as easily complete their checkout process.

SECOND ITERATION

Low Fidelity Wireframes

I used my sketches as guidelines to create low fidelity wireframes in Figma. I laid out the specific features that the Careful Critic would use like filtering a book, checkout process, and curbside pickup.

USABILITY TESTING + IMPROVEMENTS

What did users think?

Based on the user feedback I received from usability tests, I identified the friction points and reiterated into a high fidelity prototype. This helped me see the blind spots I might’ve missed as a designer and understand the users’ perspective better. Specifically, I focused on three pages - landing page, product list, and checkout.

FINAL PROTOTYPE

Prototype Walkthrough

NEXT STEPS

Future Ideas

• Build out the product description - I want to explore ideas on what the “let’s compare” tab would look like for the Careful Critic to compare book prices with other ones

• Explore different landing page styles - I want to see if adding boxes would improve the usability and overall visual design

• Conduct more usability testings - iterations are important to improve the designs for users, so I’d like to conduct more usability testing on a more diverse user group

REFLECTION

Lessons I learned

1. You will learn from comparative analysis. Doing comparative analysis helped me understand the industry standards of what an e-commerce bookstore looked like and it gave me ideas on how I want to design Open Book’s e-commerce website.

2. Usability Testing is essential. I learned and used the feedback I received from my three usability testings to improve the overall user experience of the e-commerce website. I am fully aware that I can get tunnel vision from the perspective of a designer, so it was great to break the cover and hear from a user’s perspective. For example, I wouldn’t have realized how confusing the checkout pages were until the users pointed it out to me.