Sonder is a mobile app designed to help people find new books to read, based on the books in their collection. The primary search function within the app allows users to discover lists of books that are related to books they already like, created by people they follow. This provides a method of book discovery that is centered on human relationships and social interaction.
Go straight to the Figma PrototypeTOOLS USED
Figma, Adobe CC, Blender
SECONDARY RESEARCH
I've always been interested in how developments in internet technology affect peoples access and exposure to arts and culture. I found some especially interesting reading in a white paper focusing on AI's impact on music recommendation, and wanted to explore this idea further in the world of books;
"Media and cultural goods like music, books, and video that have traditionally been distributed through radio and televisions stations, cinemas, public libraries, and retail stores now circulate on digital platforms and services like Spotify, iTunes, Pandora, YouTube, and Netflix, where a variety of AI-driven technologies shape how this cultural content is packaged, presented, and discovered."
"While recommendation algorithms are always socially and culturally inflected, then, relying on overly generalised demographic and identity classifications simplifies more complicated and overlapping categories with the risk of reinforcing rigid, simplistic, and misleading identitarian boundaries. The algorithms can privilege content or relationships that are well-represented and known, already proven and popular over the novel, innovative, and different. When these assumptions get fed back into databases and algorithmic inputs, they perpetuate and deepen essentialist suppositions about identities, practices, and tastes in opaque ways."
"Concentration of curation and recommendation should concern us since it increases the powers of the platform conglomerates vis à vis both creators and consumers; it also impacts negatively on the possibility of unearthing diverse content, thereby disadvantaging local, national, and alternative cultural communities."
During further Secondary Research, I found some interesting statistics regarding the sales of books in Canada and the US;
After this initial research phase, I was able to hypothesise that providing readers with an improved and more personalised method of book discovery would help them to discover more accurate book recommendations and increase their enjoyment of reading as a whole.
In order to further understand the problem space, I conducted Primary Research in the form of 3 in-depth interviews. I asked questions with the goal of uncovering pain points, motivations, goals and behaviours surrounding people’s current experiences of reading books and discovering new authors. Through synthesis and analysis of the interview data, I was able to establish some key themes and insights;
The key themes and insights appeared to be those of Discovery, the Format/Platform, and the Social aspect of book recommendation. The question of discovery itself was integral to the problem space, so that formed the basis of a How Might We question and subsequent investigation of a solution:
How might we help millennial readers by providing a more appealing and personalised method of diverse book discovery?
The additional themes that were identified are provided supplemental touchpoints for solution ideation, and were kept in mind while developing a persona and experience map.
The opportunities presented by James’ current experiences provided key touchpoints to refer to in creating a series of User Stories and Epics, and moving towards the primary task flow of a digital solution.
USER STORIES & TASK FLOW SELECTION
In exploring User Stories to provide context for possible digital solutions, the scope was expanded beyond the main persona to incorporate a holistic view of the book-searching process. This meant thinking about the Problem Space from the perspective of additional user roles such as authors, publishers and booksellers. Four main Epics were established; Searching, Purchasing, Promoting and Tracking/Listing. Although each of these may form part of the eventual solution, the most important focus for the scope of this project was the Epic of Searching.
Sample User Stories: Searching
Keeping my interviewees’ pain points in mind, it felt important to focus on the actual activity of searching for a book for the development of a task flow, paying attention to the human-centered factors that make this process enjoyable when browsing in a bookstore or getting a recommendation from a friend. My task flow focused on two main goals; Finding a new book to read, and previewing the book:
Based on the preference of the persona for new book recommendations coming from friends and trusted sources, the task flow created a starting point for ideation on how a user might access this content through a digital platform, while retaining the exploratory feeling of browsing at a local bookstore. It was time to begin sketching some possible solutions.
As the sketches were developed into an initial prototype, I tried to work towards something that would provide an intuitive experience for the user.
USABILITY TESTING & REVISIONS
With the first prototype made, I was anxious to test the design, and also a little apprehensive at how the lack of imagery might impact the results. With such a content-based platform, I think there's definitely an important role played by imagery in the user's experience and understanding of the task flow. Seeing the same book cover move across different screen locations would add a lot of context in this scenario.
Testing was conducted in 2 rounds, with 5 test sessions each round. I analysed success rates of 5 key touchpoints through the task flow, and also probed for additional qualitative feedback.
Test results were generally positive, and most changes necessary were related to clarifications in the copy, and adding some additional functionality to round out the realism of the prototype. The Explore screen was definitely the key focus for revisions, as this set up the user's understanding of the search process and functionality of the product.
Example Revisions - Explore Screen
Changes to the Explore screen included adjusting the layout for clarity, as well as rewriting and repositioning the instructional copy in order to prioritise and better explain the value proposition of the key search function.
UI Development & Visual Identity
In developing a visual identity for the product, I wanted to explore the central themes of exploration, connectivity, and literary/artistic content. Abstract art and imagery featured heavily, as it felt important to avoid being too prescriptive in tone due to the diverse nature of the content. I began by creating a Mood Board for stylistic and colour inspiration.
The UI and brand colours that I chose are minimal, with a focus on off-whites and softened blacks to create an optimal reading experience. With colour being used fairly minimally throughout the platform for a calmer visual experience, the primary colours are mostly used for interactive elements and CTA buttons. Accent Colour is used for a navigation indicator and secondary CTA actions such as liking a list. Colour combinations were tested to ensure they met the WCAG 2.1 AA guidelines for accessibility.
Two typefaces are used in the app. Lora is a contemporary serif used for display and body copy, and Encode Sans is a sans-serif for interactive copy such as button text, form inputs, and system feedback. Exploration of typefaces had to take in to consideration the fact that typography would be a key component of the UI in general, with an easy-to-read font being particularly necessary for book preview screens.
A wordmark was designed that included elements of both the literary and abstract inspiration themes. I wanted to expand a little on the abstract shapes that were present in the mood board, and especially liked the inclusion of imperfect edges which I felt gave the wordmark a more human and less digital feel:
HIGH FIDELITY PROTOTYPE
The final prototype was created through iteration and implementation of the visual identity into a high fidelity UI system. In addition to this, I developed systems for various aspects of interaction animation to establish a sense of immersion in the feeling of exploration. This included using Blender and Adobe After Effects to build and animate a 3D model of a book opening. Although this took some time in an already busy process, I felt it created a valuable sense of surprise and delight, and provided a nice connection for the user to the feeling of opening a real physical book.
View the prototype in Figma
For further development of the product, I designed a responsive marketing website for both desktop and mobile use. The visual style remained similar to that of the prototype, with an aim to clearly explain the core value proposition of the design.
I also explored the idea of how the app might exist on other platforms, such as an iPad. This opened up the possibility of expanding on some functionality, as users in this context may want to purchase and read a book within the platform instead of just previewing. I also thought about an addition of a 'temporary list' feature, or 'stack'. This would give users the ability to collect books in a browsing list, much like the way one might end up carrying around a pile of books after spending a few hours in a bookstore or library.
KEY LEARNINGS & NEXT STEPS
Of all the takeaways from this project, one of the most impactful for me was the importance of User Testing in fully developing an idea, and ensuring that the solution remains effective and in line with the problem you're trying to solve. If I'd had more time, I would probably have set up another couple of testing rounds throughout the process. I'm very grateful however to all the feedback that was available from educators and classmates at BrainStation, which was integral to the creation of this design solution.
In terms of next steps for the app, it would be great to be able to develop some additional functionality to round out the design. There's a whole social side to the solution that is only hinted at in the prototype, and I also think it would be important to consider additional search functionality. There's more than one way to find a new book, and presenting a level of flexibility of use to the user would be a key component of the experience of this product.
.png)
.png)
