Alex MacDuff

GoodReads

See the project on GitHub

Timeframe: 5 days

Project Description

GoodReads is a popular literary website where you can create reading lists, review and discuss titles and get suggestions for what to read next. For one of my UI Design projects at The Iron Yard, I was tasked with redesigning three pages of the site to be more organized and user friendly.

There were two main goals for the assignment:

  • Gain experience working on a site with a lot of content
  • Create a pixel perfect mockup using Adobe Illustrator

Organizing content took a considerable amount of time. Establishing heirarchy was crucial in organizing all the different elements on each page. Use of personas helped in making decisions about what features were most important and where they should be displayed.

GoodReads Homepage

Personas

For this project I created three user archetypes, or personas. Each represented a different type of GoodReads user, and each had a unique set of values and goals:

Matilda, 23
She's just out of college, so she's starting to read for fun again. She has an entry level marketing job. She wants to see what her friends are reading and what's popular in her favorite genres, and she has a goal of reading 30 books this year. She likes to read young adult fiction and in her free time she rides a unicycle.
Jennifer, 36
She has two kids and homeschools. She doesn't have much time to read, so she likes to use the site for recommendations and reviews (mostly from friends) and making lists. She likes historical fiction and has a Civil War crush.
David, 42
Single and middle aged, he works at a non-profit organization. He travels a lot for work, so he reads on the plane and in airports. He goes through books fairly quickly. He uses the site to keep track of what he's read, and to get recommendations for what he should read next. He enjoys reading nonfiction and biographies, and likes to play golf.
Personalized "My Books" Page

Keeping each of these users in mind helped as I organized the information on the site. For example, Matilda, Jennifer, and David all use the GoodReads to get book recommendations from friends. With this knowledge, I made prominent the Updates section with information about what titles friends are currently reading / would like to read and how they're rating them.

Matilda also has a goal of reading 30 books in a year; that's important to her. But that's not as important to Jennifer or David, so while I still included this feature on the home page, I made it less prominent on the page by placing it in the sidebar.

Left: Updates, Right: Profile Page

Challenges

For me, one of the biggest challenges was making pixel perfect mockups. Although I value precision and attention to detail, in my freelancing work it was never necessary. I worked alone, so when I made mockups they were open to change. It's not that I was sloppy, I just liked designing in the browser. Additionally, there was a part of me that wasn't completely sold on pixel perfection, as it doesn't really go hand-in-hand with responsive web design (which I firmly believe in).

During the course of the project, however, I was reminded that working alone is rare in most companies. Usually a designer creates a mockup and hands it off to a developer to build. So it's important that everything be in its right place. Even if you're working side by side with a developer, it is still important to be precise with mockups; It just makes the process easier. As a designer, only you know what's in your head, and the only way to communicate that visually is to mock it up. And if you want your design to come out the way you intended, you have to be precise.

Previous Next