Paperback Swap:
An independent responsive redesign
Paperback Swap is a website where people can swap their used books for only the cost of postage. While useful, the UI needs updating, that's what inspired this project.
​
If you want a sneak peak at the final product, click here to view the mobile prototype.
The project
Goals
-
Redesign the UI
-
Make responsive
-
Design mobile first
My role
-
UX Designer
-
UI Designer
Users
Readers looking to save money and still find new books to read.
Why redesign Paperback Swap?
The outdated user interface!
Not only does the website look old-fashioned, but it is not fully responsive to different device sizes like mobile and tablet, too.
​
So, to modernize the site, it needed to be accessible on mobile as well as improved visually.
From this:
Original Paperback Swap website in desktop
To this:
Redesign of Paperback Swap website home page
Paperback Swap mobile demo
Click below to see the new and improved UI of the Paperback Swap website.
Early sketches
I took a mobile-first approach and designed wireframes based on the following user flows:
-
New users needed to learn how the site worked
-
New members needed a way to add books to their online bookshelf
-
Members needed a way to request a book from others
-
Members needed to be able to send a book to other members
Low-fidelity wireframes
Is the new design usable?
The findings for the usability testing with 3 participants:
-
Onboarding pages were missing arrows
-
All participants found the wording confusing
-
Participants couldn't find where to add books
Affinity map of usability testing comments from participants
Applying feedback & redesigning the screens
After analyzing the usability testing results, I made the following revisions and made mid-fidelity wireframes:
-
Added arrows to the onboarding pages
- Simplified the onboarding explanations
-
Revised the wording throughout the design to be clearer
Mid-fidelity wireframes
Mood board for the Paperback Swap redesign
Developing the mood for the redesign
I created a mood board to establish the look and feel for the Paperback Swap site.
I chose the key words: Modern, Nostalgic, and Fun to represent the mood of the redesign because I specifically wanted the site to be modern and fun, but I also believe there is an element of nostalgia to reading paperback books.
How should the new website look?
Once I had the mood board developed, I created the style guide for the redesign. To view the full style guide, click here.
Mockups: Key features
01
Intro & onboarding pages
Among the first screens new users encounter, the illustrations on the onboarding pages will help explain how to new users how to use the website.
Mockups of the intro & onboarding pages
02
Home page navigation
On the home page, users can navigate to the add books, requests, and wish list pages, or they can view newly listed books.
Mockups of splash, home, add books, & wish list pages
03
Search for books
Users search for books and view the search results page. Once the user finds a book they want, they can view more details and request it.
Mockups of search, search results, & book details pages
04
Send a book
To send a book, the user will start on the requests page. The user will then be directed to the buy postage and print shipping label pages.
Mockups of requests, buy postage, & shipping label pages
Mobile Prototype
If you would like to try out the redesigned Paperback Swap website, click on the prototype below or open it in a new screen here.
Clickable prototype of the Paperback Swap redesign
A new design for all screen sizes!
From a mobile-first approach, I then proceed to design for the tablet and desktop breakpoints.
​
Tablet:
-
Title bar stayed the same
-
Cards arranged in columns of two
​
Desktop:
-
Removed hamburger menu from the navigation bar
-
Navigational options listed on title bar
-
Cards arranged in columns of 3 or 4
Requests page mockups on desktop, mobile, and tablet
Buy postage page mockup on mobile
Buy postage page mockup on desktop
Home, requests, and buy postage pages mocked up on tablet
Final thoughts on the Paperback Swap redesign
The new, visually appealing site design will increase the number of users! To further increase membership, the site can add an "invite friends" feature. Another possible update to the site would be revising the user's bookshelf page and adding a way to share it with others.
​​
Some things I learned while working on the redesign are:
-
UI Design has similarities to fashion design. In fashion, I often created mood boards to direct the color, print, and style direction for products
-
Small changes can have a big effect on the overall design
-
Moving around color positions can take a screen from out-dated to modern.
​
I believe that this responsive redesign is an improvement on the Paperback Swap website and could help draw in new users who might otherwise be dismissive of the site's original appearance. I am a member of Paperback Swap and I want to see them succeed!
​
Thank you for checking out the Paperback Swap responsive redesign!
