Louisiana Department of Education
Literacy Microsite
Where
Baton Rouge, LA
What
Microsite
Role
UX/UI Designer
Category
Education
When
August 2022 - January 2023
Market Research
Site Audit
User Survey
Personas
Flow Diagrams
Wireframes
High-fidelity UI
Prototype
Mini-Usability Study
Accessibility Evaluation
Overview
The Louisiana Department of Education (LDOE) is tasked with addressing Louisiana’s literacy crisis by providing valuable resources to assist teachers and parents across Louisiana. Their mission plays a vital role in educating students and ultimately improving Louisiana’s future.
Market Research
The Claim
According to 2019 NAEP scores, only 26% of Louisiana’s third graders and 27% of fourth graders are reading on grade level.
The Problem
The core problem is Louisiana’s literacy crisis which LDOE has addressed with the creation of numerous resources. The problem with the resources is that they are difficult to find on the department’s website, louisianabelieves.com.
Current Site Audit
It was important to understand the current state of the resource library and evaluate quickly what could be addressed to improve the overall user experience. Below are some of the immediate observations I was able to capture.
Hierarchy
When first landing on the resource section of the website it isn’t clear where to go to find resources. The orginization of the content and architecture of the page is overwhelming and difficult to navigate. The use of icons doesn’t provide any guidence and are visually redundant.
No Search, Sort or Filter Feature
Once I clicked on one of the resource categories I was taken to the library that required me to find the resource I was looking for by scrolling through a long list. There was no way to search or filter the resources.
User Survey
I conducted a quick survey among teachers and parents to allow me to discover how they use the site currently and learn more about their habits and motives.
What’s the most important factor you take into account while searching for resources?
Time spent searching resources
Having a robust search feature
Organization of Resources
Knowing type of resources
Notable Comments
It would be nice to be able to find the right resources without being overwhelmed by amount of content avialble.
-Lynn
Currently there is not a way to search for resources on the site and you’re left with a cumbersome experience filtering through pages to find what you need
-Jason
I would like to be able to search for resources with the ablity to filter by category.
-Johnny
Initial Research Shows
Teachers and parents need quick access to resources for their students to properly address the literacy problem in Louisiana.
Persona
Based on research findings, I created a persona who represents the target user of the resources and their needs and habits. This helped me to empathize with the end user on the remaining steps of the design process.
Christina
Age 32
Gender Female
Location Baton Rouge
Occupation Teacher
Meet Christina, a 32-year-old female teacher from Louisiana with a passion for teaching literacy. Maria has a Bachelor's degree in Elementary Education from Louisiana State University and a Master's degree in Literacy Education. With over 5 years of teaching experience, Maria has developed a unique teaching approach that focuses on personalized learning plans and interactive activities to improve reading and writing skills. Maria is dedicated to creating a positive and welcoming classroom environment where all students feel supported and motivated to learn.
Frustrations
Despite her passion for teaching literacy, Sarah often finds herself frustrated by the lack of resources available to her students in Louisiana, particularly in schools with limited funding. She is also concerned about the growing number of students who struggle with reading and writing due to the widespread use of digital media and technology.
Motivations
For Christina, seeing her students improve their literacy skills and gain confidence in their abilities is the ultimate motivation. She is driven by the knowledge that her teaching can make a positive impact on her students' lives and futures, helping them to reach their full potential.
Once I went through all my research I was ready to start sketching out my flows and the initial low-fidelity wireframes
Time to start designing
Ideation
Based on the research and persona discovery—I compiled and organized the necessary website content and functionality. During this process I was able to orgnaize resources to help improve findability for users.
User Flow
After priortizing the features I created a user flow to inform the design and show a main task for families looking for resources.
Low-Fidelity Wire Frames
Once the flow diagram was established–I started creating the low–fidelity wireframes of the main flow.
Testing (moderated)
I did some preliminary testing with 3 users that allowed me to gather some initial feedback before I started the high-fidelity protoype. After the testing I decided to make some updates to the homepage.
Task
From the homepage find resources that you could use to help with your childs literacy.
Findings
The 2nd user struggled at first where to go from the homepage to find resrouces for their child. While 2 of the 3 where able to easily access this from the top nav.
Solution
In order to provide the user with an extra enagement pathway I added some CTA’s that highlighted the top 3 users and the actions that they would need to take.
High–Fidelity UI Design
Once the initial flow was complete—I began by defining fonts and colors, and then moved on to designing a few key screens.
Logo
Fonts
Work Hard & Be Nice To People
H1:Lora 400-Normal | 60
Work Hard & Be Nice To People
H2:Lora 400-Normal | 48
Work Hard & Be Nice To People
H3:Lora 400-Normal | 36
Work Hard & Be Nice To People
H4:Poppins 400-Normal | 24
Global Colors
For Teachers & Suppport Staff
For Families
System & School Leaders
Community Partners/Literacy Data/Contact Us
Search
22 High-Fidelity Designs were Created
Based on the feedback from initial usability test, I created high-fidelity designs.
Alignment and Grid
I created a 16 column grid for the layout with 30 px gutter width and 73 px column width.
High-Fidelity Prototype
I connected my high fidelity designs into a clickable prototype that allowed me to have users test a couple of critical flows.
Prototype Validation
I validated my protoype with 3 users and wanted to be sure they understood how to find the specific resource they needed. This was tested over a zoom call, where I introduced the user to the website and asked them questions. The questions were dedicated to finding out how users would naturally look for the content they were seeking. For this round of testing I was more specific about what resource I asked them to find.
Task
Find spanish resources for your child that include activities.
Findings
66% of the users (2 out 3) were able to find the correct resources with no problem based on the task with only one who was unsure how to locate the specific activity category.
Solution
The 2 users that successfully located the resources used the search feature and user 3 managed to get there using the “For Families” tab. Even though there was a sub nav they were stumped on the filtering not having a category option. So I decided to add another filtering option that included categories. Because of time constraints, I wasn’t able to run a second usabality study but went ahead and updated the protoype.
Accessibility Check
The website has been evaluated for contrast to match the AA standards of WCAG. In some cases I had to adjust the brand colors provided by the client in order to meet accessiblity requirements.
One specific example I would like to share is the footer. I wanted to use their main teal brand color as part of the footer, but the choice of color proved to not be fully accessible using white text. In the final version the background color was modified to use the dark teal.
