Capitol School
of Austin
CONTEXT
Redesigned aspects of the Capitol School website to make it accessible, and designed an application portal to increase the efficiency of the application process. This case study was part of a project as a DesignLab student.
Overview
BACKGROUND
The Capitol School of Austin is Austin’s first and only private, specialized program for children with primarily language-based learning differences. It’s also where I started my design career in 2018. When I wasn’t working as a teaching assistant in the first-grade classroom, I volunteered my spare time redesigning the school website so it better reflected their brand and mission.
THE CHALLENGE
Fix accessibility issues, and make the website easier to use for parents.
After starting DesignLab’s UX Academy in the Summer of 2023 and looking back at the website I designed, I realized that several aspects of the website did not meet accessibility guidelines. It was also not designed with its users in mind. I needed to understand how current and prospective parents use school websites.
THE SOLUTION
An accessible website and an application portal.
The application portal replaced the PDF application that is currently on the website saving time for both parents and the school.
PROJECT CONSTRAINTS
Design with business goals in mind.
The main goals were to increase enrollment and provide information to current and prospective parents.
No access to new content.
Since I wasn't working with the school for this project, I had to use whatever content was available on the website.
Unable to implement solution.
Due to time constraints, I did not reach out to work with the school. My design is not on the current website.
Keep branding intact.
In an effort to finish the project in 65 hours, I set a constraint to keep the school's current logo and branding.
The Process
Discover
RESEARCH METHODS
Accessibility audit.
Identify accessibility issues with the current school website.
Competitor analysis.
Understand how the Capitol School website stacks up to competitors.
User interviews.
Learn how parents use school websites and uncover any pain points while using them.
Baseline usability test.
Establish metrics for UX benchmarks, and identify the biggest usability pain points with the current website.
ACCESSIBILITY AUDIT
Several aspects of Capitol School's website were not accessible.
Color contrast wasn’t high enough for many of the navigation elements.
Application is not accessible on mobile devices.
Sitemap is not organized in a logical manner.
Colors and patterns make website look cluttered.
COMPETITOR ANALYSIS
All of Capitol School's competitors have an online application process.
Capitol School’s current admissions process requires parents to download and fill out a PDF and either email, mail, or turn in the application in person. These results suggest that the Capitol School website might benefit from an online application process or a parent portal.
.png)
USER INTERVIEWS
Parents prefer online applications that they can "come and go" from.
School enrollment applications are very long and tedious, and busy parents don't always have time to finish it in one setting. Parents prefer when they can fill out the application online and save it for later. During the school year, parents want a single place to access information about their child's performance, their teacher, and calendars and pay fees.
.png)
BASELINE USABILITY TEST
66% of participants didn’t like the fact that the application form on the website was a PDF.
Participants mentioned that they weren't sure what to do with the PDF application after filling it out. They were also confused about how to get back to the school's website because the PDF didn't open up in a new tab.
Define
AFFINITY MAP INSIGHTS
Theme 1: Parents prefer to fill out online applications
​
-
83% of participants preferred online application forms because of their convenience
-
33% said that they liked it when the online form allowed them to “come and go” from the application
​​
Theme 2: Prospective parents want information about the school's reputation
​
-
66% of participants said that a school’s reputation in the community is the most important to them when looking into schools as a prospective parent
-
The school’s reputation was followed by class size, cost, and parent reviews
4/6 participants said a school's reputation is important when looking for a school
3/6 participants said that class size is important when looking for a school
3/6 participants said that cost is important when looking for a school
3/6 participants said that parent reviews are important when looking for a school
5/6 participants preferred online application forms
2/6 participants liked when online forms allow them to "come and go"
PERSONAS
Based on the insights I gathered from the user interviews and affinity mapping, I discovered that the participants fell into one of two groups: prospective parents and current parents. For this case study, I focused on the persona of the prospective parent since it aligns with the business goal of increasing enrollment.
THE PROBLEM
Parents feel that the current application process is unclear, cumbersome, and time-consuming.
Potential students must meet certain criteria to be enrolled, so the school has a very thorough application process. The application requires parents to send school records and observation forms to current therapists and teachers, however, parents have to keep track of all the paperwork manually.
Ideate
IDEATION PROCESS
After defining the user's problems, I brainstormed possible solutions using the "creative constraints" technique. I turned on a timer for five minutes and wrote down as many solutions as I could think of.
Page or section explaining how to submit an application.
Application FAQs
One-stop shop for all information a prospective parent will need.
Landing Page for Prospective Parents
Inbedded form on Capitol School's website (similar to donation form).
Online
Application Form
Parents create an account so they can come and go from the application.
Application Portal
Design
SITEMAP
Based on the results of my accessibility audit and the baseline usability tests, it was evident that the current sitemap didn’t reflect the user’s mental model. I reorganized the sitemap with the director’s and parents’ goals in mind.
Current Sitemap
New Sitemap
.png)
USER FLOW
To determine how Susan would interact with the new application portal, I created the user flow below.
.png)
LOW- & MID-FIDELITY WIREFRAMES
After sketching out low-fidelity wireframes, I designed mid-fidelity frames in Figma. I used these wireframes to conduct usability tests and validate my solution before designing the high-fidelity mockups.
USABILITY TESTING WITH MID-FIDELITY WIREFRAMES
I conducted moderated usability tests with five participants using Google Meet and Figma. In an effort to save time, I only conducted the tests with the desktop screens.
USABILITY TESTING RESULTS & ITERATIONS
Expected Results
1. The new homepage reflects the needs of prospective parens
2. The new sitemap reflects the users' mental model
.png)
Unexpected Results
1. Too much text on Admissions Process page
Revision: Added​ images to the right side of each step to break up the text
2. Participants didn't click "Start Application" under step 2
Revision: Changed the text from "Already started an application? to "Have questions about our admissions process?"
3. Participants asked "How do I schedule a visit?"
Revision: Designed a visit scheduler, which allows parents to schedule a visit directly on the "Admissions Process" page
4. Participants wanted to make sure their progress was saved
Revision: Designed an "Are you sure you want to exit?" pop-up message to show that progress was saved”
HIGH-FIDELITY MOCKUPS
The next step in my design process was to use the results from the usability tests to design high-fidelity mockups of the Capitol School website for both mobile and desktop devices in Figma.
Test
I conducted unmoderated usability tests with six participants on Maze. Each participant completed three tasks: learn more about the application process, schedule a visit, and start an application.
RESULTS
9.8/10
Satisfaction Rating
Learn More
9.2/10
Satisfaction Rating
Schedule a Visit
7.5/10
Satisfaction Rating
Start an Application
UNEXPECTED RESULTS
"Did I choose the right date?"
1.
50% of participants felt that the colors of available days vs. selected days on the calendar were too similar.
2.
Clicking "Apply" in nav bar
50% of participants expected the application portal to open after clicking "Apply."
Participants clicked tertiary links to exit the portal
3.
33% of participants thought the tertiary link was the only way to save progress.
4.
"Was my progress saved?"
50% of participants wondered if their progress in the application was saved.
HIGH-PRIORITY REVISIONS
1. Available vs. selected date colors
I changed the available visit days to a purple outline. The selected state is similar to the original color used to portray available days, but it has a much more stark contrast when compared to the purple outline.
.png)
2. Changed button CTAs on website navigation bar
Prior to the usability tests, the “Apply” button was linked to the Admissions Process page. I changed the navigation so the button links to the application portal. I also changed the “Parent Portal” to say “CSA Parents” so prospective parents don’t get confused with the two portals right next to each other.
.png)
3. Changed the "Sign Out" CTA in the application portal
I changed the “Sign Out” button to say “Save & Exit” so it’s more consistent with the tertiary links located on the section introduction pages under the “Start Section” buttons.
.png)
4. Clarify the "application saved" pop-up
I changed the title from “Are you sure you want to exit?” to “Your progress has been saved!” so it’s the first thing that the user sees and they feel reassured that their progress was saved.
.png)
Next Steps
FUTURE FEATURES
Incorporate visit scheduler into application portal.
1.
Usability test participants mentioned that it would be nice to have a single place to schedule visits and fill out the application.
2.
Create a parent portal for current parents.
Based on the competitor analysis and user interviews, current parents use their child’s school’s parent portal regularly to stay updated or complete tasks.
Reflection
CONSTRAINTS REVISITED
Design with business goals in mind.
Keeping the business goals top of mind helped me pinpoint the problem I needed to solve. I chose a user problem that overlapped with the business goals (increase enrollment).
No access to new content.
During user interviews, participants mentioned that they would prefer to see photos of the school and students -- not stock photos. I wasn't able to address this problem since I didn't have access to new content.
Unable to implement solution.
Since I did not reach out to work with the school due to time constraints, my solution has not been implemented. I'm also uncertain if the developer would have been able to implement the application portal.
Keep branding intact.
Keeping the branding in tact helped me finish this project within the 65-hour timeframe. That said, I did make some adjustments to the shade of yellow that is currently found on their website to make it more accessible.
LESSONS LEARNED
1. Beware of scope creep
Capitol School’s current application form is twelve pages long. Initially, I designed the entire application (15 screens) for the mid-fidelity wireframes, which took a very long time. However, before starting usability testing, I realized that having participants navigate through all fifteen pages would be time-consuming and they might find the process tedious. After I had this realization, I omitted pages that seemed repetitive (i.e. repetitive components), which narrowed the application pages down to six.
2. Using overlays in Maze
Maze didn’t record the paths that users took when I used the “open overlay” prototype in Figma. I was still able to look into the individual test results and synthesize the data from there. However, it did take a lot longer to synthesize the data this way. From here on out, I learned that it’s best not to use the “open overlay” prototype when conducting usability tests in Maze.