.png)
.png)
Overview
NerdSociety is a book reading mobile app and platform that instantly recommends and enables sharing and saving books.
The app also provides a social network that lets users connect with others based on mutual preferences for reading materials. The app is like Spotify for books.
As the pandemic has turned our attention to more indoor activities, I have been particularly interested in the idea of humans gaining more invaluable resources from reading without detaching from social interactions.
Timeline
3 week (+80 hours)
Role
UX/UI Designer
Skills
User Journey Mapping, Storyboarding, Information Architecture, Crazy 8s, Wireframing, Visual Design, High-Fidelity Prototyping
Market Demographics
Due to the pandemic lockdowns, E-books and reading apps have massively bloomed ever since 2020, where data representing a nearly 30% increase in e-reading downloads.
Nearly 50% of e-reading consumers was in the age range of 18-34, and users in 18-24 took up more than 25%.
.png)
Units of e-books purchased by user age
Competitive Analysis
While gathering data for domain research, I looked in to the current book reading platforms and applications. I compared and contrasted visual styles, functionalities, and goals of Goodreads, Kindle, Wattpad, and a less mainstream app called Litsy.
Amazon Kindle
Pros: Excessive resources of books and books are less expensive
Cons: The mobile app has limited functionality
Goodreads
Pros: Easy to keep track and update / New books are recommended from similar tastes
Cons: The reviews are unreliable / the mobile app is cluttered with categorization and usability issues
Wattpad
Pros: A platform where everyone can share writing skills
Cons: Overwhelming resources which affect appetite for studying and academic readings
.png)
Litsy
Pros: Emphasize the social aspects of reading including connecting with others readers
Cons: There are superficial readers as the app is designed as a social network which uses the "litfluence" point system to validate users' academic knowledge and potentially take away the purpose of reading
User Interviews
I conducted semi-structured interviews with a mix of 10 participants who are using e-reading platforms or have joined at least one reading network. The information helped determine the users’ experiences with e-reading and their interests in building a reading network and maintaining reading habits. This helped frame the design process by directing my interests to specific user needs and pain points.
Some key insights from the interviews:
Affinity Map
Through the interviews and user insights, it was indicated intellect, trust, consistency and curiosity are the important principles in building a social network for book readers. These design principles helped me guide my design process.
Personas
Based on research findings and qualitative interviews, I created two types of personas that represented the main user group’s common needs. The identified user persona emphasizes the frustrations and goals of e-readers had while finding books of interest and connecting with other readers.
.png)
.png)
Journey Map
Based on the created personas, I made a user journey map that tracked users’ route in finding recommended books based on reading activities from friends to adding the books to their personal collection. The journey map helped me identify important emotions and goals that ground the final design to the targeted users.
Storyboard
After exploring different ideas based on research synthesis, a storyboard was created to help identify the scenarios when the users use the app and the important features that the product must have, as shown in the information architecture. This helped reflect the information from the interview and visualize the direction for the user flows and wireframes.
Information Architecture
After getting an understanding of the scenarios when the user will be in based on the storyboard, I created a diagram of all the screens that will be included in the final design. Having an information hierarchy helped me make decisions that reflected how the product was going to be and assisted me when I made paper sketches and wireframes.
NerdSociety can be divided into 2 parts:
-
a social feed that keeps users updated of reading activities from friends
-
a personal library and collection that allows users to manage their reading materials
.jpg)
Paper Prototype
Referring to the information diagram, I created 8 quick paper sketches to focus on key tasks of the user flow: an explore screen that let users browse books based on different algorithms (trends, friends’ activities, books recommended by previous readings), a social feed that let users follow activities of friends, and a social profile to keep track of connections and edit personal collections. From the sketches, I created low-fidelity wireframes in greyscale to have a basic design that can be used for usability testing and high-fidelity prototypes.
_heic.png)
_heic.png)
Wireframes
Based on the user feedbacks from the usability testing, I was able to implement different features and improve the concepts of the product that best benefit the target user needs. The wireframes were used as an outline of the application and how its elements would be included for users’ interaction. After several iterations, I was ready to create high-fidelity mockups.
Visual Identity
I created a logo that captured the essence of a "nerd", combining the visual cues of a pair of glasses and a book to suggest the idea of a person who is invested in reading.
.png)
High-Fidelity Prototype
Given the feedbacks and critiques from my peers and potential users, I created the high-fidelity mockups for the NerdSociety mobile screens that represent how the users would interact with the product. The overall design concepts focus on representing a platform for book readers to find new books and network with people with similar tastes.
Explore Screen
.png)
.png)
The explore feed displays different books based on recommendation from friends' readings, similar taste and popular choices. The benefit of having a social network helps create an algorithm that's linked to one's personal library. Readers can discover more books aligned with their interest based on people they follow.
Personal Library
The design of the library screens was inspired by Spotify music library and Pinterest pin board. Users can save and organize books and topics of their choice into different collections. Each screen is organized neatly by time and progress and can be customized with the filter icons.
Social Network
.png)
The social feed is treated similarly to a social media feed which displays activities from friends - books or collections of books they share or create and feedbacks on books they read. The activities from friends allow users to gain feedbacks from their personal connections which make feedbacks more reliable.
Social Profile
.png)
The social profile is a social display for users' personal library, which allows others to view their activities and collections of books they create and save.
Demo
Reflection
As the pandemic pervaded globally, I have immersed myself into reading a lot more and I know that more people have also involved reading into their daily habits. Reading unavoidably helps people cope with their lack of interaction and provides a healthy communication with themselves and the world. I first came up with a social media for book readers inspired by the idea of building a network for people who wants to advance their reading habits without taking away the essence of the habit itself.
​
As a designer, this passion project gave me the opportunity to refine my skill sets in framing targeted users, project management and design tools. Through the design process, I was able to push myself creatively and feel more responsible towards users. I have also learnt that creating an end-to-end application is a strenuous process where each step shapes the design decisions and direction of the application. However, the hardships paid off as I learnt and built a solid foundation for the upcoming challenges. If I have more time on this project, I will build more features that allow auto-sort based on accumulated downloaded items and connections.
.png)