Suzanne Collins Books
A coursework project to implement design ideas
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
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.
To improve the usability and user experience of website for the first time users
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.
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.
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
I conducted an information architecture evaluation using the UserFocus heuristics. The site was around 55% compliant with navigation and information architecture guidelines.
Navigation to information that users are most likely to need
A site map
Sorting and filters
Home page scrolling
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.
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.
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.
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.
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.
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.
How did it go?
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