Enhancing Accessibility and Enrollment: The Redesign of Open Door Preschools’ Mobile Website
Open Door Preschools is a non-profit organization dedicated to providing high-quality early childhood education to underserved communities. Their mission is to create inclusive, nurturing, and enriching environments for young children, fostering their social, emotional, and cognitive development. Open Door Preschools prioritize accessibility and equity, ensuring that every child has the opportunity to thrive and receive a strong educational foundation, regardless of their background or circumstances.
Want to view my Live Presentation?
Project Overview
CHALLENGE
Open Door Preschools is a nonprofit organization that prioritizes providing childhood education for young children. They have a primary goal of increasing enrollment on their website while ensuring its mobile-friendliness, since they are currently relying on their mobile websites and events.
SOLUTION
Design a mobile website that meets the goals of the business and users
Reorganize the content in the website so the information is easily found by prospective parents
ROLE
UX, UI Designer, UX Researcher
TEAM
Julia, Erin, Kashia, and Elisa
TIME
12 weeks
TASK
Updated mobile website
TOOLS
Figma, Miro, Google Software
Research
Research Goals
When we first met with our clients, their needs for the website focused on increasing enrollment within their site and making their site mobile friendly. All things within our skill level that we could accomplish.
At this point, I was really excited to start working on this project since the work would be hands-on and we were actually working with real life clients. However, there were a few things that I struggled with regarding confidence and my social anxiety. I define myself as introverted and can find it difficult to speak to new people or speak up if I don't agree with someone's opinion design-wise. However, this was something I found myself to get more comfortable with as the project went on.
In preparation to dive into our research, my team and I set some clear goals and created research questions that would guide our research process.
“What do we need to change or adjust in the current website to attract more people to enroll their kids?”
Understand the wants and needs of Open Door Preschool
Identify Open Door Preschool’s target audience
Identify Open Door Preschool’s competitors and evaluate strengths and weaknesses
Understand how people discover preschools
Understand the experiences people have on the website
Discover pain points that people encounter on the website
Keeping these goals in mind, we decided to make their website mobile and user friendly with the use of wireframes and mockups and updating content or adding any necessary pages and features to aid the flow of their website to help increase enrollment rate and donations.
Competitive and Open Door Preschool Analysis
A large portion of this project consisted of understanding the website we were working on, the competition, and understanding the minds of our target audience. My main role in the research phase I took part in was the deep dive of the competitive analysis to compare competing preschools websites to see what features and content differed from how Open Doors website was set up.
One important thing I noticed is that a lot of the homepages of these websites were showing information regarding the enrollment, mission statement of the school and other small and important information, while open doors homepage mainly consisted of their fundraising events and how to donate. Other things I took note of were the clear headings, hierarchy, and UX writing of the sites.
Provisional Personas
Using the insights gained from secondary research, we created provisional personas to quickly identify Open Door Preschool’s potential users. These provisional personas helped set the criteria for our interview participants user interviews.
User Interviews
Conducting interviews with parents added another layer of insights. We conducted interviews with 6 people, about 15-20 minutes each. Some questions asked during the interview:
I partook in the synthesizing of the information we gathered from our interviews. The main goal of conducting these interviews was to see how functional and easy to use the site was through task based questions and asking parents what are the most important things to them regarding their children's education.
Using notes from my last semester 's Design Research class, I annotated and transcribed two of the five interviews we did and highlighted 5 different aspects: Wants, Assumptions, Needs, Behaviors, and Feelings to get a better understanding of the answers each parent gave us. From there, those five different aspects were narrowed down into deeper categories in our affinity and empathy maps. This aided us in creating a list of common insights that we could control shared by the participants.
Empathy Map
Using empathy maps, I synthesized all the information I gathered from my two user interviews to uncover key insights that helped us understand Open Door Preschool’s target user group.
First, I started by categorizing my notes into the categories of Doing, Thinking-Feeling, Seeing, and Hearing to get an overall understanding of everything learned during my interviews with the different participants.
Think-Feeling
Many people discussed they would want to see the curriculum, locations, and important information on the homepage.
Doing-Say
Many people mentioned being overwhelmed by the amount of information on the homepage and that the tabs are confusing.
Hear
People expressed their needs for needing their children in preschool since they work all day, a few participants mentioned they have to scroll all the way down to the bottom of the page to find relevant information.
See
People shared that the website is easy to read, has happy images, and includes a lot of colors.
Affinity Map
To get a better understanding of all the observations from the interviews and empathy maps, we used affinity maps to synthesize our findings. This helped me to get a better look at the different experiences users had and allowed us to draw connections and uncover key insights. These insights would help us identify what improvements would need to be made on our design to make sure we are helping our users painlessly meet their goals.
Amongst the patterns I uncovered, I was able to identify insights that were out of our control and ones that were within our control as UX designers.
Based on these common insights, we were able to identify what improvements we should prioritize on the design.
Define
Defining the Problems
Wrapping up our research phase, we were all able to agree on the problem to solve:
“How might we assure parents that their children are being provided a safe and valued education with the use of a professional and easy to use site?”
Ideation
Brainstorming
Now that we knew what problems we needed to solve for Open Door Preschool, I started my brainstorming process to come up with solutions to those problems. I used the HMW questions that I identified and used those to help me brainstorm different ideas while bouncing those ideas off of each other. From brainstorming, I ended up with a lot of different ideas - now I wanted to strategize and determine which solutions we should prioritize to most effectively help Open Door Preschool meet their goals.
Before I could make any decisions on what kind of solutions we wanted to implement, I needed to have a clear understanding of the goals we are trying to meet. These goals would help guide the decisions made moving forward to ensure we are moving towards the right direction.
Design
The design phase involved sketching, content organization, and wireframing based on the analysis and common insights gathered during the research phase. These wireframes served as the foundation for the project’s design.
Lo-Fi Wireframe Sketches
Using our ideas from our brainstorming methods, we each split up the website so we could each have a page or two to work on and redesign during our sketches. We planned on redesigning the homepage, navigation, our story/our team, location/scheduling, enrollment/how to donate, curriculum/mission & values, and safety policies pages.
From there we each sketched out our ideas of what the pages should look like from our insights and started deciding what content would be highlighted in which frame.
At this point in the semester, I knew I had been overworking myself. I’m a full time student, this semester I was enrolled in 4 classes. At the time, I was also working two part time jobs. Since the semester was also nearing spring break, my mom and I decided to take a week-long trip to Boston, Salem, and Newport, a trip we had been planning since the beginning of the year. But by the end of our vacation I started to get sick. I had gotten a cold, my throat was sore, my voice was gone, I was miserable. Unfortunately the list does not end there. By the time we landed back in Austin, I contracted two infections, experienced chest tightness, and my voice still hadn’t returned. Now I’m never the type of person to get sick like this often, so I knew something was up. Turns out, I had pneumonia.
It was a struggle working through this phase in the project because I had so much going on at the moment, but while I was sick I had realized that self care is super important and having a routine for yourself even if that’s just making your bed in the morning is essential in feeling your best. I know when I feel great, that’s when I can deliver my best work.
Mid-Fidelity Wireframes
Taking those lo-fi wireframe sketches, I digitized them on Figma and added enough information for users to be able to navigate through the pages and complete tasks I would present to them during usability testing, although we didn’t end up doing usability testing because of time constraints. These mid-fidelity wireframes would help our focus on what needed to be improved in terms of the functionality of my design.
By now, we’ve shown our work to the clients in which they asked that we include their more updated information of tuition rates along with updated policies as well. We also checked in the Squarespace site to make sure that the design is responsive and effective across the different device screens that users would be accessing the website on and to make sure that we were within the limitations of what Squarespace offers.
High Fidelity Wireframes
Incorporating visual elements in line with Open Door Preschool’s branding, I worked on the UI design of the website and created high fidelity wireframes.
Prototype & Test
Prototype
The most challenging aspect of the design phase was the creation of the prototype. To maintain clarity and consistency, and that having too many cooks in the kitchen would be confusing, we decided to dedicate the task to one person: me. This part of the project turned out to be a demanding endeavor.
Now this experience for me honestly was the most stressful part in the entire project. Not only did I finish the prototype and learn how to deal with component sets during the process, but a week before we were supposed to deliver and hand off these wireframes, I realized while I was messing around with the carousels arrow buttons and resizing the frames of the component sets. I had messed up the animations for every single one of my carousels. Given I only had five, it was still a lot to process that last week, but I managed to get myself together. I asked Erin, one of our teammates, to take over the design reference document I was currently working on (which she gladly accepted thank you Erin) and set aside a few hours of my time that day to fix them and make sure I had them ready in time for our presentation. Here's a small glimpse of our prototype and final design.
Reflection & Next Steps
When I first started this project, the whole idea of it was super daunting to me. This was one of the first classes over the span of the three years I've been at Austin Community College that had only four in person sessions and where we, as the students, would have to schedule all of our own meetings with the project and design managers, the clients, and the design team. Amongst ourselves we had to meet on a weekly basis to make sure we stayed updated and that we knew what was going on.
With all those circumstances, I really had to rely on my time management and communication skills (ones that I did need to work on at the time) to produce better productivity and relieve my stress to the point where I could increase my ability to achieve those goals.
I feel like having an opportunity to be involved in service learning really opened my eyes to the experiences and challenges of working in a design team and with actual clients. It increased my ability to problem solve under pressure and focus on my time management skills while emphasizing other areas I could work on like my social anxiety during the research phase. This was definitely a great and fun project to work on.
This project provided the opportunity to work in a design team with real clients, uncovering the challenges and rewards of service learning. Challenges included scheduling meetings, communication with various stakeholders, and the need for efficient time management.
The journey through this project highlighted the importance of problem-solving under pressure, time management, and improving communication skills. The project also provided an opportunity to address social anxiety and improve confidence in articulating design choices.
In conclusion, the Open Door Preschool project was not only a valuable design experience but also a journey of personal growth. It showcased how we can overcome challenges and evolve in our professional journey.
USABILITY TESTING
Now that I made revisions to my design and added the visual elements, I would like to test and validate the changes made and observe if any further improvements need to be prioritized.
PRODUCT LAUNCH
With the completed product, we would be able to introduce their new pages and launch the updated content on their website.
FUTURE IMPLEMENTATIONS
With the timeline of this project, I could only focus on the top prioritized features to meet our project goals. However, we would’ve liked to work with the company further to make sure the needs of the users are being met.