William Rawlings's profile

Penguin Randomhouse - An online book store

Home Page
Buy a Book Page
Category Page
Penguin Randomhouse - An online book store
The brief required the redesigning of the Penguin Randomhouse South Africa website and that the website be turned into an online book store with the objective of regaining some of the market share that penguin has lost to the big online book publishers like Amazon in recent years. 

The site aims to be simulate the experience of browsing for a book in a high end book store, as research conducted on the target audience for online book stores in South Africa showed that the sites visitors were most likely to be over 40 years old and fairly wealthy. This was achieved by making use of dark grey colour blocking in the background areas of the site. Due to these greys being fairly similar to black in hue they appear much more polished and sophisticated than a white background would, but warmer and more welcoming than black. The site also attempts to make the best possible use of its book covers, which are its most important visual assets and the driving force behind many conversions in physical book stores. This was done by placing the book covers inside wide cards which overlap some of the top and bottom of the covers, which allow for the book covers to cover as much of the screen as possible, while still showing all information a user needs to decide if they would like to purchase the book or not (this is now placed on the cards) without resulting in really long, strung out vertical cards. The genre of each book is placed on the top of its card, colour coded in homage to the colour coded paperback books that Penguin used to sell in the past. This has the added benefit of allowing users to tell the genre of a book at a glance, which is important as genre is one of the most major factors that users consider when they are buying books. 
Home page
The home page of the site acts as a display window that showcases what is available across the rest of the site. This was done as users that are interested in something specific are most likely to enter the site at the page of that specific book, so the users who end up using the home page likely do not know exactly what they want to get. This means that showcasing as wide of a variety of content as possible, such as bestseller lists, new releases and critically acclaimed books would likely be effective as there is a higher chance that the user will find something they are interested in. This page also displays a featured author, a section promoting book club picks and a carousel containing news and events that Penguin is a part of. These elements help to break up the carousels and add variety to the page.
Buy a book page
The buy a book page makes use of a large image of the book and a large title, right at the top of the page, as the cover and the title are the most important things with regards to the first impression that a book makes on someone. Underneath the title, the author of the book, a summary of what the book is about and then the star rating and prices of the different formats are listed. This information is structured this way as users often take their time when choosing a book to buy and they generally care more about the books blurb than its star rating, the only exception being when the star rating is abysmally bad. From this point the user can decide if they would like to add the book to their cart or to their wish list. If the user is still undecided they can scroll down and see what other users thought about the book in the reviews section. If the user scrolls to the bottom of the page they will find carousels containing books by the same author and books that are recommended for them based on their past browsing behavior on the site. There will also be a jump link that can be used to bring the user back up to the top of the page. The carousels at the bottom of the page function as a way to keep the user on the site and increase the chances of making a conversion. The jump link also functions as a nudge to jump up and purchase the book.
Category page
The categories page makes use of a filter system, allowing users to filter out the content that they are not interested in using tags. Books meeting the user’s criteria are displayed in columns four wide and four deep and are broken up by featured artists and featured collections sections. Each category / genre is colour coded in the same way as Jan Tschichold's original Penguin book covers were in the past, both as a tribute to Penguins rich past and as an extension of the genre colour coding system used in the book cards. This is done using a colour coded page header and the colour of tags at the top of each genre page. The page shown below falls under fiction, which has been colour coded orange as Penguin has traditionally used orange to denote fictional works.
Site navigation
The design makes use of a simple, fixed orange navigation bar at the top of the screen. It aims to bring some of penguin’s branding and corporate colour into the page without interfering / competing with the sites visuals too much.

Users are able to find books of a specific genre by using the megamenu appended to the categories link. The design makes use of a mega menu as grouping all the different categories together in one place and categorising them into makes it easier for users to find what they are interested in.
Categories Megamenu
If the user is a hardcore bookworm, or is simply interested in book clubs and literary news, then they can view the book club picks, the news and events that Penguin is involved in and find book clubs near them in the Book Club dropdown. 
Book Club Dropdown
The log in and sign up links in the nav open forms within the megamenu, meaning that the user does not have to leave the page in order to log in or sign up.
Log In Dropdown
Sign In Page
How the nav changes responsively on tablet and mobile
When scaling to mobile devices the links in the navbar are collapsed into a dropdown menu and the penguin logo is moved to the middle of the navbar, referencing the famous penguin book covers designed by Jan Tshichold in the 1960’s. 
Penguin Randomhouse - An online book store
Published:

Owner

Penguin Randomhouse - An online book store

A redesign of the South African Penguin Randomhouse website, re-imagining the site as a book store able to compete with global giants like Amazon Read More

Published: