Usability Evaluation
Project Overview
Client
Code Championship is an organization that offers competitive coding tournaments for youth (grades 3-9).
Challenge
Evaluate the usability of the Code Championship website, identify key areas for improvement, and provide design recommendations that support the organizational mission, client business goals, and users’ needs/wants.
Outcomes
An updated header navigation with a hover drop-down menu to increase content findability.
Replace video stills with images of kids smiling, cheering, and having fun while participating in a coding tournament to better communicate organizational mission.
Team
Lila Gilbert, Don House, Ton-Hy Pha, Travis Wilds, and Sarah Monson
My Role
Heuristic Analysis, Moderate Usability Testing, Data Synthesis, Wireframing, Findings and Recommendations Report
Tools
Zoom
Otter.ai
Google Sheets
Invision
Sketch
Methods
Heuristic Analysis
Usability Testing
Affinity Diagramming
Wireframing
The Process
To improve the website experience for Code Championship and its users, I used the following process:
An Initial Usability Review
To inform my evaluation of the Code Championship website and identify usability problems, I first conducted a heuristic analysis using Jakob Nielsen's 10 Usability Heuristics. As part of my usability review, I worked from the following set of primary tasks the client identified as critical tasks its users would need to successfully complete:
Practice building a bot
Register for Tournament Series
Sign into the tournament event
Create a Tournament
Join the mailing list
Based on my review, I identified four key usability problems:
1. The volume of information on the homepage and the lack of hierarchy make it difficult for users to know where to look first to find information.
2. The redundancy of information on the homepage compromises the usability of the site. Because there are multiple paths for accessing information, users may be unsure where to click first and are forced to recall where they found certain information.
3. Because the slanted click buttons are inconsistent with standard design conventions, they may likely be unfamiliar to users. Users will have to interpret whether the buttons perform in the same way as more conventionally design buttons.
4. The language and labels are inconsistent with standard User Interface Design conventions. Because they may be unfamiliar, users are left to wonder what they mean.
All the Goals
Next, I met with my design team to discuss the results of our individual heuristic analyses and form preliminary hypotheses of usability issues we might encounter during usability testing. Then we gathered all the goals pertinent to the project: the organizational mission/vision, the client site goals, and user goals. From these, we developed a set of evaluation goals for the project:
Gain insights into how well the website supports users’ ability to complete key tasks (example: register for a tournament, create a tournament).
Evaluate the extent to which the site effectively communicates the mission of Code Championship (e.g., getting kids excited about coding, recruiting underrepresented demographics).
Assess how well the website supports users’ ability to reach out and connect more closely with the organization and/or stay in touch.
Usability Testing
Working from our evaluation goals, my team and I developed a usability testing script. We identified a set of key tasks for test participants to complete and created a set of questions to ask participants to elicit their impressions of, and experiences with, the site. Once the script was finalized, we conducted usability tests. Each member of the design team conducted 2-3 remote moderated one-on-one usability tests with participants using Zoom. Then as a team, we conduced 5 remote moderated lab usability tests using Zoom to record participants’ facial expressions, verbal responses, and screen actions.
Total Participants: 17
Data Synthesis
After concluding the usability tests, we compiled our raw data into a shared spreadsheet using Google Sheets. Then we collectively started affinity diagramming using Invision to group patterned findings into themes.
From this process, I identified two primary themes that emerged: 1) Participants indicated that the volume of content on the homepage impeded their ability to locate important information and complete key tasks; 2) Participants’ responses suggested there is an opportunity to better convey the organization’s mission which is that coding is a fun activity for youth.
The Findings
Issue 1: Finding information about the organization
Explanation: While the information exists on the homepage, participants struggled to find information about the organization itself. Many suggested an About/Who We Are tab in a header navigation menu.
Recommendation: Add an “About” or “Who We Are” to the header navigation menu.
Issue 2: Finding information about tournament events
Explanation: While participants could easily initiate the “Join a Tournament” process, they couldn’t locate but wanted additional information about what to expect at tournaments (e.g., Covid protocol).
Recommendation: Add “What to Expect [at tournaments]” content to the website. Consider adding to the header navigation menu.
Issue 3: Locating financial assistance information
Explanation: While the information exists on the series registration page, many participants struggled to find whether the organization offers financial assistance for tournament and/or series registration. Participants, however, had varied suggestions for where to put this information.
Recommendation: Make this information appear before the registration page. Consider putting in an FAQ page.
Issue 4: Unprioritized information & scrolling
Explanation: Participants had a difficult time navigating the website to complete key functions and found it frustrating to scroll through the volume of content on the homepage.
Recommendation: Clarify hierarchy of homepage.
Issue 5: ‘Coding is fun’ did not resonate
Explanation: Although the videos themselves showed kids having fun, many participants thought the video stills on the homepage failed to communicate the message that coding is fun.
Recommendation: Change video stills to frames where kids are smiling, cheering.
Recommendations
Based on the above key usability problems and recommendations, I created a wireframe for a revised navigation bar with a hover drop-down menu (Left, Center). This revised menu is intended to add hierarchy to the existing content on the homepage and increase findability by providing a clear path to locate information. Additionally, I selected a new video still to replace the original image on the homepage with the intention to better convey the organization’s mission/vision to get kids excited about coding.
Hover Drop-Down Menu
Content Reorganized
Communicate Coding is Fun
Conclusion
Overall, many test participants indicated that the majority of information that they need to complete key tasks presently exists on the website but that it needs to be reorganized and grouped into a more clarifying hierarchy. While my Findings and Recommendations report highlights key usability problems and recommendations, findings from the usability tests pointed to additional opportunities for further consideration. These include:
Clarify age group. Some participants were confused about the target age group. Some saw “3rd grade and up.” Some saw grades “3-9.” Some saw “young.” Some were confused because the images depicted high school aged students. Next steps: Make age group explicit and consistent across website. Consider using images/videos of younger age groups.
Re-evaluate labels/terms. Preliminary findings indicated some confusion around some labels (e.g., “Code,” “New”, “Join a tournament”). Next steps: Card sorting to determine meaningful categories and terms.
Redesign mailing list form. Participants were caught off guard by the question mark boxes; for some, it was a deterrence. Next steps: Use industry standard UI design elements.
Re-evaluate tournament sign-up process. Some participants did not expect to be taken to an external site to register for a tournament. Next steps: Streamline registration process on Code Championship website. Conduct usability study with 5 participants to test updated task flow.