Suzanne Collins Books

A coursework project to implement design ideas

Overview

How do could I redesign a famous authors website?

Suzanne Collins is an author and television writer who is known for her series The Hunger Games. I worked individually on a challenge to redesign a new website for Collins.

Role: Concept, UX Designer

When: Aug - Dec 2019

Understanding

The initial impression was that the website appeared outdated, lacked useful organization, and was missing key features. These issues may drive away current and potential users. Therefore, it needed to further examine the usability and design of the site to inform a redesign. The redesign required 4 pages, including the home page.

The Problem

To improve the usability and user experience of website for the first time users

Research

In this project, I conducted surveys of current and potential visitors to Suzanne’s site. This allowed us to develop an understanding of the target audience. Our survey included questions about demographic information, tech usage, and familiarity with the author and the website itself. 

Poor Design

Too many testimonials

Size and alignment

Purpose of the website

Lack of typography

How big is this organization?

The author is famous for writing books 

and her team works for the organization.

What is the code followed by organization?

Branding, consistency, merchandise, clear communication and expectations

What is the target device?

Desktop is primary, and phone is secondary

Which page users use frequently?

Homepage, information about the books and merchandise, e-commerce

The SWOT analysis organizes the expectations and goals of the website which follows strengths, weaknesses, opportunities and threats

What are the strengths of current website?

Authors reputation, well written famous books, responsive website

What are the weaknesses of current website?

Improper arrangement of webpages, lack of eye catchy images and user reviews, unavailability to shop books. Homepage is not intuitive for navigation and no SEO optimization. 

What are the opportunities for current website?

Website can have regularly updates and unique content. Sell books and related merchandise through the website (autographed books, caps, clothes, etc). A modern and fresh design, with flat icons and sections, single word-press style page layout with easy navigation. 

What are the threats of current website?

Competitive websites that show the same content about the author and her books such as Wikipedia, Amazon, etc. Security with no https that provided to the website. No declaration of policies. 

User Identity and flows

I conducted my own research into competitor websites and best practices for author websites. I synthesized the results into a report for the project. To summarize, my research revealed users that may be familiar with the author’s recent work, avid readers, librarians, journalist, and press. Based on the user research I conducted and created personas to represent users of Suzanne Collins website.

Navigation flow

Heuristic Evaluation

Conducting a usability heuristics evaluation using Nielsen guidelines

I used the five-point scale recommended by the Society for Technical Communication’s Usability Group. We found the following areas that needed to be addressed:

Aesthetic and Minimalist Design

The design aesthetics are minimal and do not have a lot of customization from the browser default. The site includes large amounts of text that users are not likely to be looking for. Consequently, it results in a cluttered appearance. It also makes it more difficult for users to find the information they do need.

Recognition rather than recall

The site doesn’t provide enough context for much of the content and structure of the navigation.

Consistency and standards

Menu links don’t look any different than the bold text on the site, so it’s not clear what’s actually clickable at first glance.

Information Architecture Evaluation

Navigational feedback

Navigation to information that users are most likely to need

A site map

Sorting and filters

Home page scrolling

Usability Evaluation

Implementing usability test to conduct on the original website design. I put forth a few scenarios and subsequent tasks for this test based on different users and information they might be looking for. My goal was to include scenarios that would help reveal any mismatches between the current design and how users would expect the site to function. 

Process

Creating new layout for Collin's website

I iterated through different designs to figure out how to present the information in a condensed and easy to understand manner. The secondary functions of the web page like store and movies were to be accessible while still keeping user in the main focus.

Visual Design

Suzanne Collins- Hunger Games

I wanted an aesthetic that draws inspiration from Hunger Game's pastel color palette. I also incorporated color transitions in the visual design to represent how each new book design in Hunger Games smoothly transitions into another.

Logo Making

A book and ink pen would be beautiful combination for authors logo. I choose to use brown color and keep the nib and books in white color which will make the website look decent. 

LogoMakr_2nPTfV_edited.jpg

Solution

I wanted to design a cultural and lifestyle publication that promotes and maintains engagement through an entertaining, interactive consumption experience, leveraging Suzanne Collins's existing reputation.

A lot of time was put into adjusting the colors and visual details of the home page and other UI elements. It was important to make sure that the use of multiple colors does not look overwhelming and brings forward the information to be conveyed without being too distracting.

 

Know about the author and her work

I redesigned the complete homepage by changing entire layout of the original website. I focused more on alignment, color, logo and menu bar. Firstly, I added introduction of author which is absent in the original website. Then I made up featuring the books of author which is necessary in promoting her through social sites. 

Darker the color, steeper the slope

In biography section, I implemented the idea of Wikipedia. Here, I added contact option, which will help the user to contact the brand team for more information. I kept the remaining content same by attaching the life story of author.

Shopping Books

One of important section of the website. I considered adding books in left alignment by gradually adding little description of every book. Down the screen I featured the famous books and attached some discount related options.

Takeaways

How did it go?

Project learnings

Experimenting, exploring and establishing the new brand identity. Importance & usefulness of sitemap & wireframe before the visual design process. Transforming the desktop view into a mobile view through a fluid responsive design

Usage of ‘Gridlines’ to align the website. 

Every information, image & other data should be uniform & consistency throughout the website

Have a fully functioning responsive website

Re-establish, creating & maintain the brand identity of the author & her books

This project brought new challenges for me, being the first web page and e-commerce based project I have worked on.

Further user research and implementation

What other features the readers and journalist benefit from? One consideration would be introducing merchandise page and selling goods to the customers. I would like to improve upon the UX based on further research and testing. 

Are you a design geek, a pretzel lover, a movie buff or a foodie who likes trying out new cuisines? If yay, do get in touch! ✨

© 2020 with 🥨 Savani Shrotri