Suzanne Collins' Website Redesign
Usability Testing + Rapid Prototyping
Date: Nov 2019
Project Type: School Project
Skills: User Experience Design, Wireframing, Rapid Prototyping, Usability Testing, Iteration
Intro
This project is the culmination of work from 2 Arizona State University courses, TWC 501: Fundamentals of Technical Communication and TWC 511: Principles of Visual Communications. In TWC 501 I conducted usability testing on a poorly designed website and authored a professional memo to the site's owner with the results of the testing and recommendations for fixing the site’s usability issues. In TWC 511 I used rapid prototyping to design a new homepage for a poorly designed website. Given these projects were both parts of redesigning the UX of a poorly designed website, I combined them into a single project.
I chose to conduct usability testing and rapid prototyping on the poorly designed site of New York Times Bestselling Author, Suzanne Collins. I was especially excited about working with Suzanne Collins' site because I had conducted a similar project on her site 2 years ago in GIT 340 and thought it would be interesting to see how I could improve upon the GIT 340 project (center image) using the skills and experience I had gained over the last 2 years. Although Suzanne Collins' had updated the general UI of her site since I last worked with her site (image on the right), it was still plagued by many of the major UI/UX flaws her original site had (image on the left).
Usability Testing
To begin usability testing Suzanne Collins' updated site, I reviewed the usability testing I conducted in GIT 340. The usability testing I completed in 2017 was adequate however, with an additional 2 years of experience under my belt, I found a few aspects of the usability test that needed to be revamped. Using my 2017 usability testing as a launchpad, I began usability testing for Suzanne Collins’ updated site.
I used scenario-based usability testing which gave test participants a plausible scenario for visiting the site along with a set of tasks to complete. While the test participants completed the tasks, I observed and recorded any comments or concerns the participant had and how long it took them to complete each task. I also employed both a pre and post-test questionnaire to garner more insights from the test results. The post-test questionnaire also gave participants a chance to offer any suggestions they may have for improving the site
To begin testing, I met with each of the participants one-on-one at a desk in a distraction-free room. I introduced myself to the participant and explained what they would be testing and how the testing process would work. During the Introduction, I was sure to emphasize that the usability test was testing the website, not them. I also made sure the participants understood that I would not be able to answer any of their questions for the duration of the testing session. I encouraged the participants to “think-aloud” while navigating the site so I could record their inner dialogue. After the introduction, I had the participants complete the pre-test questionnaire. I then brought out a computer with Suzanne Collins’ site pre-loaded on a web browser. I then had the participant begin the first scenario. While the participant went through the first scenario, I timed how long each task took them to complete and recorded any thoughts, questions, or concerns they had. This process was repeated for all three scenarios. After completing all three scenarios, I conducted the post-test questionnaire. Finally, I thanked the participant and repeated the process with the remaining 4 participants. After conducting usability tests on all 5 participants, I created spreadsheets containing the results of the usability testing to present to the client.
Findings
After analyzing the findings of the Usability report I compiled a list of recommendations for the client.
“ 1. Improve Information Architecture: Information Architecture refers to the way the information on a website is organized. Proper Information Architecture allows the user to quickly adapt and find the information they are looking for without much effort. ...
2. Add a Way to Purchase Books: Many users coming to your site will likely be looking for a way to purchase one of your books. Despite this, your site lacks any way of allowing users to purchase books or check the prices from other online retailers like Amazon or Barnes & Noble. ...
3. Add a Footer: Almost every site today uses a “footer”, a repeated section at the bottom of a webpage that displays navigation links, contact information/forms, social media links, and copyright information. ...
4. Fix Broken Content Layouts: Although the general design of your site has improved since the last update to your site, many of the misaligned image and text elements still remain. ...
5. Add Social Media Links/Integration: Many of your fans use social media to communicate with one another and stay up-to-date with their favorite celebrities, authors, and political figures … ”
After compiling my list of recommendations, I wrote a memo to the client summarizing the usability testing and my recommendations.
Feedback
For the Usability Testing Assignment, I earned 150/150. My Professor for TWC 501, Lynne Cooke Ph.D., was extremely impressed with how well my study was executed and even asked if she could use it as a sample assignment for her future classes.
“Quinton, This is a really well-executed study. Your methods are sound and you clearly define the tasks that you have the reader perform. Your results are particularly well developed and presented in an easy-to-read manner (it really makes it easy to compare the performances of testers across tasks. Your recommendations would certainly improve the site and I like that you mention Information Architecture as one of the underlying (and big) problems and that you recommend adding social media links to bring the site up to date. With your permission, I'd like to use your report as a sample A assignment for future classes. ... Really good work!”
Rapid Prototyping
The next part of this accomplishment was completed for TWC 511 and entailed redesigning the home page of a poorly designed website using rapid prototyping. This was particularly educational for me as I had never utilized rapid prototyping before. I found the process of rapidly creating variations of a layout instead of just working with one to be very useful. Rapid Prototyping showed me how important it is to try out different designs before getting tunnel vision on one layout. As previously stated, I did complete a redesign of Suzanne Collins’ site 2 years ago in GIT 340. However, I thought it would be interesting to see how much more of a robust redesign I could develop with my improved my wireframing and mockup skills. To begin, I used rapid prototyping to create six potential layouts for the homepage of Suzanne Collins' site in desktop and mobile viewports using Adobe XD. I found rapid prototyping to be extremely useful and effective. I consider rapid prototyping one of the most valuable techniques I learned during my graduate career. By quickly throwing together six potential layouts, I was able to easily visualize and choose the most effective of the wireframes.
High Fidelity Prototypes
After reviewing the 6 potential layouts, I selected my 3 favorites and developed them into more robust mockups featuring images, icons, and color. I stuck with the same color scheme I developed for my 2017 redesign because the complementary blue-gray and yellow-gold colors worked well for Suzanne Collins’ site and embodied the feel of her most popular novels, “The Hunger Games”.
Feedback & Iteration
After turning my 3 favorite homepage designs into mockups, I received feedback from Professor Harris and my fellow classmates. My classmates and Professor Harris agreed the mockups did an excellent job of taking the site’s text-heavy design and making it clean and legible. However, Professor Harris did suggest that I decrease the amount of text on the mobile viewport to make it more legible and decrease the size of Suzanne’s portrait because “the books are the real star of the show”. Professor Harris also recommended I move the portrait on the design 3 to the left to achieve better balance. In terms of the most effective design, my classmates and Professor Harris couldn’t reach a consensus, so I picked my personal favorite, design 4. I then modified design 4 with the help of the feedback I received from my classmates and Professor Harris. For the final design I, shrunk the size of Suzanne’s portrait, added a “jump” to the text on the mobile viewport, and switched the portrait with the main paragraph. I received 100% on the homepage redesign assignment. Professor Harris left no additional comments.
