OVERVIEW
PROJECT TYPE
Visual redesign
Course project
SCOPE
Four pages (desktop & mobile views)
DATE
Feb-Mar 2023
DESIGN PROCESS
The existing site is functional, but feels quite crowded and jumbled. It’s hard to know where to look first because many of the elements carry roughly the same visual weight. The overall feel of the design is dry and uninspiring.
I chose to redesign the marketing page (before a user signs up), homepage, my books page, and the recommendations page. The marketing page and homepage in particular are quite cluttered, with lots of small text and links thrown at the user.
MAIN ISSUES TO ADDRESS
lack of visual hierarchy & flow
cluttered & dry feel
inconsistent use of colors & layouts
PROJECT GOALS
Based on my audit of the existing site, I had three main goals for the redesign:
GOAL 1
GOAL 2
GOAL 3
GOAL 1
GOAL
My first goal was to bring a clear, intuitive structure to the site to eliminate the cluttered feel of the existing design.
STRATEGY
Implement a grid system and utilize color to differentiate content sections.
PROCESS
I began by deconstructing each of the existing pages into their basic shapes and then used those building blocks to think through different options for content groupings and page hierarchy.
After exploring several grid options, I found that a columnar grid was the best choice to accommodate the site’s dynamic content.
From there I refined my mid-fidelity designs. I utilized an 8pt grid spacing system for the desktop pages and a 4pt grid system for the mobile screens.
ORIGINAL HOMEPAGE
LAYOUT & GRID EXPLORATIONS
GOAL 2
GOAL
Books are such a rich source of knowledge and imagination, and my second goal was to tap into that feeling for this redesign.
STRATEGY
Introduce colors and typefaces that are both elegant and warm.
PROCESS
I used a moodboard to collect inspiration and develop my ideas of how the site might look and feel.
I chose a rich green to bring depth to the design and a dark orange paired with a light cream color to add coziness and warmth. It was also important that these colors partnered well with a wide variety of genres and cover designs.
For the headings, I selected Gentium Basic - a classic, bookish font with subtle rounded edges which give it a friendly feel.
MOODBOARD
COLORS & TYPOGRAPHY
GOAL 3
GOAL
Another important goal was appealing to readers of all different genres, from fantasy and mystery to non-fiction and business.
STRATEGY
Create a flexible design that accommodates dynamic content and spotlights the book covers.
PROCESS
During the mid fidelity stage of the project, I explored ways of emphasizing the book covers through sizing and placement. On the homepage I chose to offset the book covers from the update cards to make them more prominent and dynamic. The neutral color of the cards complements a wide variety of book covers and the flexible layout accommodates different content types.
As I moved into high fidelity, I added subtle hover interactions as well as drop shadow to give the books some weight and make them feel more like real objects.
During our critique session I presented my designs to the class, walking through my goals and process. The feedback from my classmates, TAs, and professor helped me to identify several issues and areas for improvement which I was able to then address.
Examples included:
the buttons on my mobile screens were small and difficult to use
the genre filters on the recommendations page looked a bit cluttered and messy
the positioning of “like” and “preview book” below the comment area made it look like they modified the comment, rather than the update itself
My classmates also provided positive feedback on my design decisions regarding color and overall structure. This was encouraging and gave me confidence that my design was achieving its goals.
CLAIRE NIEMEIER
