WeRead Website Design
For this project, I oversaw the research and ideation process. Tools that were used include Figma, Miro, InVision, Google Slides, and Adobe Creative Suite. The main deliverables were a high-fidelity Figma prototype and a presentation slide deck.
Project Overview
WeRead is an online platform designed for literary enthusiasts to connect, engage in discussions about the books they are currently reading, and facilitate the sharing of physical books within the community.
Challenges
In-person book clubs present several challenges for participants. These include difficulties in coordinating meetups due to conflicting schedules and the inconvenience of lengthy commutes. Additionally, some members may feel reluctant to engage in discussions, resulting in unbalanced conversations.
Solution
Efforts were focused on developing a website that enables users to join or establish their own book clubs, facilitating both participation and leadership in book discussions. This online platform provides a more convenient alternative to traditional in-person book club meetings, enhancing engagement and accessibility.
Researching
To gather qualitative data and obtain a comprehensive understanding of different types of readers, I conducted a survey using Google Survey. The survey included 10-15 questions related to reading habits and book club participation, such as whether respondents enjoyed reading, if they had ever joined a book club, and how frequently they read. I received 175 responses, which provided valuable insights. Here is a brief overview of the findings.
User Interviews
I conducted six user interviews to ascertain whether or not in-person book clubs presented significant inconveniences and what kind of challenges were posed by physical book storage. I also wanted deeper insights into why people enjoy reading and their reading habits. The interview results revealed that participants preferred obtaining physical copies of books, as well as some e-books. Their passion for reading often led them to discuss books and their experiences with others, such as friends or family members. These interviews provided me with a clearer understanding of how individuals felt about book clubs, the challenges they faced, and potential solutions to these problems.
User Persona
Our user persona is a 32-year-old male, a professional designer residing in Portland, Oregon. He enjoys reading books on laid-back Sunday mornings, often spending them with his cat at his side.
User Insight and Problem Statement
My goal is to develop a website that provides users like Hunter with a secure and interactive platform. This platform will facilitate easier book discussion gatherings and offer the option to borrow and share books with fellow readers.
User Insight Statement
Problem Statement
WeRead is an innovative online platform that reimagines the traditional book club by enabling reading enthusiasts to connect and engage with one another about books. This platform offers users the unique opportunity to share and borrow physical copies of books. In-person book clubs often present challenges such as coordinating schedules, commuting, and managing group dynamics. Our goal is to create a platform that provides a more relaxed and engaging experience for readers, facilitating meaningful interactions and allowing users to share their opinions throughout their reading journey.
Ideation
The primary user requirement focused on facilitating book discussions and addressing the challenges associated with traditional book clubs. Additionally, having a book borrowing feature would be a valuable enhancement that WeRead can provide to its users.
Solution Statement
This solution facilitates more consistent and convenient, and potentially more engaging, discussions by transitioning book club interactions to a more accessible platform. Additionally, it offers users like Hunter the option to borrow and lend books, thus eliminating the need to purchase and store physical copies.
User Flow
I created two different user flows, one for creating a book club and one for borrowing a book.
Wireframes
Home Page
For the home page, I wanted to feature a prominent hero banner at the top. Below the banner, we should recommend some of the most popular book clubs, enabling visitors to join or create a book club easily. Following this section, we will have a borrowing section that directs visitors to the borrowing page.
Book Club Landing Page
For the book club landing page, I want to include customization options at the top for the user's book club. Incorporating a calendar feature will help users track the dates and times of book club activities. Following this section, we will provide recommendations for books that the book club owner can select. The left side of the page will be dedicated to connection and interaction, allowing book club members to freely chat and engage in discussions through the chat function and forum.
Book Borrowing Page
For the book-borrowing page, popular books will be prominently displayed at the top, allowing users to easily click and borrow them. Additionally, a search bar will enable users to find specific books and borrow them from the lenders listed.
User Testing and Iteration
"Following two comprehensive rounds of user testing, each involving five participants, I found several changes based on user feedback that could enhance the overall user experience of the website."
Prototyping and Changes
Home Page
In the initial wireframe, the hero banner presented challenges in determining suitable content, leading to user confusion. To address this, I redesigned the landing page to clearly convey the purpose of WeRead and included two calls-to-action (CTAs) for users to join or create book clubs.
Landing Page
I removed the book browsing section and merged the chat button into the calendar in order to make it easier for users to manage their events and communicate with others in a simple way.
Borrowing Page
I incorporated a concise landing section to educate users on the book-borrowing process and to clarify that this feature is exclusive to members. Other changes included relocating the search bar to the top of the page, allowing users to search for desired books immediately while also including an arrow in the search bar component to indicate the presence of a clickable button for navigating to the next page."
Final Figma Design
Home Page
In the end, the overall design is cohesive and functional thanks to the constructive feedback and research done in the beginning. Some changes for the future can be considered:
- The book-borrowing feature could be designated as a member-exclusive function to enhance convenience for borrowers while ensuring the security of lenders' books. However, several details require further clarification, including pricing, member benefits, leader benefits, and policies that must be clearly presented on the website.
- There's room for implementing interactive features for book club members to facilitate discussions on their readings, such as video chat, an annotative book feature, and emoji sharing.