Project Overview
Starting the Design
Responsive Site
Awarded Google UI/UX Certification

AfterSchool

User Research Summary

Intended as an program for social good, research for AfterSchool first began with a benchmark of existing after school and summer programs. A broad based survey of parents and students from local schools k-12 was also conducted. The primary research questionnaire consisted of qualitative and quantitative questions that allowed participants to provide insights on their experience with their existing school programs, expectations and resources they might have, along with any concerns they may want to raise.

‍

Initially, it was assumed that many after school programs would already be provided for by the school system. However, upon preliminary research it became clear that most students in underprivileged school districts lack access to organized programs that are both reliable and safe. There is a big need to design and provide for a

Project Overview:

AfterSchool is a program for social good that helps connect students of all ages, backgrounds, and abilities with necessary resources and programs so that they never miss a step.

Project Duration:

May ‘24 - Aug ’24

The Problem:

Education and access to resources can often be a matter of privilege. Underprivileged students of all ages and grade levels without access to resources and after school programs tend to suffer. This often becomes more prominent during long summer breaks when growth and learning get replaced by camps and the experience of family vacations. But what about those with no where to go? How do they stay occupied in order to maintain a competitive advantage amongst their more privileged peers? A lot can be learned and accomplished in 12-16 weeks, and AfterSchool aims to bridge that gap by helping students of all ages, backgrounds, and abilities connect to opportunities and resources so that they never miss a step.

The Goal:

The goal for AfterSchool was to create an easy and accessible way to connect underprivileged youth to resources and afterschool programs outside of regular operating hours. By keeping the program inclusive, free, and accessible to all, AfterSchool could broaden its available services and resources, reaching a larger audience and assisting in the continuous development of our youth.

My Role:

Lead UX Designer & Researcher

Responsibilities:

As the lead UX designer & UX researcher my responsibilities included user research, wireframing, prototyping, usability studies, and product refinement!

User Research + Personas + Problems Statements + User Journey Maps

Understanding the User

User Research Summary

Intended as an program for social good, research for AfterSchool first began with a benchmark of existing after school and summer programs. A broad based survey of parents and students from local schools k-12 was also conducted. The primary research questionnaire consisted of qualitative and quantitative questions that allowed participants to provide insights on their experience with their existing school programs, expectations and resources they might have, along with any concerns they may want to raise.

‍

Initially, it was assumed that many after school programs would already be provided for by the school system. However, upon preliminary research it became clear that most students in underprivileged school districts lack access to organized programs that are both reliable and safe. There is a big need to design and provide for a

User Research: Pain Points
1
Lack of Access to Information & Resources
Students struggle to find relevant, up-to-date information about educational opportunities, scholarships, and extracurriculars, often due to limited internet access or digital skills.
2
Complex and Overwhelming Processes
Navigating scholarship applications and program requirements can feel overly complicated and time-consuming, especially for students balancing school, work, and family duties.
3
Inconsistent Support & Guidance
Many students lack consistent mentorship, leaving them unsure about which opportunities to pursue and how to develop the skills necessary for academic and career success.
4
Barriers in Networking & Connections
Underprivileged students often lack the social networks that connect them to mentors or industry professionals, limiting their exposure to real-world opportunities and career pathways.

Persona: Maxine Johnson

Problem Statement:

Maxine Johnson, a 10-year-old student in a low-income neighborhood, faces challenges in accessing safe and engaging after-school activities. Her mother’s long work hours leave Max responsible for her younger brother, limiting her opportunities to participate in educational and recreational programs. This lack of resources makes it difficult for Max to stay ahead academically and find a supportive community for learning and growth.

‍

User Journey Map:
Finding Safe Spaces!

The goal for Max and similar users is to find a safe and affordable space where she and her brother can study, learn, and engage in enriching activities together.

‍

Persona: David Martinez

Problem Statement:

David Martinez, a 15-year-old student with cerebral palsy, excels academically and has a passion for coding. However, he faces significant challenges in finding accessible programs and resources that cater to his specific needs. Despite his parents’ support, David often struggles to access coding tutorials and tech clubs that accommodate his assistive technology, hindering his ability to improve his skills and connect with like-minded peers.

‍

User Journey Map:
A Man on a Mission!

The goal for David and other similar users is to find accessible coding resources and tech communities that accommodate his needs, enabling him to improve his skills and connect with like-minded peers.

‍

Paper Wireframes + Digital Wireframes + Low-fidelity prototype + Usability Studies

Starting the Design

Sitemap:

Building a basic site map would help as a foundational tool in the UI/UX design process. It aids in creating a well-organized, user-friendly, and scalable app, and helps in planning, communication, development, and user testing, which ultimately contribute to a more successful final product.

‍

Information Architecture:

building an Information Architecture would become a critical step in the UI/UX design process. It would help ensure that information is organized logically and presented clearly, enhancing the user experience, improving navigation, and providing a scalable and efficient framework for future growth.

‍

Paper Wireframes:

Taking the time to draft iterations of the AfterSchool app on paper ensured that the elements that made it to digital wireframes would be well suited to address user pain points. The goal was to keep navigation light, fun and engaging while considering users of all ages and abilities to unsure the designs were accessible and inclusive.

‍

As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. A personalized experience with an emphasis on safety and security, along with strong visual navigation for accessibility and ease of use was a top priority.

Simple and intuitive user interactions would help keep user flows streamlined. Digital wireframes strived for a clear and consistent structure, with bold headings and easy to access content. It was important to keep content both simple and diverse to address a wide array of user needs and allow the app to work well with assistive technologies.

Low Fidelity Prototype:

Link to the Low-Fidelity Prototype

Usability Study Findings:

5 moderated usability studies were conducted with participants ranging in age from 8-18. Most had experience using mobile devices and applications. The goal was to recruit a diverse sample of students in terms of age, gender, ability, and level of technical know-how to ensure comprehensive insights. Participants were evaluated as they made their way through 5 different prompts. The findings from each usability study (2 Rounds) have been synthesized below!

‍

Round 1 Findings
1
The early lo-fidelity prototype came with a slight learning curb, however most user were easily able to understand the general structure of the app, and proceed through the individual prompts with ease.
2
The majority of participants found the AfterSchool lo-fidelity prototype to be rather robust and well structured with regards to content and availability of features. They found the font size and contrast easy to comprehend and were easily able to navigate the main user flows within the app.
3
After observing participants make their way through various prompts it became clear that some interactions required further development to help improve user flows. Additionally, there were some sections that were identified where the user journeys could benefit from additional information including graphics or iconography
Round 2 Findings
1
Participants noted occasional delays in interactions, particularly when transitioning between screens or performing specific tasks. Incorporating smoother transitions and microinteractions, such as subtle animations or visual feedback, could enhance the app’s responsiveness and user satisfaction.
2
Some users expressed a desire for more personalized content or recommendations based on their preferences and past interactions. Introducing more tailored user experiences could increase engagement and make the app feel more relevant to individual users.
3
Some users reported feeling uncertain during the initial onboarding. Enhancing the onboarding flow with clearer guidance, simplified instructions, or a brief tutorial on first use could help new users understand the app’s key features more quickly.
Mockups + High-Fidelity Prototypes + Accessibility

Refining the Design

Mockups

Initial feedback showed the home screen’s navigation had a slight learning curve that participants had to overcome. This was improved by removing unnecessary content to make space for visuals and headings, building a new navigation component that users could identify with along with a virtual assistant that could help support user flows

‍

As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research. A personalized experience along with strong visual navigation for ease of use was a top priority.