Book[ish] Mobile App Prototype

A mobile app that answers a student's need for an affordable, easy-to-use textbook management system.

Overview

Post-secondary school required textbooks are expensive and students are constantly looking for a cheaper and easier way to obtain their course material. Booki[sh] is an app that empowers students to find, rent or purchase their required textbooks in an affordable manner in one easy-to-use platform.

Role/Team

Working with a partner, we each worked as UX Researchers. In addition, I worked as:

  • Project Lead
  • UX Designer
  • UX Writer

Project

Our goal was to create a clickable prototype of a mobile app that outlined the app's functionality with a focus on a few key features.

Timeline

4 Weeks

Tools

  • Figma
  • Google Suite

The Challenge

  • Books are expensive. Many students delay or avoid buying books to save money, thereby compromising their education.
  • Reselling textbooks can be a hassle.
  • Current online textbook management systems are overpriced, don’t have user-friendly features, or are difficult to navigate.

Project Goals

  • Create a mobile app that allows students to browse, borrow, and buy books for their courses.
  • Create an easy-to-use navigation system to avoid frustrating users.
  • Include study features to enhance the online experience.

The Approach

  • Ensure easy onboarding
  • Understand the user flow and the different ways students can interact with the app.
  • Include different ways for users to be introduced to Book[ish].
  • Include ways for students to collaborate with each other.

01 [research]

Book[ish] began by brainstorming with my partner on different ideas that might benefit us in our daily lives. As readers, we focused on books. We first decided to build an app for used books but realized that was how Amazon began.

We then thought to create an app that offered users a way to buy and sell books, but felt we needed to be more specific as the market is saturated.

We finally settled on focusing on post-secondary textbooks.

BrainstormingBookish

Research 

Once we decided on an idea, we worked on our research plan. We wanted to understand what channels secondary students use to obtain mandatory and non-mandatory books for school. We wanted to discover the following:

Where do students find information about obtaining their books?

What type of books do students usually purchase (digital, or hard copies)?

What drives their’ decisions when they are obtaining their required reading material.?

Methodology

  • Online Survey
  • 1:1 interview with select survey participants
  • Competitor Analysis

Participants 

Before beginning our research, we brainstormed a proto-persona to help us understand possible users for Book[ish]. Our proto-persona, Richard K., is a 22-year old web development student in his second year. He is always looking for ways to save money and believes one way he can do that is to find cheaper ways to buy and sell his textbooks. Richard is comfortable with new technology and likes finding ways to be an environmentally-conscious consumer.

RichardProtoPersona

Online Survey

Keeping our proto-persona in mind, we targeted people attending or who were recent graduates from various post-secondary programs. We distributed the survey to people we knew plus asked them to forward it to people they knew who fit the survey’s target audience.

We had 23 people respond to the survey. 30% self-identified as first-year students. Key points from the survey included:

  • Most buy or intend to buy used books in the future.
  • They wait to buy their books after attending their first class.
  • They are frustrated that course material changes so often which makes buying used books harder.
  • They find reselling books a hassle.

Two key insights to arise from the survey centred around the decision to purchase textbooks:

73
87

1:1 Interviews

We selected five participants from the survey to interview. We wanted to delve deeper into understanding how students obtained their textbooks and what they did with the books after their class was over.

violetta
Prabh
Dana
Rakhi
Jermaine
unnamed-file

Key excerpts from the interviews included:

  • I simply want to save money as much as possible.
  • I wait to see if my professor recommends textbooks before I purchase them.
  • Used books are cheaper. I don’t find the need to get expensive new books when I only need them for one semester.
  • I try re-selling my books but it's too difficult. To this day I still have books from first-year.
1

Competitor Research

We identified key competitors to research from the survey and interviews. Many participants mentioned they use Facebook Marketplace to source used books. Other users mentioned using Vital Sources as their digital textbook platform. We also wanted an official university bookstore and chose the University of Toronto Bookstore as one of our direct competitors. Finally, we wanted to choose a leader in the digital space as our indirect competitors. Many students use Netflix and we felt their subscription model would provide interesting insight for a potential solution. In future iterations, we would look at library services like OverDrive and Libby.

Facebook-MP-Icon
  • Marketplace’s biggest strength is that the site is accessible to a large audience base. It is community-driven with groups dedicated to specific schools and/or programs.
  • However, users must physically meet to exchange books, a potentially unsafe transaction.
  • Additionally, the condition of the book isn’t guaranteed, and/or the book may not be available for the start of class.
  • Book[ish] has the opportunity to promote safety aspects plus student preparedness.
VitalSource_Logo
  • As one of the first in the marketplace, Vital Resources is well recognized in the education community.
  • The app has rich features like read-aloud, renting and buying options, live chat, and free access to the classics. 
  • There are complaints from user about navigation, filter limitations, colour schemes, etc.
  • Book[ish] can present itself as the affordable, easy-to-use, student-friendly option.
UFT-Bookstore-Logo
  • Promoted by the school, professors, & publishers, the official school bookstore’s biggest strength is in how it’s integrated with the school.
  • Books are sorted by programs and required readings.
  • It is considered overpriced.
  • The website is hard to use and doesn’t show images of the textbooks.
  • Book[ish] can be designed to be visually appealing with filters to show required readings per course.
netflix-logo
  • A powerhouse subscription service, Netflix is an affordable alternative to cable that is customized for each user with personalized recommendations.
  • There are certain features that can be integrated into Book[ish]’s design such as a download option and on-the-go access.

02 [definition]

After our research, we worked together to synthesize the data into an affinity map. We broke the data down into key categories like financial constraints, logistics of obtaining/selling books, website/app use, purchasing habits, and pain points.


Pain Points

Users don’t want to invest money on books.

Students wanted ways to interact socially with their peers.

They will find as many different avenues to find the cheapest option to obtain their required reading.

Selling books is a hassle.

While many preferred physical books, ebooks were the prevalent choice as a way to help defray costs.

Course material changes frequently which makes obtaining/selling books difficult.

Users didn’t like books that were too marked up by previous owners.

Empathy Map and Persona

Once the affinity map was complete, we created an empathy map and from there developed our persona, Academic Amy. Many of our respondents were female so Richard became Amy.

We kept our persona a second-year student but had her attending the University of Toronto as the research indicated users attended a university in an urban area. We made her a psychology major to add some background to the persona.

AcademicAmy

Academic Amy

Student: Second Year, Psychology Major

Age: 20

Location: Toronto, ON

Does

  • Active on social media
  • Uses Facebook Marketplace for deals
  • Tries to stick to her budget during school

Feels

  • Overwhelmed at the beginning of each semester
  • Likes to feel organized
  • Feels stressed about money and staying within budget

Says

  • Books are too expensive
  • I always try to look for the cheaper alternative
  • I don’t want my time at university to be too stressful

Thinks

  • Thinks if she should sell or keep books at the end of the semester
  • Buying course material depends on the advice of TA’s/professors
  • Thinks socializing is as important as school

Pains

  • Textbooks are expensive
  • Hates wasting money on books that aren’t needed
    Selling textbooks can be challenging
  • Wants to focus on studying
  • Wants to start the year prepared

Needs

  • Cheaper access to school required readings
  • Easy way to communicate with peers
  • A streamlined method to start her school year

User Insight 

Students have a difficult time affording textbooks and going through the process of buying and selling their books.

We believe that there needs to be a tool that allows students to manage their required readings per semester in one place in an affordable manner.

Problem Statement

Our first approach to the problem statement wasn’t specific enough and wasn’t clear.  Our second iteration was more specific and clearer:

Students have limited budgets while in post-secondary school and textbooks are expensive. While there are many options for students, there isn’t an affordable platform to manage buying and selling textbooks in one spot. This may cause students to avoid acquiring their required readings and gamble on how that impacts their academic record.

03 [Ideation]

Once we defined the problem and understood Academic Amy’s needs, we worked through potential solutions. We brainstormed potential ideas, prioritized features we felt would make an impact on our users, and then worked on understanding how our users would interact with the app.

Brainstorming and Feature Prioritization

Keeping Academic Amy at top of mind, my partner and I brainstormed ideas using the “I like, I wish, What if” method. We choose this method because we felt that it provided a good framework to foster an open discussion on potential solutions. Below are a snippet of ideas selected from the I Like, I wish, What if brainstorming session

I Like

I like how I can add my notes to digital books

I like how Netflix has membership rates and I can access all my shows in one spot

I like using sites that are vetted by others like my professors or friends

I Wish

I wish there was an easier way to resell textbooks

I wish I didn’t have to meet up with strangers to buy or sell books

I wish my textbook reader had a dark mode that is automatically detected based on ambient light

What If

What if there were study cafe-like “rooms” in textbook readers where I could “meet up” with my friends

What if I could sell my study notes with my textbook

What if the text to speech function had celebrity voice options

After the brainstorming session, we identified a few key features we felt would be important to solve first. We decided on these features based on what our research indicated was important to students. 

Identified Features:

  • Study notes and quizzes included with purchase
  • Share notes with friends from textbooks
  • Add own notes to digital book
  • Dark mode
  • Obtaining book through app
  • Subscription or membership-based platform

User Stories

After identifying the features we wanted to prioritize, I worked on a few epics to help flesh out the key features we identified.

User stories are part of an agile approach that helped shift our focus from our identified key features to better understanding how the features impact our users. 
 

Epic #1:
As a user, I want to have an easy way to manage my textbooks from buying them to selling them. 

User Story #1:
As a student, I want to have a no-risk way of buying required readings so I can easily return them if they aren’t needed for my course after a few weeks.

User Story #2:
As a student, I want to be able to send back books without having to worry about finding a buyer.

User Story #3:
As a student, I want to be able to keep the books I want even if I initially wanted to only borrow them.

Epic #2:
As a user, I want school to be as much about social interactions as it is about academics.

User Story #4:
As a student, I want to be able to study with my friends and share notes on the same platform.

User Story #5:
As a student, I want to be able to have fun while I study with my friends.

User Story #6:
As a student, I want to be able to quiz my friends using my study notes.

Value Proposition

We worked through our value proposition by understanding our users’ motivations and needs. This really helped us understand why students would need our product.  Our final value proposition was:

We believe we’re the best because our subscription plan helps students obtain their required course material in an affordable manner. Our onboarding process filters students’ needs based on their school and programs.

The User Journey

To help us understand how our users would interact with our app, we identified key actions Academic Amy would take from introduction to a fully immersed user.

  • Amy needed an easy way to obtain her required readings for her class.
  • She has used sites like Vital Source in the past but found it frustrating because the site was hard to navigate, and she cannot interact with other students as easily as she would like.
  • She also wants an easier way to dispose of existing books she no longer needs.

Academic Amy’s goal is to find an app that will help manage her school-required readings while collaborating with other students.

The Journey 

Unsure Where To Look

  • It's the second week into Amy’s second year and she has not bought all her required textbooks. She’s at the bookstore and the prices are too high for her to afford.
  • Disappointed, Amy goes to her next class feeling unprepared.
Dissapointed

App Introduction

  • Amy’s friend tells her about the new app Book[ish].
  • Her friend informs her about the app’s benefits and how she can join study groups within the app.
  • Amy downloads the app and begins signing up with the free option.
Interested

Using The App

  • Amy still hasn’t bought all her books as she is worried about her expenses.
  • Amy decides to pay for a subscription. She orders her books and creates a study group within the app. Her group is studying for an upcoming exam. They are quizzing each other using the category sections that they highlighted during their independent study.
Worried-to-happy

App Use After Semester Ends

  • Amy returns her books but wishes she could have kept one of her textbooks. She decides to buy the book.
  • It’s the second semester and the first day of class. Amy has access to all her books and is eager to join study groups for each of her classes.
Happy

User Flow:

The user flow proved to be the key to our success. We spent a long time trying to understand the different ways a student could interact with the app. The constant revision and iteration of our user flows were key to building a strong foundation for Book[ish] and we relied on it often when designing the app.

Onboarding:

We felt that onboarding was key to setting the stage for our users. Our research indicated users were turned-off by hard-to-navigate apps so we wanted to set the stage with a simple onboarding process.

We included the following features as part of our new customer onboarding:

  • Social media options to sign-in/sign-up
  • Two-step authentication during sign-up because of the in-app purchases
  • Permissions for notification with the ability to enable at a later time
  • Adding the user’s university and program information for easier search
  • Having the ability to set up a profile to make it easier for other students to find others
  • Tutorial for using Book[ish] and for how to use the study group feature
onboardingUserFlow1
Onboarding-UserFlow2

Dashboard

We felt that our dashboard was the key page for our app. The page would highlight the key actions our users could take in Book[ish].

The features we identified included:

  • Access/read books
  • Access the store to obtain/return books
  • Create/join study groups
  • Create/access study notes
  • Start/cancel subscriptions
User-Flow-Dashboard_

04   [prototyping]

After determining the features and user flow, my partner and I created wireframes of our ideas for a dashboard. We amalgamated the best ideas into one prototype.

DashboardBrainstorming1
DashboardBrainstorming2

Mid-Fidelity Prototype

A low/mid-fidelity wireframe was prototyped. I wrote the content and created different pages to test. We wanted to provide testers with an idea of how the app would work including certain tasks like adding a book, reading a book, and signing up for a subscription. Below are samples from the first prototype. 

Intro Page
MidFid-Tutorial-Screen
Textbook Page
MidFed-Page
Create a Profile
MidFed-Profile-Page
Pricing Options
MidFed-PricingSummary
Dashboard
MidFed-Dashboard
Pricing Page
MidFed-PricingExample
Menu
MidFed-Menu
Welcome Page
MidFed-ThankYou

Style Guide

Here we have Book{ish]’s UI kit. The branding developed throughout the process and below is an image that captures every element used for the app from icons to the typeface. All typeface and colours were tested for WCAG 2.0 standards to ensure I was AA compliant.

Brand-Logo-and-Tagline
typogoraphy
Colour-Palette-and-Imergy
Buttons-and-Forms
Icons-and-Symbols
Navigation

05 [testing and iterations]

Before moving to the high-fidelity prototypes, we conducted user tests on the mid-fidelity versions. After the high-fidelity prototype was completed, I conducted additional tests before creating the final product.

User Testing

We tested the prototype on 5 individuals. Our goal was to determine the ease for customers to sign up for an account and complete a few steps to test the app’s functionality.

TASK 1
Sign-Up For Book[ish]

50%

Completed

TASK 2
Subscribe To A Plan

100%

Completed

TASK 3
Add A Book To The Reading List

100%

Completed

Additional Feedback

  • Remove navigation bar on key KPI pages

  • Visually group similar items together for better recognition

  • Make the confirmation page easier to read

  • Use buttons to encourage actions you want

  • Fix the onboarding

  • Be clear between “x” cancel and “back” navigation options

For my high-fidelity testing, I conducted interviews with five individuals where I walked through the app with the user and gathered feedback on their impressions. The main feedback I received centered on clarity and appearance.

  • Add more colour to the app
  • The splash page has too many navigation options
  • Be consistent on the design i.e. fonts, buttons
  • Fix prototyping bugs like scrolling and buttons functions
  • Combine the tutorials into one
  • The welcome page has too much text and no clear direction

Iterations 

Overall, Book[ish] evolved significantly from the first wireframe to the final prototype. Below are a few examples of the iterations.

Splash Page

Going from the original splash page in the mid-fidelity prototype to the final high-fidelity splash page.

Splashpage-MidFid
SplashPage-Final
TutoriaStart1-1
TutorialStart2

Tutorial and Start Page

Originally, the intent was to have two distinct tutorials.  One for how the app works and another for how to use the different features. Through user testing, I discovered users found that option confusing to navigate, especially as the UI for the menus was the same. The final design now has one tutorial (a welcome to Book[ish]). The how-to tutorials were moved to the help section. 

Subscription Process

The original design had the benefits listed after users chose their subscription option. The final design moved the benefits page before the pricing so users had an opportunity to review reasons to subscribe before and after choosing a subscription package. 

Subscription1
Subscription2

Confirmation Page

The original confirmation page was difficult to read at a glance. Page links were lost in the text. The final version has the style guide applied and a clear CTA on the page.

ConfirmationPages
AddingABook-1

Adding a Book to The Library

Originally, we used a notification window to indicate a book was added to the library. In the final version, after researching different book apps, a Start Reading button was used instead. 

Dashboard

Many of the elements on the dashboard were increased in size to make it easier for users to scan. Additionally, colour was added to the final footer design as users felt the design wasn’t enticing enough.

Dashboard1
dashbooard2
dashboard3
Page1
Page2
Page3

Reading Pages

The textbook page from the first prototype to the final version was spaced better for easier reading.  An audio button was included to listen to books on the go.  The top menu bar had a secondary menu option for users to access additional features to help make reading easier. 

06 [conclusion]

Final Prototype

Below are a sampling of the different screens I created for various tasks available on the app:

Splash Page, Sign In Screens
SplashPage-1
SignIn-1
sign-in-options-1
email-1
Onboarding
SignUp
Welcome-with-Tutorial
CreateLogin
Authenticate
University-and-Course
Profile
SubscribeNow
SubcriptionPlans
SubscriptionPlanFocus
Checkout
Confirmation
Welcome
Tutorial Screens and Help Centre
Tutorial2-1
TutorialScreens
Help-Center
Dashboard
Dashboard
Dashboard2
Adding A Book
BookSearch
BookOptions
BookReview
StartReading
No-Supcription
Reading A Book

Future Opportunities 

To make Book[ish] a meaningful addition to the post-secondary experience, I believe work must go into creating partnerships with publishers and universities. I would also launch the app in key geographic areas to test user response before launching nationwide.

Monitoring certain metrics like users who have completed certain tasks within a week per month will help us understand how users are interacting with the app.  Monitoring % of new subscribers on a weekly basis will help us during the growth phase.

Next-Steps
FinalThoughts

Final Thoughts

Book[ish] was one of my first UX projects. It was an amazing experience collaborating on possible solutions to an age-old problem.

In the process of bringing this prototype to its completion, we found that the brainstorming and iteration steps we went through held the backbone of the entire project.

Our user flow held the definition and functionality of our app, and because we revised it with such detail, we were able to rely on it when getting through the prototyping phase.

With more time, I would love to spend additional research on how users interact with different sections of the app like adding a book or the onboarding process.

Click here for a full listing all images

Selected Works

Knitters United - A Website DesignA website for knitting enthusiasts who come together for a good cause

Book[ish] - A Mobile App PrototypeAn app for students who need an affordable, easy-to-use textbook management system

Parkdale Queen West Queen West - Website RedesignA website assessment and redesign for a nonprofit

VL-Logo

This site is copyrighted by Vandana Lahar © 2021. Some images contained on this site may be copyright property of others. Acknowledgment of these copyrights is hereby given. All such materials are used with the permission of the owner.