Challenge

Suzanne Collins is an author and television writer who is known for her series The Hunger Games. I worked with 3 other team members on a challenge to redesign a new website for Collins. Our 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, we needed to further examine the usability and design of the site to inform a redesign. The redesign required 4 pages, including the home page.

• 

• 

• 

• 

Approach

User Surveys & Personas

Firstly, our team 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. I also conducted my own research into competitor websites and best practices for author websites. I synthesized our results into a report for our team. To summarize, our research revealed users that may be familiar with the author’s recent work, teachers, librarians, publishers, and press. Based on the user research we conducted, our team created personas to represent users of Suzanne Collins website.

Heuristics Evaluations

Additionally, we each conducted a usability heuristics evaluation using Nielsen guidelines. We also 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.
• User control and freedom. There is also a lack of visual cues and controls for users. As a result, it’s difficult for users to recognize where they are on the site, where they navigated from, and how to navigate back.

Information Architecture Evaluations

Our team also each conducted an information architecture evaluation using the UserFocus heuristics. We each gave ratings and comments to justify our ratings for each guideline under the Navigation and IA category. A rating of -1 means the site doesn’t comply with the guideline, while a rating of 1 means the site is compliant. A rating of 0 means that the site somewhat complies with guideline. Overall, the site was around 55% compliant with navigation and information architecture guidelines. Some areas where the site could improve included:

• Navigational feedback
• Navigation to information that users are most likely to need
• A site map
• Sorting and filters
• Home page scrolling

Usability Testing

Our team then put together a 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. We also gathered demographic and psychographic information about users in a pre-test questionnaire.

During the tests, we collected completion times, rates of success and failure, user’s navigation routes, the user’s comments on their experience, and our own observations. We then collected information about the users overall experience during the test in a post-test questionnaire. Once our team completed our usability tests, I collected all our data and combined it into a report. We also put together a presentation of our findings. I created slides on the results of our usability testing.

• 

• 

• 

• 

• 

• 

Recommendations

Based on our findings, our team made several recommendations for the website redesign to improve usability.

Navigation Location

Our usability tests revealed that users looked for the navigation bar on the left side or they expected it to be top centered. Consequently, the navigation bar should be centered or left aligned. Moving the navigation bar would keep users happy and motivate them to further engage with the page.

Navigation Content

Our usability tests showed that users weren’t sure what page held what information. Therefore, the navigation bar should display terms that the user is familiar with and expects to see. In addition, an About section is much needed. 

Aesthetics

Our evaluations based on Nielsen’s 10 heuristics and our usability testing showed that the amount of text overwhelms users. They had a hard time finding valuable information. So, a reduction in text is necessary; less is more. We also recommended a different font and greater spacing so the text is easier to read on screen. 

Search, Sort, Filter

One of the greatest issues users faced during our usability testing was the inability to search for titles or keywords. Related to search, users also wanted options to sort and filter through works. Users were frustrated and unable to complete tasks. This would make them leave the site in the real world. Adding a search option, sorting, and filters would eliminate this problem.

Contact

Users needed a way to contact Suzanne. They were in disbelief when they realized the current website doesn’t state any contact information. Contact information adds credibility to the page even if the user may not make use of it.

User Interaction

During our testing, users explored other websites. Consequently, they found that newsletters are a popular way among authors to keep readers up to date. Additionally, our post-test questionnaire shows that users would like links to Suzanne’s social media accounts. We recommend adding social media links at the bottom of the home page or in the “about” section. 

Solution

Style Tile

After our user research was completed, I developed a style tile to select colors, typography, and styling for the site. I chose colors to expand on the current limited color palette in order to offer more variety while retaining a sense of familiarity for current users. Additionally, my chosen color combinations offered enough contrast for accessible text. For the typography, I wanted to improve legibility and select something more modern in appearance. I also created a wordmark logo to add some more personality to the website title.

Sketches

Next, I sketched out the overall design of each of the 4 pages of the site. I restructured the site to include an about page, books page, and contact page. All four pages include improved organization of images and text in a contemporary style. In addition, the header now features a clearly defined top center navigation bar with a search option. I added a footer that provides relevant disclaimers, social media, and a second navigation menu. This menu also includes a back to top button. 

• Home page. I gave the welcome banner more structure and added a newsletter call to action. To avoid excessive scrolling, a slider presents the featured works.
• About page. The about page replaces the biography page and was renamed to make it more intuitive for users to find the relevant information they are looking for. It also includes the call to action to subscribe to the newsletter.
• Books page. The Works page does not contain content about Collins’ other works outside of her books. To increase the page specificity, I renamed the Works page to Books. Additionally, cards organize the books information.
• Contact page. I added a contact page, which includes a box with relevant content information. An interview section follows, which almost serves like a frequently asked questions section. To reduce scrolling, the interview also features pagination.

• 

• 

Mockups

I created mockups for each of the four pages in Adobe Photoshop. To make sure my items were properly aligned and spaced, I used guidelines. The wordmark logo was adjusted to include a headline so users immediately have information about who Suzanne Collins is and what she does.

Result

I created mockups for the 4 pages. Relevant design decisions included:

• The navigation features a visual cue for which page the user is currently on.
• I distinguished links from regular text.
• Each page now features the call to action to sign up for her newsletter.
• The Books page includes sorting and filtering options.

• 

• 

• 

• 

I am pleased with this redesign overall. It features a clean design with consistent elements. The design is in tune with the various needs of users. The mockups address the recommendations of our team based on our user research and site evaluations.

Share:

Contact Me

Interested in my services? Let’s get in touch.