Solo concept project
User Flow Diagram
Prototyping (Whimsical, Sketch, Invision)
A literary landmark of alternative culture, City Lights Books was founded during the Beat Generation in 1953. The bookstore takes pride in their unique identity and ambience that draws in tourists from all around the world. In spite of their popularity as a brick-and-mortar bookstore in the SF Bay Area even during the 21st century, City Lights’ online presence needs an update, especially to address the needs of the busy buyer target user.
The busy buyer is someone who multitasks while they shop and could easily be distracted from and/or drop the task if there is too much information or if the task is taking too long.
My challenge was to redesign the City Lights website so that the busy buyer can efficiently find and act upon information, specifically to purchase a book online, find an event, and find directions to the store. I had two weeks to deliver a mid-fidelity prototype that demonstrates these user flows.
I looked to competitor bookstores—indie bookstores in San Francisco and in the United States—for research and design inspiration. I specifically looked at navigation, the online purchase experience, and event lists, among other things.
My main findings were as follows:
A more abstract observation was that bookstore websites had stronger branding when they had large hero images that showcased their brands. While City Lights touts their unique brand as a bookstore, the website lacks such a hero image, as the two-level header navigation and the embedded podcast player (with a blown-up, cut-off logo of City Lights) are the only things the user sees when they land on the homepage when there is no announcement box. Aside from the 1.5 logos on the landing screen, there was little else that reflected City Lights’ character and values. Below are the landing pages for City Lights and three competitors: Chronicle Books (San Francisco, CA), The Last Bookstore (Los Angeles, CA), and Powell's Books (Portland, OR).
Next, I needed to know what information was on the City Lights website in order to reorganize the global navigation. I mapped out the site (excluding the genre lists in the secondary navigation) and discovered that there were still many redundant pages under different sections. The site map diagram below is on its side because there are too many pages to view upright.
Within the checkout process were numerous pages that asked for billing information at various different points. I then proposed a simpler user flow and diagrammed it below the current site’s user flow:
To determine the new global & primary navigation, I put most of the site’s content on sticky notes and had five participants sort them in an open card-sort. The main findings were as follows:
Based on my findings from competitive analysis and the card sort, I created a new site map:
Peer feedback on early sketches helped me further simplify the checkout process by incorporating express checkout methods, based on the assumption that busy buyers would most likely have digital wallets (such as Paypal, Google Pay, and Apple Pay) that allow for this. I scrapped the City Lights user account function, since digital wallets can also track order history and are more secure, especially since I discovered that City Lights accounts save sensitive information but allow for passwords of just one character. The user flow for online purchases was subsequently updated:
Once I had a much smoother and simpler flow, I put the wireframes together on InVision and conducted a moderated in-lab usability testing with four participants to determine what else needed to be improved for the busy buyer. I followed a script and provided four scenarios & tasks for participants to complete. For online purchases specifically, I provided two tasks to complete—one in which the user knows what they’re looking for, and another in which the user has an idea of the topic but not the exact title. My main findings from the usability testing were as follows:
After the usability testing, I looked into digital wallet integration policies and discovered that a redundant step that caused friction could be deleted. I also shrank and shortened the checkout forms for better grouping and faster completion—onsite checkout was cut down from four to two pages. For the Events page, my original concept was a calendar, but lists proved to be more popular and better received, so I used a UI pattern similar to that of Facebook’s event listings, which are grouped by week then month. Social media share buttons were also added to event pages. The prototype that I presented at the end of the two-week sprint can be explored on InVision here.
Since that prototype was of lower fidelity, I was able to add more visual elements and reduce even more friction for the checkout experience after the two-week sprint ended. The mid-fidelity prototype can be seen below:
Given more time, I would tweak the lower priority features based on feedback and observations from the past testing. The Events page could more clearly distinguish between bookstore events and author tour events, perhaps through a two-column format with hero images that illustrate what and where these are held, and the event pages could also have RSVP capabilities for the busy buyer's convenience.
— Jan 2020