top of page
after school programs
Effective afterschool programs, also known as out-of-school-time (OST) programs, have a wide range of benefits for young adults, their families, and the community at large.
Challenge
Not only do after school programs boost academic performance, but they also promote social skills and physical health, all while providing students with a safe, structured environment.
We were tasked with creating a website for the administration of a non-profit afterschool website that allows the admin to use the site easier. We wanted to increase the ease of use in the areas of inputting data, managing the user base, and making the general look and feel of the site easy to use and stress-free. This way they can engage more effectively with their users while retaining users as well.
Time
Client
Deliverables
3 weeks
Flatiron School
High Fidelity Screens
Invision Prototype
Style Guide
THE PROCESS
Our journey starts with collaboration with my team. We had to first conduct a visual competitive analysis, then create some style tiles. We wanted to make sure that each of us was on the same page with our research so that when we can synthesize it easily into our individual style tiles.
SPRINT 1: VISUAL COMPETITIVE ANALYSIS
As we searched for competitors in the afterschool non-profit industry, we were specifically looking for visual traits that our competitors use in their website. Thee traits included a color palette, typography, layout, iconography. We also took note of how they used white space.
After taking into account each of these companies and their visual traits, we understood what color palettes were successful (bright, bold colors) as well as typography (san serif typefaces) as well as layouts and button styles. We used our newfound information to create moodboards and style tiles
MOODBOARDS AND STYLE TILES
Dark and Bold
FOR THIS STYLE TILE, I CHOSE A SAN SERIF FONT AND MADE SURE TO CREATE A DARK BACKGROUND WITH BRIGHT POPPING COLORS TO INDICATE WHERE THE IMPORTANT PARTS OF THE PAGE WERE. THIS WAS DONE TO CREATE VISUAL HIERARCHY. I ALSO USED CANDID IMAGERY BECAUSE THAT WAS A TREND WE SAW IN OUR COMPETITORS.
Simple and Bright
FOR THIS STYLE TILE, I CHOSE A SAN SERIF FONT THAT WAS CLEARLY READABLE (HELVETICA NEUE).I CREATED A WHITE BACKGROUND WITH A PURPLE COLOR THEME BECAUSE PURPLE INDICATES CREATIVITY THROUGH COLOR THEORY AND I WANTED TO HIGHLIGHT THAT AS A BACKBONE FOR MY DESIGN. I ALSO USED VECTOR IMAGES BECAUSE THEY ADD AN AIR OF SIMPLICITY.
Exciting and Calm
I WANTED TO MAKE THIS AS CALM AS POSSIBLE THROUGH MUTED PASTEL COLORS, BRIGHTISH BUTTONS AND A MIX OF REAL AND VECTOR IMAGERY. THE OVERALL VIBE FOR THIS TILE WAS GEARED TOWARDS YOUNGER KIDS WHO MAY USE THE WEBSITE. THE TYPOGRAPHY IS EASY TO READ AND UNDERSTAND AND THE ICONS ARE RECOGNIZABLE.
AFFINITY MAPPING
We took our style tiles and interviewed a lot of users on their visual aspects. This lets us create a diagram of trends and insights we gathered from our user feedback.
TAKEAWAYS
The tone that the users described this tile as was simple, attractive, professional, fun. The tone I was going for was responsible and the feedback received from my users was close to that tone.
The icons were great and easy to understand, they went well with the rest of the tile.
The font was received well with my users and they agreed that it was very legible and professional.
“The font is very easily legible. If anything, it could be a little bit darker. Easy to use, easy to read” - USER
DESIGN PRINCIPLES
SIMPLICITY
PERSONALIZATION
Because the old afterschool program website was hard to use, we wanted to prioritize a simple-to-use system. Keeping a clear organizational system that allows users to navigate and input large amounts of data quickly and easily. Preventing errors, duplication, and maximizing time ensure that there are no issues of crowding.
The goal of the new system to engage users more effectively so that they will stay on the site. We can achieve this by personalizing the website to create a unique experience for all users as well as the administration personel who use the site.
For this project, some basic wireframes were provided to us by a previous UX team. Through the following user interviews and reiteration, we were able to prioritize which wireframes were the most important to test. Based on the feedback we received from our interviews, we iterated as much as possible.
Dashboard Page
Total Check-Ins Page
Export As Page
DESIGN DECISIONS THROUGH WORKSHOPS
After picking out our wireframes, we used affinity mapping and "how might we" questions to figure out what features we can include in our designs that can help achieve the client goals of more engagement, recruitment and retention of users.
"How might we" Questions
"How might we" Questions
Possible solutions
Possible solutions
All solutions we got from our brainstorming workshop
_.jpg)
VIDEO CAPABILITIES FOR AFTER SCHOOL ACTIVITIES - This is so that users don't have to attend in-person activities and can opt-out to attend through zoom so they can be safe during the pandemic.
MAKE THE WHOLE SITE COVID FRIENDLY - This includes updates on events that the website hosts as well letting users know what necessary precautions they should be taking during a pandemic.
UNDERSTANDING THE WIREFRAMES
FILTERING SYSTEM - So users to find their activities easier.
TOP SOLUTIONS GATHERED
SPRINT 2: FIRST ROUND OF HIFI SCREENS
Now that we have all the information from the first sprint, we can now get creative and build our first round of high fidelity screens. Here are some of the key screens built out from the wireframes:
I chose to use purple hues in this design because this was based on my simple style tile. Vector illustrations will help create a distinction for the eye to follow. The 4 modals are the most important part of the dashboard page and I wanted to highlight that.
The overall wireframe wasn't changed for my first round of designs because I think the wireframes were already pretty effective, however, the next round of iterations will be made after interviewing users.
I changed the wireframes here because I felt that the list view of the participants is the most important part of the page.
From our workshop, we decided to include a filtering system that we included. Now users can filter by name, program, date, and neighborhood.
Changing the list format of the wireframes to the 2D icon format will let the users engage with the export as page more because they can recognize the icons from other media they may have used.
“THE PURPLE COLORS ARE TOO MONTONE. I wish there was more variety!” - USER
SPRINT 3: USER TESTING AND SECOND ROUND OF HIFI SCREENS
After testing my design with users, one of the insights I gathered was that I need to add more colors to my designs because they were too monotonous and that the vector illustrations are not really helping the overall tiles in the dashboard screen. I also changed the side bar to make it more nuanced and modern.
After user feedback, I changed the tiles to include more colors and I included a wavy line animation that fills up as more students are added. This was fun to use for users and they liked to engage with it.
The sidebar is now changed to make it more modern and create a better hierarchy of active buttons and inactive buttons.
Changing the colors of the graphs helped differeniate which categories corresponded to which neighborhoods better.
Even in the list view, the color-coded neighborhoods make it easier to pick out each student easily.
My users really liked the export as page so this remained the same.
“I would say on the graph, it looks like the colors are hard to differentiate between like the three lines.” - USER
SPRINT 4: FINAL ROUND OF HIFI SCREENS & PROTOTYPE
As with the last round, we user tested again on our screens and then we reiterated based on their feedback.
After user feedback, I changed the tiles to include more colors and I included a wavy line animation that fills up as more students are added. This was fun to use for users and they liked to engage with it.
The sidebar is now changed to make it more modern and create a better hierarchy of active buttons and inactive buttons.
Due to user feedback, I further accenuated the colors in each section of the total check-in page. This helped with the readability of the elements on the page.
Even in the list view, the color-coded neighborhoods make it easier to pick out each student easily.
Export As Screen
My users really liked the export as page so this remained the same.
PROTOTYPE
bottom of page