City District School Board is a website that helps new immigrant parents to find all the information about education for their children.
Project duration:
May 2021 to June 2022
The problem:
New immigrants often have difficulty finding information about schools and programs for their children.
The goal:
Design an app that provides detailed ingredients for each dish to people who want to have a healthy eating style or/and have food allergies.
My role:
UX designer designing a website for new immigrant parents to find schools and programs for their children.
Responsibilities:
Conducting interviews, paper, and digital wireframes, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs and expectations. A primary user group identified through research was users who are parents and also new immigrants to the country. They would like to find information about schools, and education programs for their children.
Users also confirmed most information they found through WhatsApp group or website that does not have all the information. Now all the information they can find on a single website, the time spent on additional research, and the confusion they had to face under different education systems remain high, which make their finding become difficult.
Pain Points
New immigrant parents already have so many things to deal with while they do have not much time to go through different sources to find the information they need
Even though the school is just 3 minutes walking distance, but often told they do not belong to the assigned area. It makes parents confused about where they can find the assigned school.
Not all the information on the internet represents the truth. Parents have to take additional steps to ascertain whether or not the information is trustable.
Persona & Problem Statement
Andrea is a full-time mom who recently moved to Canada. She would like to find schools and daycares for her children near her home. As a new immigrant, Andrea is facing the challenge of finding reliable information about education in her area. Also, she has no idea how many schools are around her home.
User Journey Map
Mapping Andrea Corey’s journey revealed how helpful it would be for users to use the City District School Board website to find schools and daycares near her home.
Sitemap
Paper Wireframes
Spending time to sketch out ideas for the website on paper ensures elements that will be on the digital wireframes that are able to solve the user pain points. In this stage, I would like to prioritize the functionality and transitions between screens that can provide an overview of how the school finder works.
Digital Wireframes
In the initial design phase as this stage, I made sure to have screen designs that base on the feedback and research findings.
Make it easy for users to view the results by switching the map and search panel based on the feedback.
Low-fidelity prototype
I created a set of digital wireframes to showcase the primary user flow. The prototype is going to be used in a usability study.
Usability Study: Findings
I conducted two rounds of usability studies. These studies provide helpful guidance for mock up and lead the way to the refinement of the prototype to the high-fidelity prototype.
Round 1 findings
1. Filling in the fields takes a long time
2. Not sure if the user can leave the field blank or not
Round 2 findings
1. Reset the field for the search panel to make users spend more time refilling the info
2. Not being able to use the current location of the user make it hard to use the search panel
Mockups
The early low fidelity design allowed adjustments based on usability studies' findings. I modified the design of the search field with the drop-down menu, so users do not need to spend a long time filling/refilling out the fields.
The second usability study revealed the frustration with the users trying to find a way to use their current location to refine their search results. In the new phase, I provide them the ability to use their current location before entering the school finder panel.
Key Mockups (Desktop Site)
Key Mockups (Mobile Site)
High-fidelity Prototype
The final high-fidelity prototype presented clear user flows for the user to use the current location as an option to refine their search. It also provides drop-down menus to make it easier to complete the task for school searching.
Accessibility Considerations
1. Provide stronger color contrast on the overall screen to users who are vision impaired, making sure text and icons are readable.
2. User Google Maps to help users with reading disorders to navigate the schools’ locations easier. Also, provide additional school info as follows to make sure the screen reader will work properly on the screen
3. All images will provide alt text, buttons and hyperlinks will have aria-label to ensure meet the WCAG, AODA, and ADA standards
Takeaways
Impact
The website helps many new immigrant parents to find all the information about education, school, and daycare locations around their location, which provide them convenient and worry-free when looking for an institution for their children.
One quote from the peer feedback:
“Now I don’t have to spend hours and hours looking for information from many sites, saving more time to get used to the new environment is a huge plus”
What I Learned
Usability studies and user feedbacks have huge impacts on moving the project in a different direction. Especially, when taking accessibility compliance, and web development into account. Having the ability to review user feedback is beneficial for product/service development.
Next Steps
1. Conduct 1 round of usability studies to see if the pain points users experienced have been resolved.
2. Conduct another 2 rounds of usability studies to implement new features such as registers for events and programs, and booking summer camps or workshops.