My Role

Lead UX Designer, UX Researcher

Duration

2-week sprint

Tools

Sketch, InVision, Craft, Slack,

Trello, Google Suite

The Client

Vroman’s Bookstore is the oldest and largest independent bookstore in Southern California. Founded in 1894, it is located in Old Town Pasadena and is considered one of the country’s greatest bookstores. Vroman’s hosts over 400 free community events a year, serves generations of locals, and has featured talks from Bill Clinton, Jimmy Carter, Ray Bradbury, and Joan Didion.

Vroman’s: past and present

UX Challenge

I was tasked with upgrading Vroman’s limited and dated e-commerce website. Amid Amazon’s dominance of the online bookseller market, I needed to attract customers to buy books on Vroman’s website in order to keep this beloved business afloat.

My key goals were to:

• Improve e-commerce sales

• Renew dated aesthetic and better match the physical store

• Improve usability for site visitors

• Appeal to Vroman’s wide target demographic- from less tech-savvy, older supporters that are now drawn to Amazon to the younger generation that is crucial for the business’ future

Research & Empathy

Analyzing an E-Commerce Bookstore

To gain a preliminary assessment of the main issues with Vroman’s website, I ran a Heuristic Evaluation based on Jacob Nielsen’s heuristics. I examined which current website heuristic standards it breaks. 

I also conducted a Competitive and Comparative Analysis of the website, stacking it up against regional, national, and international booksellers. Vroman’s website was missing several important features, including industry-wide standards like breadcrumb navigation, browsing filters, and a USPS shipping option. 

Interviews with Book Lovers

I conducted interviews and task analyses with local target users who were avid readers. This helped me better understand their book purchasing habits as well as the main issues they faced when navigating the Vroman’s Bookstore website.

The interviews revealed a key trend among target users: every user primarily purchased their books from Amazon due to unbeatable prices, convenience, and selection.

However users also expressed a love for independent bookstores and regret about their collapse, showing inner conflict between their ideals and the factors that make Amazon irresistible.

“This is a waste of time. I’ll go straight to Amazon, I don’t care.” 

-Anonymous interviewee

Research Synthesis

Using the insights gathered from the user interviews, I conducted a few rounds of affinity mapping to examine the trends among target users’ online book purchasing habits and their experiences with the current site. 

My observations from affinity mapping fed into my User Persona, Sara, that embodied characteristics of target users and the issues they faced. This helped me stay attuned to the needs of users throughout the process of redesigning the site.

With the users’ needs and qualities now at the forefront, I formulated the main aim:

How might we create a pleasant, user-friendly online shopping experience for Vroman’s Bookstore customers?

To chart out the major pain points users faced during the task analysis on Vroman’s original site, I created a user journey map that followed Sara’s hypothetical flow through the site.

With the key user pain points and data at the forefront, I produced a feature prioritization matrix to find the most viable solutions to the most pressing issues on the site.

Ideation & Design

Maps & Flows 

I mapped out the existing site map of Vroman’s website to audit its information architecture and site organization. I also carried out five rounds of card sorts with target users to examine which groupings they found most intuitive and familiar. This helped me redesign and consolidate a new universal navigation.

In order to better visualize and anticipate a user’s path when purchasing a book, I outlined user flows for the existing site and the redesign. This allowed me to compare and ensure that the solutions I wanted to implement would make the experience smoother.

Sketching Ideas

The site map and user flow for the new Vroman’s Bookstore website paved the way to begin sketching and rapid prototyping ideas for the redesign based on my research.

Some of the features I explored were browsing and filtering options for more helpful e-commerce experiences. I also divided the checkout process into separate steps to avoid overwhelming users and follow current norms that users are accustomed to.

When the design felt satisfactory and ready to be vetted, I ran several paper prototype tests with target users. They were now able to complete the task of browsing for and purchasing a book much more smoothly. 

During usability tests, some users missed the “Log In” or “Create an Account” tabs on top of the first checkout page, so I replaced these with the more standard pop-up notification in the next iteration.

A few users thought that the checkout process felt too long with too many separate steps, so I condensed two of the steps (shipping price and address) into one.

After a series of iterations based on usability test feedback, I turned Vroman's new website design into a medium fidelity clickable prototype using Sketch and InVision.

I ran usability tests with the clickable prototype, and iterated based on feedback. Following user suggestions, I included an option to add recommended books directly into the cart during checkout with one click.

High Fidelity Upgrade

After researching Vroman’s brand identity through their website and a visit to their physical store, I developed a style guide and designed high fidelity mockups for their new site. I aimed to reflect the cozy academic atmosphere of this beloved institution, and preserved the current hunter green featured in all of its branding.

I was inspired by users that indicated they would be more drawn to an indie bookstore’s website if it reflected the curated, personal experience of shopping there in person over the impersonal feeling of Amazon.