Rachel Lynn

The Book Club - Web Design

Project Overview

This project challenged us to design a single-page website using Adobe XD. The problem I chose to solve with my page is that book-readers need a place to connect with others and share recommendations and discuss books they’ve read. My audience was geared towards avid readers wanting to find community with other readers as well as a focus on younger women. Within the page, I wanted to include features like book quizzes, featured books, chat groups for different genres/books, as well as a book log to keep track of what you’ve read. The ultimate goal was for users to find community with booklovers through recommendations and connections over past books they’ve already read.

Low-fidelity wireframe sketches

Design Challenges

Audience

My audience was more niche, so the website needed to reflect their interests while also maintaining an on-brand, cohesive nature. Photography, icons, color palette, and typography all needed to reflect the brand identity and point back to the audience and user goal.

Single Page

We were only required to design one page of the site, so I had to figure out a way to incorporate all of my features without creating clutter. This is the home page of the site, so the intention and goal of the site should be clear to users as well as easy to navigate.

Mobile

We were also challenged to create a mobile mockup of our site as well. All of the information from the desktop mockup had to be included in the mobile mockup while also maintaining the same ease of navigation and visual flow of information and content.

Moodboard

I started with a moodboard to nail down the attributes that fit my target audience best. For my color palette, I utilized warm, natural tones with just a touch of pink to appeal to the femininity of the users. Books are the primary focus, so I was sure to incorporate a light academia feel to all of my imagery as well as my type. My goal was to create a cozy, inviting environment.

Page Layout

To address the issue of the single page, I used carousels to include more information as well as a simple navigation bar to hint at more pages in the site. I was sure to leave proper space between sections to create breathing room and open the site up more. However, within sections, I placed items closer together to maintain the cozy feel.

Mobile Layout

The mobile mockup proved to be a little tricky as I already had a lot of information in my desktop mockup. I reused the carousels as well as adding a hamburger menu. I also cropped imagery to show the most important parts that fit the brand identity.

Outcome

I am proud of the results of this project. I feel that I was able to address the problem while appealing to my target audience. My site was cozy and inviting with soft feminine touches and a light academic feel that any booklover would fawn over. If I were to publish this site, I feel that it would perform well and become a place of community for all those looking for a “book club.” If I were to continue editing this project, I would like to experiment with my audience – I would try narrowing it to a very specific audience and broadening it to see how this affects performance.