Mobile-First Website, AntiracistBookshelf.com

Antiracist Bookshelf is a (hypothetical) online bookstore offering an ethical way to buy racial justice literature.

Secondary research revealed the proper attitude to have toward antiracist education.

Since individual interviews could easily lead to bias and stereotyping, I decided to conduct secondary research using social media platforms and blogs to learn more about how my users were pursuing antiracism.

Here are some of the key findings from user research:

Competitive analysis revealed checkout patterns that users would recognize and swiftly navigate.

On the business side, I researched other ecommerce bookstores to understand what checkout flow patterns users would already recognize.

Prototyping & validation revealed the best way to structure the site so that users could easily find and purchase literature.

The first round of prototyping and testing determined whether the search flow idea worked for our users.

Based on the ecommerce patterns I observed on other stores and insights from social media, I determined that a search-centric home page would be a great first idea to prototype to allow users to quickly find a specific book title or subject.

Contrary to my initial hypothesis, testing revealed that most users wanted to browse before searching. I decided to move the “featured books” list higher on the screen, so that users could browse without extensive scrolling.

The second round of prototyping and testing identified credibility issues.

After adjusting my initial idea, I conducted a second round of usability testing to uncover any additional issues preventing users from purchasing.

This round revealed several trust concerns:

I switched the order of the payment and billing information screens in order to prevent users from abandoning the checkout due to payment information being asked too early.

Finally, added a paragraph to the home screen explaining AntiracistBookshelf.com’s commitment to supporting black businesses in order to demystify the word “ethical.”

Final Mockup - Home Screen

Final Mockup - Product Detail Screen

Building a component library helped maintain consistency.

I built a UI component library to make sure my use of components was consistent. If this were a real website, using consistent components would save time for developers and keep a uniform brand throughout the site.

I learned the value of balancing user and business goals for ecommerce sites.

Ecommerce provides a unique challenge to balance business and user goals. It was difficult to balance the need to “nudge” users toward conversion while still allowing them to browse and read information.

I also learned that users prefer familiar checkout patterns - trying to “reinvent the wheel” may cause credibility issues.