ESO WON REDESIGN

Updating a Historic, Community Staple
Image by Olga Thelavart

OVERVIEW

Eso Won Books is one of the oldest remaining 110 black-owned bookstores in the United States. They are a staple within their community and provide the opportunity to showcase black talent. The recent events of BLM, coupled with Covid-19, have overwhelmed the independent bookstore and their current website needed an upgrade to keep up with the sudden influx.

THE CHALLENGE:

  • Identify and assess the business’ needs and goals

  • Streamlining their website

  • Improve and optimize the client’s e-commerce experience for the “busy buyer”.

PLATFORM: Website Redesign (Desktop)

Team Icon

TEAM: Solo 

DURATION: 2 weeks

 
mackbook mockup v2.png

TOOLS & METHODS

  • C & C Analysis

  • Task Analysis 

  • Quantitative Research 

  • Qualitative Research 

  • Card Sort

  • Surveys

  • Heuristic Evaluation

  • User Flow

  • Figma

  • Wireframing

  • Prototyping

  • Brand Guideline Creation

THE CHALLENGE

 

The Client's Problem Space

“I am overwhelmed and not sure where to look & the checkout takes too long” 

Due to a recent decline in Yelp reviews, the webpage was identified as a possible  “friction point” that negatively affected their business and reputation. Survey respondents revealed that they were constantly confused, overwhelmed, and ultimately gave up, turning to other sites to complete their tasks. 

Current state...

confused icon
  • confused about where to look on the page

  • large amounts of text

  • lengthy checkout process

  • abandoned shopping carts.

Sad icon
  • Inconsistent "call to action" buttons

  • lack of search filters

  • results seemed virtually endless.

Frusrated icon
  • no curbside pickup

  • unknown shipping timeframe 

  • turned to other e-commerce sites to accomplish same tasks.

PROPOSED CONCEPTS

 

We believe that by simplifying the checkout process, demystifying the navigation to reflect usable and intuitive categories and providing a way to help focus search results, this will enhance the user experience on Eso Won's webpage, increasing sales by 10%. We will know this by a positive change in yelp reviews and by a reduction of abandoned carts.  

shopping cart, checkout, payment icon

Streamline Checkout Process

flow chart, navigation chart

Make Navigation Understandable 

search icon, magnifying glass

Focus Search Results

 

HOW WE SOLVED THIS

Understanding Their Business

It was important to keep in mind Eso Won's current clientele and their unique position within the community. Because of their historic presence, I wanted to preserve their character as much as possible and introduce changes gradually to account for their established user base.

I embarked on generative, secondary research by gathering all the information Google had to offer,  since this project was completed during the Covid shutdown, I was not able to visit their physical store. 

Comparative Research Insights

After gaining some footing on their business, I explored both local competitors and larger scale competitors to understand the e-commerce book industry better. 

 

I identified the 3 prominent insights that made Eso Won so unique and wanted to incorporate those themes while bringing in "best practices" into the website redesign.  

Strong reputation for hand-curated books

Patrons wanted to support Black-owned businesses 

Users came to Eso Won looking for rare books

“You have to constantly reinvent yourself, especially with Amazon - because Amazon has bookstores now and it’s only a matter of time before they start hosting authors.”

- James Fugate, Co-Owner, Eso Won Bookstore

While the motivation was there for patrons, the checkout process was identified as a major hinderance towards the customer experience, so I examined their current checkout  flow and quickly identified ways to modernize their process. 

Reducing the check out from 16 steps to 4

A task analysis revealed that the current checkout process took an average of 16 steps to complete, compared to “best-in-class” competitor, Amazon, who had just 4 steps (sometimes less).

 

User testing revealed that the hidden/collapsed tabs on the current site mislead the users' expectations of a quick completion process. I redesigned the checkout to show all required fields for checkout in order to reduce the unintended "deceptive" feel of the hidden dropdowns. 

I began by creating a shorter user flow  to reflect a quicker checkout process and align with the goals of users.

Check out user flow.png

*click to enlarge

Checkout Start Point.png

The one-page checkout process, with the addition of top navigation reference points,  was designed to provide upfront expectations of the checkout process.

*click to enlarge

Checkout process improved by 400%

Usability testing revealed that users had an easier time navigating throughout the webpage and were able to accomplish the task of finding a book and checking out  400% faster than previously. Less distractions on the page helped reduce the feelings of being overwhelmed and being able to filter through relevant information quickly felt in line with the goals of the busy buyer. The uniformity of “call to action” buttons also aided in the users’ expectations and provided consistency throughout the experience. 

Refocusing Attention & Making Content Discoverable

Reducing the cognitive overload for the users provided a more focused, comprehendible experience that allowed users to complete their tasks successfully.

 

Eso Won's initial site map included 16 global headers that overwhelmed the users. I reduced down this down to 5 intuitive categories, using results gathered by a public, virtual card sort. 

By nestling subcategories into larger, overarching categories, this decluttered the interface and directed the user’s attention more predictably.

A card sort was used to mainly to identify user-derived, second tier (local) navigation subcategories. It also subsequently helped dictate the filter categories for searching for a book. 

Proposed site map.png

*click to enlarge

THE FINAL RESULTS

 

Full Prototype Walk

  • Navigation was made more intuitive and comprehendible 

  • Filter options and breadcrumbs were added so the user had a reference point for their searches

  • Consistently placed buttons throughout the website created a more predictable and pleasant user experience

STYLE GUIDE

I created a basic brand guideline using their existing logo colors and current website color scheme. This help maintain consistency in the new designs. 

 
 

REFLECTIONS & NEXT STEPS 

A Step in the Right Direction

Learning to prioritize was key. Being tasked with a website that had not modernized to the standards of today's technological advancements was a great challenge in identifying MVPs. I quickly learned the in depth nature of inventorying and how the prominent role of information architecture impacts design directions. 

 

There are still several opportunities for improvement in terms of navigation and the search filters, so another card sort and stringent review of the content map may be helpful. Working on the site's backend would greatly improve their point of sale system, as well. 

 

If this project were to continue, building out other pages that highlight the business would also be beneficial.