Selim Aziz
Projects · 01 · AfterSchoolCincinnati, OH · 2025

Designed for the students the system overlooks.

A mobile-first app turning missed opportunities into next steps.

Made With:
End-to-End UX/UI Designer
May '24 - Aug '24
Google UI/UX Certified

DiscoveR

The Problem:
Across the U.S., students from underserved communities are quietly slipping through the cracks. Opportunities exist, but the systems connecting students to them are broken. AfterSchool was designed to bridge that gap.
4.6M
2.7M
Participation in after-school programs among low-income students dropped from 4.6 million to 2.7 million children between 2014 and 2020.
13%
of public-school students participate in academically focused after-school programs.
34%
Students lose approximately 25–34% of their math achievement gains and 17–28% of reading gains during summer break without continued learning engagement.
42%
of schools report they are unable to provide after-school programming to all students who want to attend.
45%
Nearly half of U.S. children do not participate in any structured summer learning or enrichment programs.
The Key Insight
Students frequently learn about opportunities through teachers, parents, or peers rather than any centralized system. Whether a student finds what's available comes down to who they happen to know.

With a clear understanding of the problem and the students we're serving, we moved into the Define phase to map user needs and identify the specific moments where design could make the biggest impact.

Define

Pain Points:
Through research, we identified four core barriers preventing underserved students from accessing enrichment programs.
1
Access is broken
Underprivileged students can't find reliable information about programs and opportunities — not because they don't exist, but because there's no centralized system connecting them.
2
The process filters out those who need it most
Scholarship and program applications are designed for students with time, resources, and support. Students juggling school, work, and family responsibilities are filtered out before they even begin.
3
Guidance is a privilege
Consistent mentorship is largely unavailable to underserved students, leaving them without direction on which opportunities to pursue or how to develop the skills to pursue them.
4
Networks are inherited, not earned
Access to mentors and industry professionals is largely determined by who your family already knows — a structural disadvantage that compounds over time for underprivileged students.
Personas:
To understand these barriers at a human level, we created two distinct user personas representing the students most impacted by these challenges.
Maxine (Max)
14 Yrs
8th Grade
Cincinnati, OH
Mom & Brother
Maxine, 14, needs safe and accessible after-school activities for herself and her younger brother, but without reliable programs or support in her neighborhood, staying ahead academically feels out of reach.
David
16 Yrs
9th Grade
Cincinnati, OH
Parents & Sister
David, 16, is an academically driven coding enthusiast with cerebral palsy who can't find programs that accommodate his assistive technology, leaving him isolated from the very communities he belongs in.
Journeys:
By mapping how each persona navigates the problem space, we uncovered specific moments where better design could reduce friction and build confidence.
Max
David
Identifies programs that are safe, engaging, and affordable for her and her brother
ACTION
Identifies programs that accommodate his assistive technology needs
Overwhelmed
FEELING
Excited
Safety and affordability filters are critical
OUTCOME
Accessibility filters must be a core feature, not an afterthought
Max
David
Reviews activities and selects those that suit her and her brother's needs
ACTION
Reviews available coding tutorials and clubs
Relieved
FEELING
Supported
Side by side comparison of programs helps decision making
OUTCOME
Clear compatibility information reduces friction
Max
David
Confirms program details including location, timing, and cost
ACTION
Registers for selected program and confirms accommodations
Satisfied
FEELING
Relieved
Confirmation screen must include pickup/dropoff and cost details
OUTCOME
Accommodation confirmation reduces anxiety before attending
FEELING
Max
David
Registers for chosen programs for herself and her brother
ACTION
Participates in coding activities and connects with peers
Anxious
FEELING
Excited
Registration must support multiple attendees in one flow
OUTCOME
Peer connection features increase engagement and belonging
Max
David
Attends programs and enjoys activities together with her brother
ACTION
Showcases coding projects in a supportive, inclusive environment
Happy
FEELING
Proud
Post-event feedback and ratings improve future recommendations
OUTCOME
Showcase features build confidence and community
Features:
With the user journey mapped, the next step was to identify and organize all potential features. I created a comprehensive list of ideas and grouped them by category, using color coding to visualize relationships and priorities.
Searchable program listing
Program detail page with full info
Save/
bookmark programs
Profile avatar/
photo
Mentor/tutor directory
Confirmation email
Progress tracking within program
Discussion forums
Program search by keyword
Program cards with ratings
Transportation info
Mentor matching
Contact support
Dark mode toggle
Filter by format (online/
in-person/
hybrid)
Host organization display
Personal calendar
User interests/
preferences
Peer connection feed
Calendar sync to phone calendar
Certificate/
completion badge
Mentor messaging
Program search history
Program cards with attendee count
Mentor portfolio showcase
Push notifications
Language options
Filter by accessibility needs
Program start/end dates visible
Calendar notifications
Personalized recommendations
Program reviews/
ratings
Share program with friend
Resource library
Safety information section
Browse all programs by category
Program capacity indicator
Email notifications
Student portfolio showcase
Account settings
Filter by age group
Registration button
Upcoming events reminders
Search by program type (coding, sports, art, etc.)
User testimonials
Program wait-list option
Video tutorials by subject
FAQ section
Advanced filters
Real-time availability
SMS notifications
Privacy controls
In-app messaging
Filter by schedule (weekday/
weekend)
Multi-attendee registration
User profile setup
Accessibility settings
Location/
distance filter
Sign up confirmation
Cancellation/
withdraw from program
Downloadable worksheets
Help/
support chat
Upcoming events carousel
Map view of programs
Parent/
guardian view
Program success stories
News
Featured programs
Recommended Reading
Feedback & suggestions
Tutor/ mentor bio

With a deep understanding of user pain points, detailed personas, comprehensive journey maps, and a prioritized set of features, we began the Develop phase: wireframing user flows, refining information architecture, and building low-fidelity prototypes that would guide self-directed validation before high-fidelity design.

Develop

Sitemap & IA:
With the feature list grouped and prioritized, the next step was translating those ideas into structure. The sitemap and information architecture organized the app around seven destinations, ensuring users could move through the experience without ever feeling lost.
AfterSchool — Mobile
Homepage
(Welcome Message, Registration, Overview of Features, User Login/Sign Up)
Community
  • News
  • Events Calendar
  • Discussion Forums
  • Peer Connection Feed
  • +
Programs
  • Search Bar
  • Featured Programs
  • Programs Categories
  • Program Details
  • Registration
  • User Reviews & Ratings
  • +
Tutoring
  • Tutor Directory
  • Tutor Profile Overview
  • Tutor Matching
  • Tutor Messaging
  • User Reviews & Ratings
  • +
Mentorships
  • Mentor Directory
  • Mentor Portfolio Showcase
  • Mentor Matching
  • Mentor Messaging
  • User Reviews & Ratings
  • +
Account
  • Personal Information
  • User Preferences
  • Notification Settings
  • Privacy & Security
  • Language Preferences
  • Assistive Technology Settings
  • +
Resources
  • Video Tutorials
  • Worksheets & Printables
  • Recommended Reading
  • Resource Library
  • +
Support
  • FAQ
  • Contact Us!
  • Technical Support
  • Feedback & Suggestions
  • +
User Flow Diagram:
With the structure in place, we mapped how users would actually move through it. The program registration flow received the most detailed treatment, while other destinations were noted with representative actions to signal that deeper flows existed.
HomeScreenYesNoExistingUser?LoginCreate ProfilePersonal InfoSet PreferencesSet Assistive Tech NeedsDashboardCommunityProgramsProgramResultsNoProgramDetailsRegister?YesReceiveConfirmationResourcesEducational VideosWorksheets & PrintablesRecommended ReadingResource LibraryNewsEvents CalendarDiscussion ForumsPeer Connection FeedTutoringTutor DirectoryTutor Profile OverviewTutor MatchingTutor MessagingUser Reviews & RatingsMentorshipsMentor DirectoryMentor Portfolio ShowcaseMentor MatchingMentor MessagingUser Reviews & RatingsAccountUser PreferencesNotification SettingsPrivacy & SecurityLanguage PreferencesAssistive Tech SettingsPersonal InformationSupportContact UsTechnical SupportFeedback & SuggestionsTerms of ServicePrivacy PolicyFAQ
Paper Wireframes:
With the structure and flows mapped, it was time to sketch. Paper wireframes allowed us to explore layouts, hierarchy, and interactions quickly, prioritizing ideas over polish.
Digital Wireframes:
Once the strongest concepts emerged, we refined them into digital wireframes, sharpening proportions, spacing, and component relationships while keeping the focus on structure over visual design.
Low-Fidelity Prototype:
With each screen defined, the next step was connecting them. The lo-fi prototype brought the wireframes to life, allowing us to validate flows and the overall experience through self-directed testing before high-fidelity design.

With a refined information architecture, mapped user flows, polished wireframes, and a tested lo-fi prototype, we entered the Deliver phase: shaping the design into high-fidelity mockups, refining the experience through iterative validation, ensuring accessibility, and bringing the final product to life for the students it was built for.

DELIVER

The Outcomes:
User journey mapping and the research phase surfaced five outcomes the design had to deliver on. Each one maps directly to a barrier identified earlier, and each shaped a specific part of the final product. These were the goals the design set out to meet. Judge for yourself how well it did.
Discoverable
Programs surface through a searchable, filterable listing by format, accessibility needs, age group, and schedule.
Scannable
Cards clearly show the host organization, format, and registration details, so students decide fast.
Family-ready
Multi-attendee registration lets students like Maxine enroll alongside a sibling in one flow.
Connected
Peer and mentor features help students like David find community, not just programs.
Reliable
A personal calendar tracks programs and sends reminders, turning enrollment into attendance.
Discovery opens the door, belonging is what makes a program stick, and every deliverable that follows works towards both
1
Discovery Without Barriers
Students face real constraints: limited time, uncertain schedules, accessibility needs. The first moment matters most. A well designed search and filter system removes the guesswork, letting students surface programs that actually fit their lives.
Students can narrow their search using filters for program format. Whether looking for online or in-person opportunities, the filter system helps them surface programs that match their availability and preferences.
Note
The current prototype demonstrates online and in-person filtering. Additional filter categories (hybrid format, specific days, accessibility features) are visible in the design but not interactive due to Figma's variable limitations. In a production environment, these would be fully functional.
2
Clarity at a Glance
When students land on a program card, they need the essentials fast: who's running it, how it works, and how to sign up. Clear, scannable information removes hesitation before it starts.
Underserved students face unpredictable schedules and real reasons to step back. Making exit as easy as entry removes friction that punishes those constraints and signals trust, not coercion.
It also avoids artificial barriers. Bad-faith behavior is a backend policy problem, not a UX one — so the interface stays focused on genuine needs: clarity about joining and leaving, and seamless execution either way. The result respects student autonomy and keeps the focus on discovery and community, not lock-in.
Listed Programs
Featured Program
3
Built for Families
Maxine's journey was never just about her. Multi-attendee registration lets students sign up alongside a sibling in a single flow, removing the friction for families who participate together.
Control reminders per program:
Every program in the calendar legend has a toggle to turn reminders on or off. Students can keep notifications for programs they're committed to and silence the ones that shifted in priority.
Note
Leaving the program is intentionally flexible. Whether a student swipes to exit from the program card, or deletes the chat from their conversations, the outcome is the same: they're removed from the enrollment and community, with no friction or consequence.
4
Built for Belonging
Across both personas, the journey didn't end at registration. It ended at belonging. Discovery and sign-up open the door, but community is what makes a program stick. The chat system was built to turn enrollment into genuine connection: a space where students can ask questions, reach mentors, and find people who share their goals.
Upon registration, a dedicated chat group is automatically created for each program joined
Leaving is just as simple. Swipe left on the chat preview and tap delete; no friction. Rejoin anytime.
Every program chat includes two channels: a private line to the host for one-on-one guidance, and a shared group chat with classmates. A single toggle switches between them.
Note
Leaving the program is intentionally flexible. Whether a student swipes to exit from the program card, or deletes the chat from their conversations, the outcome is the same: they're removed from the enrollment and community, with no friction or consequence.
5
Never Miss a Session
Enrollment doesn't guarantee attendance. Life gets messy. A calendar that tracks commitments and sends timely reminders supports students in actually showing up, especially those juggling unpredictable schedules.
Programs populate automatically:
Upon registration, each program appears in a dedicated chat and on the personal calendar, giving students a central place to track everything they've joined.
Fine-tune notification preferences:
The settings screen lets students choose how they receive reminders: email, text, or both. One central place to manage the timing and method that works for their life.
Note
Every program in the calendar legend has a toggle to turn reminders on or off. Students can keep notifications for programs they're committed to and silence the ones that shifted in priority.
Next Steps:
1
Usability Testing
Conduct formal usability testing with students from underserved communities to validate design decisions and surface friction points that weren't captured in the research phase.
2
Iteration Based on Feedback
Responses collected through this portfolio review form will be used to identify gaps between intended outcomes and perceived outcomes, informing the next round of design improvements.
3
Feature Expansion
Future iterations would explore mentor matching, progress tracking, and community-driven program ratings to deepen engagement and support long-term student growth.
4
Accessibility Audit
Conduct a formal accessibility audit with real assistive technology users to validate that the accessibility filters and program listings work as intended for students like David.
How did we do?
The final AfterSchool prototype brings together research insights, user needs, and iterative design to create a platform that connects underserved students to free enrichment programs in their communities.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.