Overview
Client
Suzanne Collins (Completed as a personal project).
Mission
Required the development of a website that offers comprehensive and pertinent information for the target audience.
Service
Web Design, UI design, and UX design.
Outcome
Implemented enhancements for a more user-friendly experience, resulting in a reduced bounce rate.
Impact
Extended user engagement duration on the site, leading to increased book purchases.
Tools Used
Figma.
Process
Having previously executed a rebranding for Suzanne Collins’s website a couple of years ago, I recognized the opportunity to revisit the project, leveraging the advancement in my UX/UI expertise. This iteration involved comprehensive research, encompassing the creation of a refined target audience, guiding the audience through scenarios, and conducting a Heuristics test on the existing Suzanne Collins website.
Website Evaluation
The website selected for evaluation is Suzanne Collins’ https://www.suzannecollinsbooks.com/. Upon entering the homepage, it presents a notable challenge in terms of clarity. The information is distributed across three columns, disrupting the natural flow of the page. The absence of a central focal point results in a scattered visual experience for the user. Additionally, there is a noticeable issue with low contrast between the orange typeface and the background on the right column. Analyzing the typeface color (#F19B00) and the background color (#FDF1DF) using the Adobe Contrast checker indicates a contrast of only 2:1 (Color.adobe.com). As per w3.org standards, the minimum recommended contrast is 4.5:1.
Upon navigating to the “Works” tab, a lack of organization is evident in the presentation of books, with no discernible order. The information provided is outdated and incomplete, omitting some of Suzanne Collins’ literary works. Notably, a book featured on the homepage is entirely absent from the “Works” page. Furthermore, despite the comprehensive display of books, there is no functionality allowing users to make direct purchases from the website.
To acquire a book, users are required to scroll to the lower section of the page, where a link redirects them to a third-party website. This process entails additional steps as users must then search for the desired book without a direct link to facilitate the purchase.
In summary, the website lacks user-friendliness, primarily due to low color contrast, potentially excluding certain users from full accessibility. The layout presents distractions through an excessive variety of typefaces, colors, and weight thickness, lacking a clear focal point. A typographical error is noted in the word “Vietnam” on the biography tab towards the bottom. The overall navigational experience across pages is not optimal, with information placement proving less helpful and occasionally confusing.
Another source of confusion arises from the absence of information regarding the content of the book featured on the homepage. Prospective readers interested in understanding the book’s premise would need to visit an alternative website to access a synopsis.
Heuristics Evaluation
When assessed against Nielsen’s 10 usability heuristics standards, the website falls short in several aspects. Visibility is compromised as the information on the homepage lacks insight and is outdated. The match between systems and the real world is suboptimal, with terminologies not aligning seamlessly with user expectations. Regarding user control and freedom, the absence of quick links at the bottom of pages hinders users from easily navigating back without scrolling to the top. The website lacks consistency and standards, evident in the inconsistency of clickable book images. This inconsistency introduces an element of error, leading to confusion when some images trigger error messages upon clicking. In terms of recognition rather than recall, the website’s design makes it challenging to distinguish between clickable and non-clickable elements.
Certain elements on the website lack consistency, creating confusion regarding clickable and non-clickable objects. The website’s navigation proves cumbersome, impeding flexibility and efficiency in usage. In terms of aesthetic and minimalist design, an abundance of quotes from reviewers appears disproportionate, potentially overshadowing other pertinent information. Addressing errors, the website’s error messages fall short in providing users with guidance on how to recover from encountered issues. Additionally, for information related to specific books or the purchasing process, users are required to conduct independent research, lacking comprehensive help and documentation (Nielsen).
| Sarah | Chad | John |
|---|---|---|
| Book Worm “Reading is a huge part of my everyday life; I often choose books that I know my club and I will like.” | The influencer “I take great pride in the content I share will my followers.” | The Busy Grandpa “I would do anything for my grandkids.” |
| Back Story: • High School Student that loves reading books • After school she wants to go to college and become a writer • While still in high school, Sarah loves to get a bargain when book shopping • Coordinator of the high school book club | Back story: • Loves to skateboard in his free time • Avid reader in middle school • Class clown in high school • Owns a beagle named Bucket | Back story: • Grew up with 6 siblings • Dream job, when he was a kid, was to be an astronaut • In his free time, he loves doing puzzles with his grandchildren • Favorite sports team is the New York Giants |
| Motivations: • They want a website that is easy to navigate and doesn’t waste their time • Motivated to complete the Hunger Games book series • She wants to stay up to date with one of her favorite authors • Find a new book to recommend to the book club | Motivations: • One of his followers asked him to review the new book in the Hunger Games series • Being able to recommend the website to his followers • He needs a website that is eye-catching and trendy • Likes to visit sites that have lots of images and videos | Motivations: • One of his grandchildren said they wanted a new book from Suzanne Collins • Quick loading of website, with quick-to-find information • Simple icons to convey a clear message • He needs a site that is easy to navigate |
| Frustrations: • Website scrolls forever • Lack of smartphone usability • Out of Date information • No Clear filter to organize content • Doesn’t understand the message the author is trying to convey | Frustrations: • The website looks like it hasn’t been touched in a long time • There is no engaging content • no option to share the content to his socials • Must go to a third-party website for more information • Information didn’t seem reliable | Frustrations: • There is no clear location to purchase books • There is no way to organize books by release date • No clear information on books • Background and foreground colors of type are hard to read • A lot of type that isn’t relevant to what he is looking for |
| Their ideal experience: • Discover new Books • Ability to use the site on her phone • Read reviews from people like her, not just companies • Be certain that her book club will like the book before buying • Buy books online • Show the different options of the book (ebook, paperback, audiobook, etc.) • A way to sign up for emails to get insight on new books that will be released | Their ideal experience: • Links to authors’ other social media • Direct link to purchase books • way to filter content • Search bar to look for books quickly • Shows different options to consume content (ebook, audiobook, paperback, • A way to see reviews from real customers | Their ideal experience: • A search bar to look up books quickly • Quick to the point information • ability to enlarge typography for easier reading • Button to scroll back to the top of page • Buy books online • Ability to enlarge images • Reviews from other readers |
Scenarios
Sarah
Scenario Description: Look for reviews on “Catching Fire”
Objective: She is tasked with reviewing the feedback to determine the suitability of the book for the book club
Narrative: Sarah starts on the homepage, visiting the works page. This is where she can find “Catching Fire”. She clicks on the book’s name to see if any information would fulfill the task. On the site for “Catching Fire,” she first scrolls down to see all the rewards the book has won after she finds reviews and feedback about the book. Although she finds this information, she is put off because it seems to be a prestigious group of people, and not teenagers her age.
Chad
Scenario Description: Gain knowledge on the author.
Objective: Chad is assigned the responsibility of researching and gathering information about the author. This endeavor aims to furnish him with contextual knowledge that will prove valuable when he undertakes the task of reviewing her books for his followers.
Narrative: Chad initiates his exploration from the homepage and observes the presence of a biography tab. He is content to find substantial information about the author on this tab, appreciating the coverage of various aspects of her life’s work. However, he notes confusion arising from unnecessary quotes in the right column. Chad also highlights a discrepancy in the language used on both the biography page and the homepage, perceiving inconsistency that raises concerns about the trustworthiness of some information. Suspecting potential inaccuracies, he suggests the need for an update to ensure the biography reflects current and reliable information.
John
Scenario Description: Purchase a book.
Objective: He must identify a book of interest and proceed with the purchase.
Narrative: John commences his journey on the homepage and identifies the “Works” tab, selecting “Year of the Jungle” as a potential book for his grandkids. Attempting to locate the purchase button, he scrolls through the entire page without success, leading to frustration. In a second attempt, he discovers the right column and quick links. However, as someone less familiar with technology, he recognizes only Barnes & Noble among the links, a store he’s visited with his grandkids. Despite initial hesitations, he clicks the link to find himself on the Barnes & Noble homepage. In the process, he forgets the book’s name and faces the challenge of returning to Suzanne’s site and then navigating back to Barnes & Noble for the purchase. Eventually, he successfully completes the purchase after overcoming these hurdles.
UX Research Plan for Suzanne Collins
Stakeholders
The stakeholders encompass Suzanne Collins, site visitors, and individuals involved in designing content for the website.
Background of study
suzannecollinsbooks.com serves as the official website for the author Suzanne Collins. Its primary objective is to function as a central hub for users, enabling them to explore Suzanne’s works and gain insights into her background. The research plan for this website aims to identify pain points and investigate the factors contributing to low customer loyalty.
Goals for conducting the study
- Analyzing the areas of improvement in the website (uxpin.com).
- Investigating the factors leading to user disengagement from the site.
- Uncovering the motivations of the users.
- Gain insights into the user’s navigation patterns on the site.
Proposed Research Questions
- Can our users proficiently navigate towards completing a book purchase?
- Is the series order comprehensible to our users?
- What motivates users to revisit the site (userinterviews.com)?
Study Methodology
In this study, we will administer a 45-minute test involving three distinct participants to assess the user experience of our website. Recognizing that varying technology comfort levels and age groups may have distinct needs, our aim is to comprehend potential challenges for each group. Each participant will evaluate the website across different devices, including desktop, tablet, and mobile.
Schedule
The testing will be conducted within a single day, with a maximum of two weeks dedicated to participant recruitment based on our specified criteria. Test sessions will occur consecutively, allowing for breaks between each session. Following each test, a prompt debriefing session will take place on the same day to ensure the test’s details remain fresh in everyone’s mind (Krug).
Participant characteristics:
Participant 1
Age: 12-18
Technology comfort: Tech Savvy
Familiarity with the website: Minimal
Needs: Ability to use the site on a phone
Behaviors: Willing to stay on-site if it’s engaging
Participant 2
Age: 19-39
Technology comfort: Minimal
Familiarity with the website: Minimal
Needs: Engaging content
Behaviors: Leaves quickly if the site seems untrustworthy
Participant 3
Age: 40-70
Technology comfort: Not comfortable
Familiarity with the website: No knowledge
Needs: Direct links to purchase books
Behaviors: Losses interest quickly
Proposed usability test script with two task scenarios:
“Greetings and thank you for joining us today, ____. We appreciate your participation in testing our website across desktop, tablet, and mobile devices. The purpose of this session is to assess the functionality of the website as intended. Your honest impressions are invaluable, so please share any concerns or frustrations you may encounter. The entire test, covering all three devices, is expected to take approximately 45 minutes. If you have inquiries, feel free to ask, though some answers may be deferred until the conclusion of the test.”
Scenario One – Locate a book and purchase.
Use the given website to find a book you’d be interested in and purchase.
- 1. Load the homepage https://www.suzannecollinsbooks.com/index.htm
- 2. Identify the book’s page, and locate a book that you’re interested in.
- 3. Purchase the book.
Scenario Two – Contact the author.
Use the given website and dummy information to contact Suzanne.
- 1. Load the homepage https://www.suzannecollinsbooks.com/index.htm
- 2. Identify the contact page.
- 3. Fill out the boxes using the dummy information provided.
- 4. Send the message.
Low Fidelity Prototypes
Low Fidelity Prototypes – Desktop
Low Fidelity Prototypes – Tablet
Low Fidelity Prototypes – Mobile
Solution
Medium Fidelity Prototypes
Medium Fidelity Prototypes- Desktop
Medium Fidelity Prototypes – Tablet
Medium Fidelity Prototypes – Mobile
Works Cited
Works Cited
Adobe. Adobe Color Analyzer. n.d.
- <https://color.adobe.com/create/color-contrast-analyzer>.
CARTWRIGHT, HELEN. Marketing to Young Adults: What Factors to Consider. 24 January 2018.
- <https://blog.staylisted.com/marketing-to-young-adults>.
Forsey, Caroline. 9 Breadcrumb Tips to Make Your Site Easier to Navigate [+ Examples]. 13 September 2022.
- <https://blog.hubspot.com/marketing/navigation-breadcrumbs>.
Idler, Sabina. 5 Key Principles Of Good Website Usability. 30 September 2021.
- <https://www.crazyegg.com/blog/principles-website-usability/>.
Krug, Steve. “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.” Pearson Technology Group, 2009. 102.
Nielsen, Jakob. 10 Usability Heuristics for User Interface Design. 24 April 1994.
- <https://www.nngroup.com/articles/ten-usability-heuristics/>.
userinterviews.com. How to Create a User Research Plan. N/A.
- <https://www.userinterviews.com/ux-research-field-guide-chapter/create-user-research-plan>.
uxpin.com. Creating A User Research Plan (with Examples). 8 October 2020.
- <https://www.uxpin.com/studio/blog/ux-research-plan/>.
W3C. G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. 2016.
- <https://www.w3.org/TR/WCAG20-TECHS/G18.html>.
Wand, Alex. The Importance of Icons in Your Website Design. 31 October 2018.
- <https://powerdigitalmarketing.com/blog/the-importance-of-icons-in-your-website-design/#:~:text=Icons%20describe%20functions.&text=Not%20only%20do%20they%20add,the%20features%20or%20functions%20described.>.
Zheng, David. The 15 Second Rule: 3 Reasons Why Users Leave a Website. 14 May 2020.
- <https://www.crazyegg.com/blog/why-users-leave-a-website/>.
- [Original source: https://studycrumb.com/alphabetizer]
Images cited
| Title | Author | Source | License |
|---|---|---|---|
| Women in blue denim jacket photo – Free Clothing Image on Unsplash | aisvri | https://unsplash.com/photos/QQJ926VAO8g | Unsplash License Free for commercial and non-commercial use, no attribution required. |
| Man in black crew neck shirt – Free Happy old man Image on Unsplash | Kyle Bushnell | https://unsplash.com/photos/ZhAWv5iuFGQ | Unsplash License Free for commercial and non-commercial use, no attribution required. |
| Man standing near to tree photo – Free Male Image on Unsplash | Ana Nichita | https://unsplash.com/photos/BI91NrppE38 | Unsplash License Free for commercial and non-commercial use, no attribution required. |