User Research for and Development of Online Store for Book Delivery Service

OBJECTIVE & OVERVIEW

This project was to create an online store for a startup bicycle delivery service that caters to community-minded book lovers.

Think Uber Eats meets Amazon Prime. The idea is that readers dealing with long commutes and busy schedules can still support their local bookstores by ordering through this delivery service, and their new favorite book will be delivered to their home via an eco-friendly bicycle before they even get home from work!

CHALLENGE

The initial concern was image; with such a unique concept, I wanted to ensure that this business stood out from the get-go, presenting it as a hip, eco-friendly service that caters to the community and local e-commerce.

SOLUTION

I started by defining how I’d like to position the product in the brand user’s mind, and from that, I developed 3 basic principles:

 

Keep it local. 

 

80% of the proceeds from all books purchased through BookCycle go directly to your local bookstore. Your community sees 25% more money when you shop locally rather than at a national chain. More of your tax dollars are also reinvested into your community, plus you’re supporting local job growth. 

 

Save our environment. 

 

Buying local means less packaging and less transportation. Plus, bicycles have a much smaller carbon footprint with zero emissions. 

 

Nurture what makes your community unique.

 

Local bookstores curate their selection based on what they know their community members are interested in. When you buy from local booksellers, you are participating in the conversation that shapes your local culture. 

VISUAL IDENTITY

Logo Design

After sketching out a series of iterative thumbnails, I decided that the logo would be a stylized amalgamation of a bicycle wheel overlaid on the end profile of a book. Together, the images form the appearance of a wheel in motion, capturing the essence of the company’s unique delivery system.

BookCycle Logo Sketch.png
BookCycle Logo Evolution.png

BRAND GUIDELINES

After I defined how to position my product, I began to develop a visual identity for it in the form of a brand guidelines document. With the logo built, and the basic color palette established, I then set about selecting the typefaces while defining the design elements I’d use in the branding. I then created the app’s style guide within Sketch as a basic extension of the brand guidelines.

BookCycle Brand Guide.png
BookCycle Style Guide-0001.png

USER FLOWS

As Informed by Qualitative Interviews

I turned again to my Slack peers, asking for avid readers and collectors of books to participate in a brief interview regarding their wants and needs from a book delivery service. I presented the concept as “Uber Eats on bikes, but for books instead of food”. Once they understood that that concept was intended to support the local shops that they know and love, they were eager to provide the feedback I required to move forward. It was based on their collective responses that I assembled my User Flows, focusing on three main User Stories:

 

  • As a customer, I want to be able to see when stock is on sale so that I can save money.

  • As a frequent customer, I want to see recommendations of products that I might not otherwise find on my own.

  • As a customer, I want to see reviews of products and how other customers have rated them, so I can better judge whether the item is right for me.

WIREFRAMES

The initial sketches for the low-fidelity wireframes were not yet based on the pre-defined user stories, rather they outlined the initial stages of signing in to the app and defining the user preferences. I referred to Uber Eats for reference, but I also researched other apps with online stores, such as Lowes and Target. I gained significant insight regarding how to establish preferred stores within a selected zip code radius.

The differences between the digital low-fidelity wireframes and medium-fidelity wireframes were subtle, but each iteration informed upon the next and helped me to visualize how the high-fidelity wireframe should come together.

BookCycle Low Fi Wireframe.png
BookCycle Mid Fi Wireframe.png

With the bones of the app established, it was time to assemble the muscles in preparation for additional user research. And while the color palette had already been established, I opted to keep the colors of the wireframes neutral so as not to distract from the main tasks of the ensuing user test.

As I moved on to the next steps in the iterative process, it was now time to refer back to the stories within the user flows. The main story I focused on was the user selecting their preferred local bookstore and perusing the promotions.

It didn't take long for me to recognize that for the subsequent user testing to be efficient, the parameters of the test would need to be expanded upon. So instead of just perusing the promotions, I asked my users to do the following:

 

  • Add a local store to your list of favorite stores, then on that store’s page, peruse their sales and promotions, select a book, and finally, place an order for delivery.

USABILITY TESTING

Hi-Fidelity Prototype

Overall, the feedback was fairly positive. There was only one true issue that needed addressing (a tab bar had been purposefully omitted from the bottom of the location screens in earlier iterations, which proved to be confusing for a majority of the participants). The remainder of the issues were purely cosmetic and easy to remedy.

RESULTS

©2019 by Mike Powers.