Swift Exchange

Product design for web

Background

At the start of every semester, college students must buy textbooks for their classes, and many opt to buy used books for the lower prices. Duke students currently use a Facebook group, Duke Textbook Exchange, to buy and sell used books. As a user of this group myself, I noticed many problems and inconveniences with using this group. Thus, I decided to challenge myself by designing a website for Duke students to efficiently buy and sell used textbooks.

This project is currently in progress. Working with student engineers, I am the sole designer.

Challenge

Design a product that helps Duke students efficiently buy and sell used textbooks. The product should solve the problems that students encounter when using the Duke Textbook Exchange Facebook group.

Solution

A website that makes the process of buying and selling used books more efficient by 1) helping sellers fill in detailed information for their listings, 2) expediting the buyer’s process of finding his/her desired book, and 3) helping the buyer and seller easily meet up to make the exchange.

Tools

Sketch, Invision

Product Overview

  1. Sellers post a listing for a book they want to sell. Sellers are encouraged or required to fill in detailed information about their used books.
  2. Buyers browse book listings posted by sellers.
  3. If a buyer wants to buy a book and reserves it, the buyer and seller can view each other’s contact information.
  4. The buyer and seller meet up on campus to make the exchange.
  5. The listing for the bought book is removed from the catalogue.

Product Goals

  • The website should be intuitive, efficient, and trustworthy.
  • Duke students will use this website instead of the Facebook group to buy/sell textbooks.

Designing the Process of Buying a Book

Demo userflow of buying a book. Rough prototype made in Invision. Click here to see the full prototype.

Process Outline

  1. Identify user needs via research and interviews
  2. Define overall user flow
  3. Ideate and sketch screens on paper
  4. Low-fidelity wireframes in Sketch
  5. High-fidelity wireframes in Sketch and prototyping in Invision

User Needs of a Buyer

I identified the user needs of a buyer by interviewing students who use the Duke Textbook Exchange Facebook group. My open-ended questions sought to determine how they use the group and the pain points they encounter.

I also interviewed users who do not use the Facebook group, in order to determine why they choose to use other products or methods.

With my interview results, I grouped together similar responses and behaviors to narrow down the main needs of a buyer:

  • Find specific books quickly and easily, by browsing detailed and accurate listings
  • Find the cheapest books
  • Obtain books quickly

Defining User Flow of a Buyer

After conducting user research, I sketched out a flowchart of the user's journey. Most buyers use the Facebook group with the intent of finding a specific book, so they almost always start with the Search feature of Facebook groups. Thus, I decided that a buyer's user flow for my website should also begin with Search.

Ideation

With the user flowchart as a guide, I sketched out a broad range of rough wireframes for consideration.

Low-fidelity Wireframes

I refined my sketches through low-fidelity wireframes that were grayscale with approximate spacing. At this stage, I focused on nailing down overall page layouts. Explorations included whether to display search results in a grid or list layout, and whether to display specific listings in separate pages or a side panel.

High-fidelity Wireframes

Once I had finished overall page layouts, the next step was defining a design system and more detailed user interactions. Explorations included how to indicate the difference between action links and regular links, as well as using toasts after bookmarking listings.

This is still a work-in-progress! Check back soon or contact me for details :)

Next Steps for Buying a Book Userflow Design

  • Design what happens when a bookmarked listing is bought by someone else
  • Continue testing and iterating on the modal to confirm reserving a book
  • Design a notification system for unlisted books

Next Steps for Overall Project

  • Finish designing userflows for selling and onboarding
  • High-fidelity prototyping with HTML/CSS/JS
  • Work with engineers to implement designs