Thriftbooks Case Study
A demonstration of research methods and design capabilities on the second-hand book selling platform.
Overview
The case study demonstrates UX/UI and Product design skills which are not represented the rest of my portfolio. I am a loyal customer and frequent user of Thriftbooks, both the desktop website and iOS app, which is why I've chosen their platform as the subject of this case study.
To inform my design recommendations I researched the company, competitors, and collected a small sample of customer feedback. Next, I analyzed a portion of their mobile platform using heuristic evaluation, a usability inspection method used to identify common user experience issues in a product's design. Based on findings from the aforementioned steps I made several design recommendations which would improve the Thriftbooks mobile application. Finally, I redesigned the screens analyzed in the heuristic evaluation to show what the Thriftbooks iOS app could look like following contemporary design conventions.
Company Profile
In order to provide more appropriate design recommendations I did a superficial pass over the company to find goals, mission, values, etc.
Brief
Thriftbooks was founded in 2003 and is the largest online seller of used books (citation).
Their value proposition to consumers is that they provide a large selection of affordable books with an accompanying loyalty program (citation).
The target audience is budget-conscious readers, book collectors, and students (citation)
A key differentiator from competitors is their ReadingRewards program which rewards members proportionately to the degree of their loyalty to the brand which is measured by amount of money spent per year.
Product
The Thriftbooks product is a multi-platform e-commerce application which is available on Web and mobile (iOS, Android).
Competitors
Amazon, Abebooks
Business Goals
Customer retention through rewards program
Competitive Analysis
I analyzed 3 of the most popular navigation apps on Apple CarPlay - looking both at the navigational hierarchy and UI components/patterns for inspiration.
Finding #1 - UI Navigation
Apple provides a few options for UI navigation which were visible in the sample applications researched.
Finding #2 - UI Components
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Customer Feedback
I started by reviewing customer feedback on trustpilot
30 recent positive and negative reviews
30 negative only reviews
App specific feedback on iOS
30 recent positive and negative reviews
30 critical (negative) reviews
30 recent reviews
30 negative reviews
App Store
30 recent reviews
30 negative reviews
Heuristic Evaluation
To assess the usability of the application I used Jakob Nielsen's 10 usability heuristics. Numbers 1,2,3 were omitted as no issues were found. I chose to analyze the flow of finding a book and adding it to your cart.
Visibility of System Status
Issues
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Recommendations
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Match Between System and Real World
Issues
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Recommendations
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
User Control and Freedom
Issues
Back button not available. Swipe gesture non-functional.
Recommendations
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Consistency and Standards
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Error Prevention
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Recognition Rather Than Recall
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Flexibility and Efficiency of Use
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Aesthetic and Minimalist Design
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Help Users Recognize, Diagnose, and Recover from Errors
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Help and Documentation
Issues
Star icon used for “Profile Overview” page in topnav then in the sidebar it’s used for “My Thriftbooks Account” page
in the accounts page the star icon is located in a group with Points balance, so in total the user has three semantic connections for one icon
Recommendations
By today’s standards, a star icon is typically reserved for “Favoriting” items
Allow user to choose profile picture
Use the User icon that I saw in previous screenshot
Style Guide
The Web and Mobile App do not appear to be following contemporary design system practices, so I created a rudimentary style guide to demonstrate my grasp of modern design conventions.
Typography
App does not appear to be following a type scale. Picked a Minor Third scale because good for information dense applications. Roboto font selected for versatility with weights and
Color
I documented Thriftbooks current color system and added to it. Two primary brand colors: green and purple. The neutral gray base, from what I can tell by inspecting the css of the site, is not part of an organized palette. Secondary colors can be found in branding material from ReadingRewards page. I took all found colors and ran them through the tailwindCSS color generator to create color palettes. The secondary colors are vibrant and saturated, so I added a bright teal and orange to round out the secondary accent colors available.
Spatial System
4 Pixel grid
Recommendations
The following are product and UX/UI recommendations informed by Thriftbooks' company profile, customer feedback, heuristic evaluation, and my experience as a frequent user.
Dark Mode
To assess the usability of the application I used Jakob Nielsen's 10 usability heuristics. Numbers 1,2,3 were omitted as no issues were found
Increase Visibility of Support Channels
To assess the usability of the application I used Jakob Nielsen's 10 usability heuristics. Numbers 1,2,3 were omitted as no issues were found
Issues
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Recommendations
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Intercept Negative Feedback
To assess the usability of the application I used Jakob Nielsen's 10 usability heuristics. Numbers 1,2,3 were omitted as no issues were found
Issues
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
Recommendations
Apple's design guidelines are very prescriptive and its limitations were helpful constraints when deciding which UI components to use and when.
WolfPack CarPlay on a Honda Goldwing
Project summary
During the project, I managed to evaluate the market, create low fidelity wireframes, and connect them into a prototype at a higher fidelity. My designs went through several iterations before they were developed and WolfPack for Apple CarPlay was launched in July 2022.
