Bookshelf Reader Redesign
Bookshelf is VitalSource's student-facing reading and studying platform for accessing and engaging with digital textbooks and learning materials.
Platforms
Online, iOS, Android, Mac, Windows
Timeframe
Spring 2020–Summer 2021
My Role
Visual design lead, User Research support (planning & analysis), UX design, prototyping, interaction design.
Worked with team of 2 other designers (1 UX researcher, 1 UX designer)
THE CHALLENGE
How does Bookshelf fit into our users’ study experience? What are the expectations, pain points, frustrations—and areas of delight—when using Bookshelf?
​
Our primary goal—based on in depth user feedback and usability testing—was to create an intuitive reading & studying experience for a wide range of learners' study habits. In addition, we wanted to update the interface to be more modern, while keeping accessibility and usability front of mind.
GETTING TO KNOW OUR USERS
General Usability Study: How do our users use Bookshelf?
April 2020 | 23 users online/mobile/tablet
We conducted 23 60-minute usability sessions via Zoom, with users across platforms and user segments, for a total of 1,380 minutes of video! Users were recruited via a survey that lived in the online and mobile app reader platform. Users were tasked to go through a number of different tasks in the reader platform, adapted based on what features the specific used most often.
​
For our Synthesis and Conclusions process our team took real-time notes (all observing team members), held a post-session debrief for alignment, utilized a spreadsheet for tallying all relevant incidents, and developed a summary breakdown document based on the spreadsheet data.
​
Goals
-
Gather feedback to understand the overall user experience - where are the painpoints in our platforms? What discoverability issues are there? Where are things intuitive and working?
-
Understand how Bookshelf fits into the study process
Themes/Takeaways
-
Table of Contents is used lots, but could be easier to navigate
-
Discoverability challenges with key features like notebook & highlighter settings
-
Learners aren't motivated to explore on their own - want & expect some onboarding or tutorials
-
Grouping of tools was unintuitive, expect related tools to live together
-
Too many search bars! Users expect one universal search for everything
GATHERING INSIGHTS
Competitive Analysis
June 2020
We conducted a detailed analysis of our main competitors’ online and mobile platforms, focusing on primary features, tool hierarchy, and UI styles.
How does our reader compare to our competition?
-
Behind in visual style trends
-
"Unconventional” layout & organization
​
What patterns are being used in the interface that users might be most familiar with?
-
Grouping of common tools, trends in naming of tools
-
Table of Contents tree structure
Card Sorting Exercises
June 2020 | 57 Respondents
We asked users to organize 32 Bookshelf tasks or features into 6 categories. Users also had the opportunity to create any new categories as they saw fit.
How do our users expect features to be grouped/organized?
-
All Highlights, Bookmarks, saved items together
-
Help/Support/Feedback resonated with My Account
-
User Preferences term commonly used for book settings
VALIDATING OUR IDEAS
Based on our usability studies as well as secondary academic research surrounding digital reading and studying behavior, we determined that our users' reading habits vary primarily by their intended goal and task of their study session.
​
We sketched a whole bunch, and eventually landed on low-fidelity prototypes to put in front of users to start to determine what reader layout would resonate most…which leads us to:
Prototype Testing Round 1 (Online)
July 2020 | 10 users
All participants were shown 2 of the 3 prototype designs, and the order shown was changed to avoid sequencing bias.
​
Goals
-
Gauge general first impressions of each layout
-
Ease and usability of task completion (task using “Search, task using “Notebook”)
-
Tools location and grouping validation
​
Key Takeaways
-
Validated global search
-
Excitement for notes in the margin
-
Narrowed down preferences & expectations between tabs, panels, and icon placement
-
Validated ellipsis "more" icon discoverability
The Skimmer | In and out
Needs: To finish reading assignment, navigate around quickly
The Referencer | Search is powerful
Needs: To define key terms, find answers to questions
The Studier | Active engagement
Needs: Exam prep, active studying, reading comprehension
NARROWING THE SCOPE
Prototype Testing Round 2 (Online)
August 2020 | 9 users
All users were shown the same (high-fidelity) prototype (see above) and were tasked to walk through the entire new reader flow for further validation
​
Goals
-
Layout validation
-
Task completion for specific features (TOC, notes gutter, manage highlighters)
​
Key Takeaways
-
Validated TOC tree structure
-
Validated discoverability of Read Aloud within ellipsis "more" icon
-
Discoverability of Manage Highlighters
Prototype Testing (Mobile/Tablet App)
September–October 2020 | 13 users (7 mobile, 6 tablet)
We iterated on some different mobile designs, then landed on one high-fidelity prototype to present to all users, with the purpose of addressing concerns that might arise from transitioning the final online design to our native mobile apps.
​
We made sure to keep in mind mobile and tablet-specific use cases: multiple users mentioned using tablet as their primary tool for reading their textbook “because it feels like I’m holding a book," while users would primarily use their phone when in transit and/or for easy accessibility.
​
Goals
-
Consistency with online experience while considering mobile and tablet-specific use cases
Key Takeaways
-
Validated satisfaction & usability of more discoverable Read Aloud experience
-
Confirmed discoverability of “Back to Library” button within Table of Contents
-
Validated usability of mobile note-taking treatment
THE VISUAL DESIGN
For the final visual design, I focused on:
-
Modernizing the interface with plenty of white space & splashes of color
-
Adding in micro-animations for smoother transitions between features
-
Ensuring all aspects of the interface meet WCAG 2.0 Accessibility guidelines, while still remaining visually delightful
-
For online - pulling from our ever-evolving design system, Stewie
-
For iOS, Android, Mac & Windows - striking a balance between native system components versus Bookshelf's own UI elements & patterns
I worked closely with the engineering teams during this process to ensure that designs and interaction were all to spec.
ADDITIONAL CONSIDERATIONS & TAKEAWAYS
This redesign was a huge undertaking, involving multiple platforms and teams, and spanning over a year! There were many additional pieces to consider on the UX side when launching this into the wild—just a few are spelled out below.
User Onboarding
​
We enhanced our user onboarding based on feedback that users wanted a little more info about how to use Bookshelf to its max potential. We customized the experience for first time Bookshelf users versus users who had used Bookshelf before but were seeing the redesign for the first time.
This was also a great excuse to push my illustration and animation skills!
Mobile Responsive UX
​
We significantly simplified the responsive experience, and added multiple touchpoints within the responsive browser experience to seamlessly push users towards the app for the best experience.
Added multiple touchpoints to enable easy mobile app download
Based on user research, kept only features that we know are primarily used on mobile experience (ie read aloud)
New App Store/Play Store Graphics
​
I updated the App Store & Play Store images to match the new visual illustration style used throughout our onboarding experience and updated reader interface.
Mac & Windows Desktop App UI
​
I created Mac/Windows interfaces that are a hybrid UI between our online & native app experiences. I took into account expected desktop app behaviors (such as utilizing the native tabs component to support a multi-book experience, and adding in touch UX for Windows) to create an intuitive native experience.
