Close
Bookshare empowers users to mark books as finished, write reviews, and instantly recommend books to friends. It offers robust privacy controls, allowing users to tailor the visibility of their reading journey—from completely private to selectively public—according to their preferences.
Bookshare, IOS Application
June 2024
UX Designer & Researcher
Project Manager, UX Academy Group Crit Members
Project Manager, UX Academy Group Crit Members
June 2024, 4 weeks
UX Designer & Researcher, Brand Designer
Bookshare
IOS Application
Project Manager, Group Crit Members
Figma
Adobe Illustrator
Maze
Many readers struggle to find a comprehensive book-tracking app that seamlessly integrates personalized recommendations, intuitive navigation, customizable reading goals, in-depth intellectual documentation, and social interaction without compromising privacy or inundating users with unnecessary features.
Bookshare was born out of the desire to create a space where readers would enjoy a tailored, visually pleasing, book tracking experience.
💡 How might we design an engaging platform for readers, addressing their needs for personalization, privacy, and ease of use?
👉 Design an iOS app that allows users to mark books as complete, plan out books to read, write reviews, recommend books to friends instantly, and maintain comprehensive privacy controls.
Using various research methods to understand and empathize with the user's needs, frustrations, and goals.
⚙️ How?
Identified user pain points related to privacy concerns, lack of customization, and content discovery.
After understanding competitors in the industry, it was time to dig into the habits of 7 different users and empathize with them through 1-on-1 interviews, each lasting around 1 hour.
I wish other platforms had the ability to keep some books ENTIRELY private. For example, I have books about menopause and relationships that I don't want my friends to see. Goodreads lets them see it all. Yuck.
This is my biggest beef with Goodreads is that I almost wish it were more like letterbox. If you've ever used letterbox and that like when you go to somebody's profile. You can on their books, it shows your your five top movies, right? Like lists and stuff like that. I think Goodreads should do something like that because there's almost no personalization to anybody's profile
To complement the in-depth insights from one-on-one interviews, I implemented a survey for the Bookshare project to gather a broader range of perspectives and quantitative data. This approach allowed me to efficiently reach a larger audience, including those who couldn't commit to hour-long interviews, resulting in 33 responses from 50 people surveyed and strengthening the foundation for the project's user-centered design.
I focused on the issues within Bookshares competitor (Many users have had experiences with the platform) to gain insight into their thoughts/feelings.
See the survey here.
To leverage all previous research to define high-level goals and identify priorities for Bookshare.
⚙️ How?
My interview debrief revealed four distinct types of readers. The Personal Growth Seeker (William), The Social Seeker (Sarah), The Competition Seeker (Mia), and The Comprehension Seeker (Landri).
With my personas and must-have features defined, it was time to ideate and visualize how Bookshare can come to life logistically!
Using Figjam, I created a sitemap for Bookshare. When creating my sitemap, I created a brain dump version, rapidly jotting down all of my ideas and thoughts. After reviewing, I reorganized the sitemap and added a legend for easy navigation and for others to review my work. :)
.png)
I created 3 task flows for the main functions of Bookshare.
I drew inspiration from Spotify's approach to music, sketching layouts that emphasized genre-based categorization for books. Here are some of the first sketches of bookshare, but honestly, I went through many different sketches before deciding on a layout. The main
I realized that books often span multiple genres, making strict categorization less effective for users, and we'd need sub genres/tagging of some sort instead. This insight into how users categorize books prompted a revision in my approach for the digitized wireframes.
%202.jpg)
Using Figma, I transitioned my initial low-fidelity sketches into digitized lower fidelity wireframes for all flows. During this phase, I focused on implementing a grid layout, refining typography, selecting icons, and addressing overall UI design aspects.
I then tested these wireframes quickly to validate my decisions.
5 participants engaged with the Bookshare app prototype through an unmoderated usability test. This approach allowed me to gather rapid feedback on usability and user interactions, ensuring that Bookshare's interface aligns with user expectations and preferences from the outset. I measure quantitative things like: how long it took users to complete tasks, # of errors, success rate as well as taking into consideration their qualitative feedback. This testing allowed for a baseline for further testing/iterations.
As I developed Bookshare from scratch and took on the roles of both the branding and marketing teams, I prioritized establishing the UI design of Bookshare and also editing based on feedback from the low-fi designs During this phase, I focused on crafting Bookshare's visual identity and defining its distinctive branding elements.
⚙️ How?
The UI Kit served as a foundation for establishing Bookshare's branding guidelines, allowing for future refinements based on user feedback from initial testing rounds. By working with components, I ensured that any necessary changes could be implemented more efficiently across the design, streamlining the iteration process.
Aesthetic and Colors: The app design incorporates colors associated with reading, such as blue and dark purple, avoiding traditional book-like colors of tan and white. This choice aims to give Bookshare a refined, modern feel different from competitors like Goodreads.
User Environment Considerations: Recognizing that users predominantly read at night in bed or on a comfortable couch (from survey results and user interviews), the app's design prioritizes a darker, modern appearance. This approach aims to reduce eye strain and stress, offering a more comfortable reading experience without harsh blue light.
Using my UI Kit, I applied colors, branding elements, and photos to bring it to life.
With the high-fidelity wireframes prepared, the next step was to validate my assumptions regarding the task flows. I used Figma to craft a click-through prototype featuring basic interactions and animations.
With the high-fidelity wireframes prepared, the next step was to validate my assumptions regarding the task flows. I used Figma to craft a click-through prototype featuring basic interactions and animations.
With my prototype, it was time to validate and test my product to make any necessary revisions.
⚙️ How?
It was time to test, again! I conducted 4 in-person usability tests, and 1 remotely.
Recommend A Book to a Friend
Marking a book as complete
Change Privacy Settings
Issue with the word "read"
Users didn't know if read, was past tense or present tense. Users were stuck marking a book as complete because the word "read" is an irregular verb where all three forms are spelled the same (read / read / read).
Issue with shelf organization
Initial wireframes did not clearly outline how shelves would function holistically in the app beyond a "complete" button. Users were unclear on how to end tasks early, dislike a book, or create custom shelves.
It was time to test, again! I conducted 4 in-person usability tests, and 1 remotely. Overall, the results show significant improvements in usability across all tasks, with higher ratings, faster completion times, and fewer errors compared to the first round of testing on my lower fidelity wireframes. I was sure to test with new users, so that their familiarity with the applications design did not interfere with the test results.
⚙️ How?
The key design change involves implementing a sheet flow when users interact with a dropdown button, replacing the singular "mark as complete" action that flows into a "did you complete this book?" modal popup.
The sheet allows users to comprehensively update their reading progress while maintaining context to the design. I used this in the high fidelity wireframes for swiching privacy controls, but realized how useful and easy it would be for marking the status of a books completion. It's ideal for this short, interactions as it preserves visibility of the main book information and offers a clear dismissal option, enhancing user control. By providing a seamless way to update reading progress without losing context to the design, this approach significantly improves the app's usability.
Additionally, Users struggled to interpret the "Read" button due to its heteronymic nature (Read and read are spelled identically but are pronounced differently and have different meaning). The new button copy improves user experience by providing a more precise and easily understood label for the action, reducing potential errors or misinterpretations.
Throughout the Bookshare design journey, I gained valuable insights at each stage. The process was rewarding, offering numerous learning opportunities!
Thank you for reviewing this case study! For questions, discussions about my work, or suggestions, please email me at hi@kenziefitzpatrick.com.
