Overview

Codhill Press is a publishing company devoted to poetry and prose. I was hired to redesign their website because they were unhappy with the previous site’s design.

Role/Tasks

UX/UI Designer

Competitor Analysis
User Persona
User Flow
Preference Testing
Site Development

Upon getting hired for this job, I visited their old site and made the following quick observations of the most glaring issues.

Old Site’s Issues

  • Few images on the homepage
  • The images for each product were very small
  • The organization of product categories was very confusing
  • Overall uninspired design
  • News section was unorganized
  • Wasn’t made clear that you could purchase products through the site

Objective

Improve the overall aesthetics of the site and increasing book sales by making it easier for users to find and purchase publications.

Competitor Analysis

To start I explored some of the top publishing companies sites including Simon & Schuster, Penguin Random House, Knopf Double Day Books, and Harper Collins. This gave me an idea of some common design elements that are shared between the sites and helped give me an idea of what to include in my own designs.

Simon & Schuster

I made some initial observations about their designs — quickly noting what I thought made them successful, and how they handled the task flow from discovering a book to checkout.

Some things that stood out to me included:

  • A large “hero image” or banner promoting a recent release or seasonal selections(s)
  • A continually updated list of new releases on the landing page
  • An additional list of featured titles as well as a list of categories

Penguin Random House

Harper Collines

  • Each product page contained a simple about section with a list of related titles and an option to add to cart
  • Dropdown menu of categories in the top navigation bar

User Insights

The next step was to gain a general understanding of the kinds of people that would be using the site, which would help me tailor the experience to better fit their needs.

To do this, I asked the client to share any insights about who they believed their targeted demographic to be. I was able to gather the following insights:

  • Majority of users would be over the age of 40
  • Possibly artists or involved in the arts in some way
  • May not be “tech-savy”
  • Many of the publications are bought at gifts

User Persona

After getting a few helpful insights about the potential users I was able to craft a user persona that represented an amalgamation of who I would be designing the website for.

This helped me keep the designs grounded in real world functionality by attaching a face and story to the end user.

User Persona

User flow

User Flow

Now that I had a persona in mind I built out a simple user flow that represented the steps that “Dave” would need to take to complete his task.

This step helped me form a better understanding of how to go about organizing the information architecture of the site.

Building Out the Site

Having gotten an idea of how I wanted to organize the site and knowing what pages I needed to include for my persona to complete his task, I began to build out the site in WordPress.

I decided to use the Avada theme because it would enable me to organize the site in a similar way to the other top publishing companies.

Avada theme

Preference Testing

After starting to build out the site in WordPress, I was stuck with two different designs for the homepage. I was struggling with deciding on which one to go with so I asked the client. Unfortunately, they were unable to decide either way and left the choice up to me. Not knowing which design to go with, I decided to conduct a Preference test.

codhill alternative

Codhill current ipad view

preference test

Breakpoints

Now that I knew which direction to go with the homepage design based on testing, I had to make sure that it would not be compromised if anybody was viewing it on a smaller screen. So I implemented breakpoints to make sure it would be a responsive website for whatever screen users would be viewing it on.

breakpoints

Final Designs

Having made the homepage responsive, I was able to apply that to all the other pages and continue to build out the rest of the website.

final designs

Conclusion

Upon finishing this website I showed if off to the client and they were thrilled with the designs and very happy with my work. Beyond just satisfying the client I knew my designs were successful because within a year of the redesign sales increased by over 200%.

Next Steps

The client was so pleased with my work that they decided to keep me as their webmaster. Since the initial redesign I have continued to add new publications to their site as they’re released as well as updating the landing page’s hero image.