WellRead Website Design

This is a 3 person project. I was the major UI Designer and I also participated and contributed in the research and ideation process.

Expertise

UX & UI Design, Web Design

Tools

Figma, Miro, InVision, Google Slides, Adobe Creative Suite

Deliverables

High-fidelity Figma prototype, presentation slide deck

Members

Hiko (me), Victoria, Dahee.

Project Overview

WellRead is a website for reading enthusiasts to come together where they can discuss the books they’re reading and share physical books among each other.

Our Hypothesis

We predicted that reading enthusiasts enjoy physical books above all else and that they enjoy discussing those books with others that share their passion. In addition that traditional book clubs present inconveniences for people due to having to commute, not finding mutual availability and inconsistent turn out which negatively impact the discussion.

The Problem

Readers face a number of problems with in person book clubs. Some of the problems include: having a hard time meeting up due to everyone’s busy schedules, long and difficult commutes. Also, some people were shy and not participating much in the discussions which led the overall discussions unbalanced.

The Solution

Our team focused on creating a website that allows users to join or create their own book club where they can engage or lead book discussions. The website platform creates a more convenient method of engagement contrary to tradition in person book club meetings. 

Research

Survey

In order for us to get qualitative data and a general picture and get what type of readers are out there, we conducted a survey. We made a survey via Google Survey and it had about 10-15 questions about reading and book clubs. Some of the questions we asked were if people liked reading, if they ever joined a book club, how often they read, etc...
(We received 175 result of surveys, here is a brief view.)

User Interviews

We began with 6 user interviews to validate that in-person books clubs did present inconveniences and that physical book storage was an issue. We wanted to get more in depth answers about why people like reading and more about their reading habits. From our interview results, we found out that people liked getting physical copies of books and some e-books. But, their passion for reading led them to talk about books and their readings with someone. We noticed that people liked to talk about it whether it was with a friend or family member. This definitely gave us better insight on how people felt about book clubs, problems, and a more clear problem solving idea.

Competitor Analysis

We looked at four sites for our competitor analysis.
Bookclubs, GoodReads, BookCrossing, Bookmooch

User Persona

Introducing Hunter Hayes!

Our user persona is a 32 year old male. His name is Hunter Hayes. He’s a graphic designer based in Portland, OR and reading books is his passion. He’s the classic slow Sunday, drinking coffee while reading a book kind of guy.

User Insight & Problem Statement

User Insight Statement

We want to create a website for users like Hunter to have a safe, interactive platform that allows him to have easier book discussion gatherings and gives him the option to borrow and share books with others.

Problem Statement

WellRead Is an online platform that is a new take on a traditional book club where reading enthusiasts can easily connect with others about books. It allows users the unique option to share and borrow physical copies of books with one another. Currently, in person book clubs present inconveniences like: scheduling with other members, commuting, and incompatible group dynamics. How might we make a platform that allows readers to have a more casual experience that accommodates more fruitful engagement and gives users the ability to share their opinions throughout the life of the book?

Ideation

Brain Storming

After collecting all the points, it's time to think of a solution base on the research results. Then we put similar ideas into the same category. We voted for the best ideas as a group. The major requirement from the users is clearly biased to book discussion and solving the inconvenience of book clubs. Having a book borrowing feature would be a bonus feature that WellRead can provide to our users.

Solution Statement

Our solution created an opportunity for more consistent, convenient and hopefully more engaging discussion by moving book club interactions to a more accessible platform. It also presented Hunter with the option to borrow and lend books so he can avoid having to buy and struggle with where to store them. 

User Flow

To approach the solution, we need to create two different user flows, one for creating a book club, one for borrowing a book.

Wireframe

We collaborated everyone’s paper sketch ideas into a wireframe. We majorly focused on the Home page, book club landing page, and the book-borrowing page.

Initial thoughts for design

Home Page
For the home page, we think there should be something featuring a hero banner on the top. Below the banner, we want to recommend some of the most popular book clubs, so that visitors can join or create a book club from there. The next section is the borrowing section that leads visitors to the borrowing page.

Book Club Landing Page
For the book club landing page, we want to include some customization of the user’s book club on the top. We think adding a calendar there could be very helpful for users to track the book club’s activities date and time. Then we have some recommended books for the book club owner to select. The left half of the page is for connection and interaction for the book club members so that everyone can chat free and discuss with the chat function and forum.

Book Borrowing Page
For the book-borrowing page, we had the popular books on the top so that users can click to borrow right away. There’s also a search bar for users to search for the book they want and borrow the book from one of the lenders on the list shown.

Style Guide

Our style guide captures a calm, warm and vintage feel.  We choose a neutral and warm color scheme and a font that is elegant and equally as vintage feeling. Rounded edges for all of our frames and buttons adds 

Color

Pewter
#797880
Burnt Sienna
#AB512E
Beige
#E6CDB7
Cream
#F9F6F0

Typography

Heading H1 - Josefin Sans

Heading H2 - Josefin Sans

Heading H3 - Josefin Sans

Heading H4 - Josefin Sans

Paragraph - Josefin Sans

Buttons

Button
Button primary - Default
Button
Button primary - Hover
Button
Button primary - While Pressing
Button
Button secondary - Default
Button
Button secondary - Hover
Button
Button secondary - While Pressing

User Testing & Iteration

After two rounds of 5 user tests, here are some of the changes base on our users’ reflections that we think could help on improving the user experience of our website:

Prototyping & Changes

Home Page
In the wireframe, there was a hero banner, but we had a hard time figuring out what content should be featured in there, which also confused our users. So we redesigned the landing page that helps on explaining what Wellread is, and also added two CTAs for users to join or create book clubs.

Book Club Landing Page
We removed the book browsing section and merged the chat button into the calendar, so that users can manage their events and communicate with others in one simple view.

Book Borrowing Page
Added a small landing section that helps users understand how the book-borrowing work and informs them that this is a member-only function.
Moved the search bar to the top of the page, so users can search for the book they want on their first action.
Added an arrow to the search bar component so that users understand there's a button to click to trigger to the next page.

The Final Figma Prototype

Future Developments

- We will keep working on completing the website design for every pages, especially the mobile version’s book club landing page.
- For the book-borrowing function, we are thinking of making it a member-only function that can bring convenience to the borrowers and at the same time secures the lender’s books. However, there’re more details that need to be settled, for example, the pricing, member’s benefits, the leader’s benefits, and some of the policies that need to be shown on the website.
- We will create more interactive elements, such as animation and other UI elements.
- We would also put more creative or more interactive features for our book club members to discuss their readings (video chat, annotative book feature, emoji sharing, etc)

This is WellRead. Thank you for viewing!