Creating an Accessible and Responsive Website for Texas Teenagers

The TWC “Texas Reality Check” website (www.texasrealitycheck.com) is an Internet-available, fully accessible, responsive, mobile-first and browser-agnostic design. This website was tested for accessibility, performance, vulnerability scans, and usability.

Background:

The Texas Workforce Commission (TWC) is an agency within the state government of Texas that supports employment services and unemployment benefits for eligible residents and businesses. TWC had an existing website, called “Texas Reality Check,” geared toward school-aged children; the purpose of this site was to help students understand the realities of how much income they would need to earn to support the lifestyle they want in the future. This tool walks through different areas of life, on a step-by step-basis, identifying budgets associated with living essentials such as:

  • Housing
  • Medical
  • Car/transportation
  • Food
  • Clothing
  • Entertainment
  • Cost of student loans

This tool allows students to make selections and then calculate a corresponding monthly income that would afford the selections they make. From here, the students are directed to another page of the website that is connected with a database on careers and associated salaries. (This data is supported by the Texas Workforce Commission and is specific to regional locations, and costs are properly reflected.) 

The tool was targeted at students on a statewide basis, ranging from middle school to high school (with some colleges and universities making use of the tool for “life skills” classes). The goal of this tool was to inspire students to think about occupations and prepare for educational requirements so they can achieve the income level that meets their lifestyle selections. 

Challenges:

The State of Texas was looking for the following:

  • The site’s presentation and style was outdated, making it difficult for the young demographic targeted to connect and engage with it. To modernize the site and make it relatable, a revised content strategy was needed to better meet the project’s goals.
  • Accessibility was paramount to TWC as for all State agencies. TWC had a separate, text only accessible Reality Check site. A primary TWC goal was to create a single site that was fully accessible and that would be rigorously tested against requirements for accessibility and vulnerability.
  • There were performance concerns, as some counties hold training classes for the students in a bus or trailer. The students join a trainer in the mobile classroom where there are computers set up for them to navigate the website. The students use mobile Internet access with limited connection, and there are performance issues based on peak-time usage during school hours.  The site has high activity and would see anywhere from one to two million page views per month, so the site would need be tested against performance requirements.

Solution:

TWC was very interested in a thorough UX process.  Many vendors were telling the agency that they had a UX process; however, they were focused on UI rather than UX. Because of our experience, TWC chose AIS to establish and implement a complete UX process.

We started our research with interviews, discussing the current site’s limitations and challenges with both stakeholders and trainers. The trainers work directly with the students as they use the application, and they provided unique insight into specific issues students encountered as they worked their way through the steps. They helped us identify an important usability issue: The students would go through the application in a step-by-step process (basically following the format of a wizard).  This is a great process for the students, as each step is explained to help them understand why they need to consider certain expenses as an adult. The trainers told us that the students would often work through the application without completing their assignment (such as emailing or printing steps) because they would get distracted by looking at different career options.  This would cause frustration for the students as they would have to go back through each step of the application to reach the page they needed to email or print to their teacher to complete the assignment and receive credit. 

As the interviews continued, we did a simple competitive analysis to other existing lifestyle calculators. Knowing the popularity of sharing and social media among our target users, we explored different social media sites to examine if the existing reality check site, or other lifestyle calculators we identified, were commonly shared. We found that the existing site was shared, but interestingly enough, the majority of posts and shares we could see were among adult users who found the site on their own. This helped us to identify a secondary user group for the site. We knew the primary users were teenagers and young adults, but knowing that adults used and found value in the site as well would impact some of the decisions we made as we worked our way through the design process.

We also evaluated the site’s analytics, specifically looking for pain points or areas of the site that were under-utilized.  In doing this, we identified three areas as points of entry for the form and discovered that one of the entry point options had not been used in the last three years.  We recommended that they eliminate or replace that option, as there was no value in maintaining it.

Revisiting the usability challenge the trainers had identified, we decided to come up with a “Quick View” option as a new third entry point, replacing the one no longer used. For the students who forgot to complete their assignments as they were working through the website, the Quick View gives them the ability to go to a single screen, input the information (from recall on how they had previously answered) and, with one click of the button, arrive at the page they need to print without having to go through all 13 preceding steps.  This Quick View was also well suited for secondary and tertiary audiences (such as adults) who were interested in seeing the overall data. 

Moving beyond research, we worked on the information architecture of the site and restructured and reorganized the sections to simplify the work flow and present them in a logical order that supported the students’ education and understanding as they moved through each step. We did an in-depth content audit and catalogued every piece of information on the site to optimize the structure, eliminate unnecessary content, and ensure that every piece of content was purposeful and thoughtful. We focused on the content strategy of the site and frequently revisited the strategy through the duration of the project.  A lot of care, discussion, and analysis went into how each step of the form would be interpreted by the students. We looked for ways to explain concepts to students without being verbose or using words that didn’t provide value to the audience. 

There were no existing brand guidelines. We created the logo, color scheme, and overall look and feel from scratch, aiming to make the tone and personality of the site relatable to its young users, while not alienating adults.

Accessibility:

In the accessibility world, there are different compliance levels that sites can build to. Federal and state governments are currently mandated to comply with Section 508 standards—this level of compliance is minimal where accessibility is concerned. A better practice within the accessibility community is to build to WCAG (Web Content Accessibility Guidelines) 2.0 AA rating.  We met WCAG 2.0 AA rating for this site.

Accessibility was a major component of this project. If a site is not accessible, then the accessibility community requests access to a text-only site.  If it’s text only, people who are rehabilitated (i.e., with no use of arms) can use different tools or utilize keyboard controls to access the site. However, the experience is greatly diminished, as there is no media and no imagery. Our goal was to make the website rich, interactive, and fully accessible, with the ability to interact with different input devices and assistive technologies.

As an example, we continually tested with JAWS, which is a Windows-based screen reader.  When testing for accessibility, most folks rely on code evaluation tools to validate semantic HTML. However, this method doesn’t enable your understanding of the user experience for a person using assistive technology or different types of input (such as “keyboard only”).  While developing the website, our team used only keyboards (eliminating the use of the mouse) to validate the user experience of the rehabilitated audience. There were other unique features built into the site for the accessibility community. One such feature was for the video player. There were keyboard controls for the video player, but the team wanted to add a button (by using jQuery) that would allow the user to toggle by hitting the space bar or the enter key.  This feature allowed for greater accessibility to navigate the site, without distracting other users.  

Testing:

TWC went through an extensive eight-week testing process to assess against accessibility, usability, vulnerabilities, and performance and were very satisfied with the findings. Throughout the process, they vetted the site on multiple mobile devices (as students are largely mobile) to ensure that the website was mobile first. 

The new site compared to the old site was a cleaner and crisper design.

 

Technology:

  • NET MVC
  • HTML5
  • CSS3
  • JavaScript
  • jQuery

AIS delivered a solution that fully met the expectations of the client to deliver a single accessible and responsive website targeted to teenagers and young adults.