Suzanne Collins Website - Case Study
UX/UI Study + Redesign | Desktop | Jan - Feb 2021 (Unsolicited)
UX Strategy | Information Architecture | Competitive Analysis | Customer Journey Mapping | Task Analysis | Paper Prototyping | Hi-Fi Prototyping
Problem Statement
How do we dramatically enhance the purchasing experience for the users of the Author - Suzanne Collins’s website?
Context
Suzanne Collins is an American Television Writer and Author, who is known for the New York Times best-selling series - The Hunger Games & The Underland Chronicles.
The motive behind this project was to do a UX case study for a selected website (https://www.suzannecollinsbooks.com/ ) & to demonstrate the understanding and application of UX Strategy skills learnt during the UX Strategy 1 course from BCIT – UI & UX Design Certificate program.
The core skills to demonstrate were
(a.) To empathize with the user for an identified task on the website by understanding the Target Audience, creating Persona & Task Analysis,
(b.) Identify the user’s pain points by taking a holistic approach , i.e. using Customer Journey Map for both the as-is state and future-state of the website and
(c.) To recommend solutions that will improve the UX of the website with the help of Paper-prototyping & Hi-fi Interactive Prototype using InVision.
Project Details
Original Site
https://www.suzannecollinsbooks.com/
Software
Adobe Illustrator, InVision
Type
Individual Contribution
Role
UX + UI Designer
Testing Link
https://invis.io/PW109GXYCDVZ
Assumption
As this project was for purely academic purposes, we were tasked to come up with a solution considering there are no budget & time constraints to implement the proposed solutions.
Process
The below stages of Design Thinking Process was applied to the project. Design Thinking is a non-linear iterative process, I have described below my findings during one such iteration.
Understand-Bookmark
1. Understand
Initial Audit
At this stage, I conducted the initial assessment of the website in depth to analyze and understand the existing functionality and design aesthetics. For this study, I focused on the desktop version of the site.
During this evaluation, I identified that the website had many usability issues and noted down some of the pain points as below.
- Lack of information on how to contact the author.
- Lack of integration with social media within the website,
- Missing search functionality,
- Too much scrolling,
- Difficult to find information about the book/movie easily and so on.
Industry Research
My next step was to understand the writing industry in general and how different elements interact with each other for example, the role of publishers, publicists/agents, library, book stores, book distributors, movie adaptations and then specifically about the author and her works. I also did an informational interview with a school teacher & librarian to get some insights into author study and visits as part of the curriculum.
Competitive audit
To understand what other author’s website had to offer, I did a competitive audit of 3 other Children Literature and/or Young Adult authors solely from a functionality, design and social media standpoint. This helped me better understand where Suzanne Collins’s website stands and was also the source for design inspiration.
- Veronica Roth, the #1 New York Times best-selling author of the Divergent series
Key takeaways from Veronica Roth’s website:
- Clean design
- Simple and easy navigation
- Clear CTA on the homepage
- Strong social media presence
- Stephenie Meyers, author of the Twilight Saga
Key takeaways from Stephenie Meyers’s website:
- Simple and easy navigation.
- Organization of content related to a book.
- Strong social media presence.
- Purchase options directly from the author’s website.
- James Patterson, recipient of the Literarian Award from The National Book Foundation
Key takeaways from James Patterson’s website
- Simple and easy navigation.
- Strong social media presence.
- Clear CTA on the homepage.
- Search capability within the website.
- Purchase options directly from the author’s website.
Empathize-Bookmark
2. Empathize
Audience Analysis
Although the books written by the author primarily target the age range between 4 and 18 yrs old, the majority of the users of the website are adults. An article published in 2012 by Publishers Weekly reported on a study showing that 55% of books intended for Young Adult (12 -18) audiences were bought by adults and 78% of those were for the buyer’s own reading. Based on this statistics, I determined the age range for the author’s website would be between 13 to 54 yrs.
I identified a list of user archetypes/ user types for the website based on demography, behaviour and motivations. User types will help with understanding the user’s needs and their pain points in using the website.
- Genz - High School Students
- Genz - College Students, Young working professionals
- Millennials - long time fans who read author's books in their teens
- English Literature Students/ aspiring fiction writers
- Older Adults - Parents of young children/pre-teens/teens
- Educators - English Literature/Creative Writing Teachers
- Librarians - (school/college/public library)
- Journalists
- Prospective Fans
Persona Building
Based on the previous audience analysis, I developed a persona to represent the ideal user of the author’s website that would help me to better understand the users’ needs, experiences, behaviours and goals.
Task Analysis
A task analysis was charted listing all of the identified user types and how they might potentially interact with the website. From this chart, I narrowed down the scope of the case study to focus on the task (i.e purchasing the books) based on most commonly occurring tasks on the website and which meets both the user and business goals which is seamless purchase experience and increased book sales respectively.
Journey Mapping
Having identified the persona and the task for the case study, my next step was to walk through the process of discovery, accomplishing the task of purchasing the books from the author’s website and what happens after leaving the website by the ideal user by using journey maps.
I was tasked to create an assumption-based future-state journey map wherein it is used to create new experiences and values for the user by uncovering new opportunities.
In my first attempt, there was only a limited list of pain points for each phase. After peer reviews, I further included the pain points of the users in general at each phase for both the as-is state and future-state of the website and possible solutions for each of those pain points. I also added an image section that correlates the user's action at each phase based on the feedback.
Customer Journey Map for buying a book from the author's website (pdf document)
Discover Pain points
From the journey map, I extracted a few pain points that I would address for the case study to fix the existing issues and also enhance the user experience.
PainPoint #1
There is no clear call to action on the homepage. The information is ambiguous and there is too much scrolling.
PainPoint #2
Bibliography page is confusing and the order of the books is all mixed up. There is no clear classification of the books and the reading level for each book.
PainPoint #3
The user experience to purchase is tedious. The links to external websites are all the way at the bottom of the page and the links redirect the user to the homepage of these websites( US location only). The user has to additionally spend time to search for the intended book/book collection to purchase on the redirected website and figure out the product format options, pricing and availability. If there is no availability, the user has to repeat the step on a different store’s website.
Ideate-Bookmark
3. Ideate
Once I had defined the problem and analysed the pain point, I proceeded with brainstorming for possible solutions and started to sketch them out.
A low-fidelity paper prototyping was done in order to quickly and easily check and test the functionality of the proposed solutions rather than focus on the UI design at this stage. This process helped to iron out some details like the user flow and finalize on the global menu navigation.
I focused mainly on the user task of visiting the website to find “The Hunger Games Series” books and proceeding with purchasing the series. Accordingly I designed the landing page, the Books page and Book purchase details page.
Prototype-Bookmark
4. Prototype
Before designing the prototypes, I developed a web style tile. My inspiration for the colors are from the author’s The Hunger Games books.
I then used Adobe Illustrator to create the mock up pages and Invision, a cloud-based product design platform to create Hi-fi prototypes.
Addressing Pain Point #1: - Landing Page
Newsletter Sign up:
On the landing page, added the CTA to sign up for a newsletter and using the UX Persuasive Core Principles, added an incentive to subscribe.
This would in turn help the users to get up-to-date information and will provide a means for the business to persuade users to visit the site again.
Home Page:
Improved the design and layout of the homepage by including sections guiding the user to take appropriate actions. Included a slider section that would display new/upcoming book/movie releases that prompt the user to preorder/buy, recommend users to read other books by the author, a section each for upcoming events, inviting the user to join or create a book club, to learn more about the author and for the news.
The slider section is manual with no auto play as it would distract the user. Also, improved the overall aesthetics of the website and added features like LiveChat support, Accessibility support and Multi-Language support.
Addressing Pain Point #2 : -Bibliography
Navigation:
By creating separate pages for the book series and stand-alone books, the user will now be able to differentiate it easily between them.
Books detailed pages:
The UX Laws - Law of Common Region states - “Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.”
I listed the books included in the series in the order to read and added a border around the list of books. I also applied the law to present the information on each of those books - short synopsis, book number and recommended age and an option to buy - by using a background around them.
Addressing pain point # 3 - Purchase from website
Buy options:
Provided an option for users to purchase individual books or books by collection on the author’s website.
Book purchase page:
Created a separate detailed page for the book/books to be purchased. This page has the details about the book - synopsis, product details, Q & A related to the book, Reviews on the book etc. The user will now have the option to read/listen/watch an excerpt from the book before proceeding to purchase.
External links to store websites:
Using the Law of Common Region, I created a boundary around the purchase section and the book details section. In the purchase section, the user now has the option to explore and choose a format, select a signed copy if it is a physical book, and see a list of stores catering to the location chosen by the user. The user also is presented with the pricing and availability of the books in the stores to help make an informed decision. The links will take the user directly to the checkout page for the selected book
and store.
Jacob’s Law states - “Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
During competitive analysis, it was discovered that many author’s websites offer various format options and links to external websites to purchase from. By utilizing Jacob’s Law and leveraging a mature Order & Delivery Management System already in place, I defined the functionality to provide location based purchasing options and real-time product information to add value to the user experience.
Hick’s Law states - “The time it takes to make a decision increases with the number and complexity of choices.”
By applying this law to the interface design, the options are minimized to 4 choices at a time.
Validate-Bookmark
5. Validate
Testing & Iterations After peer review and testing on Invision, based on the feedback received, issues were fixed.
Invision Testing Link: https://invis.io/PW109GXYCDVZ
Reflections
This case study for improving the User Experience of Suzanne Collins’s website was a great experience for me. It gave me insight into how the user-centered design process works from end-to-end. This was a great opportunity to learn and apply the skills from Information Architecture, UX Strategy and Adobe Illustrator courses. I also got familiar with using prototyping tools like Invision. Peer reviews and feedback helped me immensely to think outside the box especially with the Journey Mapping and gave me a completely new direction to think about user problems.
In my next iteration, I will revisit the customer journey map to elaborate on the pain points that I received as feedback related to
(a). Keeping current with the activities of the author in terms of her writing.
(b). Giving insight into the author’s process of coming up with characters and inspiration for the character development and story line, behind-the-scenes for movie adaptation and author’s involvement in the production etc..and do user testing on the prototype.