Student Home: Library Redesign
Platforms
Online
​
Timeframe
Summer 2023—Spring 2024
​
My Role
UI Design Lead, UX design, User Research Support
Worked with team of 2 other designers (1 UX researcher, 1 UX designer)
THE CHALLENGE
How might we redesign our elibrary experience to improve the way that users find, organize, and access the content that’s important to them?
GOALS
-
Improve the way that users find and access their content, differentiating between content they own versus content available to them?
-
Create a personalized, customized experience that meets the needs of our wide range of different learner personas with room to grow and expand in the future
-
Update the UI to feel cleaner & more modern, and fit into the larger VitalSource product ecosystem?
GETTING STARTED
We started with a thorough inventory of our current feature set, and how it's all organized in the existing UX. We had to account our many different types of learner accounts, which all have access to various different feature sets. It was messy!
Once we had this nailed down, we challenged ourselves to figure out: how can we simplify this UX, while also tying in the desired new features & functionality?
-
What do we need to keep?
-
What can we scrap?
-
Where are there instances of feature bloat or redundancies that we can simplify?
NAILING DOWN THE UX
Once we landed on a rough idea of the new site map, it was time to dive into the UX and determine how we might lay all this out
A few examples of specific features that we explored:
-
A personalized, customized “landing page” or dashboard where users could easily access the things they need
-
How to organize the different features within the product, with a specific focus on creating a way to favorite or organize content
-
A more usable & accurate search experience that increases the discoverability of available content
Personalized Dashboard
-
What are the most important features to surface when a user lands in Bookshelf?
-
How does this experience change for new vs. returning users? Or for users with no books vs. a few books vs. hundreds or thousands of books?
We mapped the primary user profiles & scenarios, based on books in license, first time vs returning user, low vs high engagement, and more.
From there, we created an adaptable dashboard UI that displays different components and feature blocks depending on the individual user profile
Navigation & Customization
We explored various ways to organize a user’s content, with a focus on the ability to create custom shelves
We landed on keeping it simple with the ability to ‘Favorite’ items only for MVP, but built the UI in a way that will allow us to expand to more customization in the near future
Search & Explore
Where we landed
-
Improved typeahead allowing to quickly jump to a result
-
A clear UI differentiation between books you own vs books available to you, with a layout that will support integrated ecommerce results
-
A simple toggle between title results and content results
Some initial search UX exploration, with a specific focus on the usability of:
-
Easily finding books users own versus discovering new content
-
Searching by book title or author, versus diving deeper and searching the content within a book
THE VISUAL DESIGN
As we started thinking about the UI, we had to take into account:
-
How Bookshelf fits into the entire VitalSource learning ecosystem
-
Aligning the library UI with our recently updated reader
-
Creating a clean, modern UI and ensuring accessibility, always
Just one example of this was ensuring our book card UI & metadata was consistent across all of our different products—this is an ongoing effort, but we laid the groundwork during this project!
We began to create a more consistent card pattern, taking into account the wide variety of use cases that asset cards are used across our products
We got together with our full design team and did a full inventory of our card UI across our products.
​
These are just a few of the different book cards across our product ecosystem!
VALIDATE & FINALIZE
After product and stakeholder reviews, we finalized the UI and laid out each feature in detail in Figma. Onboarding, empty states, responsive UI, and accessibility were all taken into account as we wrapped this all up.
As our engineering team started building the framework out, we created a clickable prototype to put in front of a few users. We felt confident in our designs, but wanted to quickly gut check the high level usability and feature discoverability.
We came away from the testing feeling great about where we landed, with a few small takeaways to tweak the UI and to take into account in our post-MVP updates.
WRAP UP & TAKEAWAYS
This feature released in May 2024 and has gotten great feedback from our users (based on reviews, feedback, and few users opting to “switch back to old library”)
Next up:
-
Tackling our list of post-MVP feature improvements, such as custom folders and further integration of ecommerce results
-
Expand this design across our native mobile & desktop apps!