Anabel Toribio
Texas Educator Association
Responsive Web Design Case Study
Public school professionals need to efficiently access TEA data and links. The current website is not scannable, creating frustration and avoidance.
the project
Problem Overview
THE PROBLEM: Public school professionals need to efficiently access to TEA data and links. The
current website is not scannable, creating frustration and avoidance for users.
​
THE SOLUTION: Creating a more scannable website for educators and administrators will allow
users access to pertinent information they need to do their jobs.
​
TIME FRAME: 3 weeks
​
My ROLE: UX/UI designer (Individual Project)
​
EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
TESTING
Tools
The Team
Individual Project
Figma, miro,
invision, Photoshop
empathize
About TEA
"improves outcomes for public
school students."
Texas Educator Agency (TEA) is the state agency that oversees primary and secondary public education. TEA improves outcomes for all public school students in the state by providing leadership, guidance, and support to school systems.
​
Research Plan
research
User Path
User Persona
Usability Testing
5-Second User Tests
Analysis
Design
Card Sorting
Sitemapping
Feature Prioritization Matrix
Hueristic Analysis
Accessibility Analysis
Wireframing
Low Fidelity Prototype
Style Guide
High Fidelity Prototype
Proto- Persona
I initiated my research by determining my proto-persona. Sydney Moore is a public school administrator who visits the TEA website regularly to access data pertaining to accountability, testing, standards and updates regarding educational regulations from the state.
​
The biggest takeaway with Sydney Moore is her pain points:
(1) She spends more time that looking for data on
TEA and prefers to use google instead.
(2) Finds it challenging to motivate teachers to use TEA as a teaching resource.
(3) Needs to know COVID updates and state regulatory changes on the TEA website quickly.
​
user interview results and responses
For my first usability test, I interviewed five public school educators who use the TEA website.They were recorded via zoom and asked to complete three tasks. Will users easily identify and use navigational cues to accomplish these tasks in the allotted time of five minutes?
TASKS:
(1) finding the Texas Essential Knowledge and Skills [TEKS]; (2) access teacher certification renewal page;
(3) search for their campus Texas Academic Performance Report [TAPR].
​
Task one and three proved to be the most challenging to accomplish for users. There was only a thirty percent success rate when attempting to access the TEKS for task one. Three out of five users were unable to complete the task. Looking up the TAPR report per campus, was also challenging task for users, with a success rate of forty percent. All users were able to complete task two.
Below, are some of the users responses during testing:
"The homepage has too much information and you don't know what to click on..."
Middle School Teacher, TX
User Pathway
I am continuing to evaluate the flow logic and analyzing how users successfully access certain data on the Texas Educator Agency (TEA) website through both the mobile and desktop platforms. I am specifically looking at how users retrieve current TEK standards as it had the lowest success rate of completing the task among the first usability test. As illustrated below in the mobile platform screen shots, the user is expected to navigate seven pages to access teaching standards for high school Art 1. How could we streamline the process of reaching the TEKS directly from the homepage instead of asking users to navigate through so many pages?
Accessiblity:
After conducting the color accessibility test, the contrast ratio for the original palette measured 4.03 and 4.32.--the recommendation being that the color palette needed to be slighter darker in contrast to improve readability.
define
Heuristic Analysis: Issues uncovered
I conducted a heuristics evaluation by redlining the homepage to look for specific user interface issues that led for users to describe the scannability problems they describe when using the site.
Problem 1
The drop-down mega-menu on the home page is difficult to avoid if not in use or challenging to leave open when in a hover state.
Problem 2
The proximity of the three navigation bars in the header creates a highly an imbalance of white space and needs to be streamlined. The header appears to be, "very busy, and "uninviting,"as stated by users.
Problem 3
Problem 4
The drop-down mega- menu is not categorized intuitively for users. All users struggled to figure out where the TEKS and TAPRs where located.
The footer contains nineteen links. We need to relocate utilities users need quick access to including popular platforms.
ideate
PRIORITY MATRIX:
Users constantly struggled as they searched for the data or page to complete their usability testing tasks. They complained of too many menu options and this caused confusion and frustration. After reviewing and classifying data on an empathy map, I conducting a feature prioritization matrix. The top three features that I would re-design for the new TEA responsive web design would be to:
​
-
Create cards containing the most popular platforms on a carousel format found directly on the homepage like the TEKS.
-
Re-organize the main navigation to remove redundant links and allow users to find items quickly.
-
Remove hover characteristics that make the mega-menu difficult to avoid when navigating to other areas of the homepage.
ui style directions-style tile:
From the very beginning, I was inspired by a minimalist approach for the TEA website and chose clean buttons and san-serif fonts to accomplish this. I wanted to avoid this sense of overwhelm that users experienced when landing on the homepage, confronted by too many links and visual stimulation.
​
TEA is the educational resource for the state of Texas and the style adjectives I used to guide my style direction are: administrative, informative, conservative and authoritative with a dash of joy. I kept the palette close to the original website design but added a bolder orange, saturated cerulean blue and yellow ochre, feeling that the palette also needs to conveys a cheerfulness and hope that is associated with the education of young students.
​
I chose to add a hero section that dominates the home page after all five users described how uninviting the TEA homepage felt. The hero section contains a photograph of a classroom full of students engaged in a lesson with the teacher at the forefront. Super-imposed on the photograph is quote taken directly from the organizations mission statement, reminding users of the goals of TEA and the website as a primary source of information for educators across Texas.
​
information architecture
During the card sorting process, three hundred and seventeen links found in the header, footer and megamenu were recategorized to reflect a more intuitive navigational pathways. I eliminated items that were listed in more than one place and organized the primary navigation to reflect the needs of the stakeholders: Educators, Families and Administration.
prototyping
lo - fidelity prototype:
I began my lo-fidelity prototype sketches with several goals in mind based data I collected from my first user test:
​
(1) Create enough white balance in the header that creates more scannability.
​
(2) Position the primary navigation above the fold and add a meaningful hero image that conveys the mission of TEA.
​
(3) Add a carousel below the hero image that gives direct access to popular platforms including TEKS and teacher learning resources.
​
(4) Classify the primary navigation for stakeholder use of ease.
​
(5) View TEA news and events in second carousel.
​
(6) Design a more streamlined footer.
testing
2nd Usability Research user task scenarios
During my second usability testing, I continued to evaluate the flow logic and analyzing how users successfully access certain data on the Texas Educator Agency (TEA) website through both the redesigned mobile and desktop platforms. Below are the user scenarios that where examined.
Task 1
As a new teacher, you want to make sure you are meeting all legal requirements for your students with special needs. Locate this information on the TEA website. You cannot use the search bar.
Task 2
As a new teacher, you need to understand the various ways you will be evaluated throughout the year. Locate this information on the TEA website. You cannot use the search bar.
Task 3
You are a star teacher and have been asked to present the lastest TAPR report to all the faculty and staff during the campuse's next faculty meeting. Access the data to prepare your presentation. You cannot use the search bar.
Task 4
You are a new teacher, teaching 6th grade Math. Locate the TEKS (TEXAS Essential Knowledge and Skills) you will need to reference this year on the TEA website. You cannot use the search bar.
hi-fidelity prototype:
5 second testing for desktop platform
After conducting a five second usability test, where users only spend five seconds viewing the homepage, I was able to pin-point the first impressions users had with the hi-fidelity prototype and any UI issues that they experienced. Below are the following iterations that took place:
​
I increased the font size of the primary navigation menu to 24 px for the desktop platform after one user stated the primary navigation looked too small. She wished the text was larger.
​
I added a yellow ochre line to create contrast between the hero image and the footer - as one user stated that, "everything looked blue," which hinted that the page could be too monochromatic and therefore create scannability issues.
​
I lightened the photo filter on the hero image to increase
saturation of the home image.
​
​
hi-fidelity prototype:
3rd Usability Testing
Iterations for mobile platform:
I concluded my testing phase with a third usability testing session for both mobile and desktop platforms. Below are the following iterations that took place:
-
After users struggled to sign up for updates, I added a sign up pop-up banner in the hero section instead of searching in the footer links.
​
-
Popular platforms was converted into a carousel that is easily accessible below the hero page, after users took longer to navigate the mobile platform to find them in the footer section.
hi-fidelity prototype: 3rd Usability Testing
Iterations for desktop platform:
-
I added sign up on pop-up header for user to see instead of searching in footer links. The header stays in place while scrolling for easy access.
​
-
Popular platforms was converted into a carousel that is easily accessible below the hero page, after users took longer to navigate the mobile platform to find them in the footer section.
Reflections
The educators who took part in user testing were not aware of the many resources that
TEA.texas.gov provides and as a result, avoid the website due to its cluttered interface and difficult navigation. This is unfortunate as many platforms hosted by TEA provide invaluable resources for teachers and administrators and staff.
​
After further examining this design sprint, an additional feature that would greatly benefit both TEA and school districts is to provide teachers with the number of professional development hours they have accrued every year to renew their standard Texas Teacher certification. Having this information on hand through the TEA website would allow both TEA, district and staff additional information for a timely renewal process.
​
Future Directions: Users of the TEA website would considerably benefit from an APP that would allow for users to access platforms quickly and conveniently. Most users spoke about habitually accessing the TEA website on their phone, due to nature of the job-they rarely are at their desks to open up the TEA page on a laptop or desktop. A mobile APP would readily give users access to popular platforms. This would improve user experience and better inform educators and all other stakeholders.