The project was to build a multi-sided platform that connects students with after-school programs in their respective communities; which in turn will help community programs maximize their customer reach.
According to the project requirements, my team and I were asked to develop the look and feel of the agency/administrative portal that improves program managers’ ability to easily understand and prioritize data being displayed. We were also determined to find easy and frictionless ways for users to participate and interact on the platform.
Design a multi-sided platform for program managers that aids in the recruitment, retention, and engagement of students in afterschool programs. Develop the “look and feel”, a brand identity, a cohesive set of design principles that will be of use to a program manager/admin in understanding and organizing student data.
The solution was to use bright colors but still provide a professional interface for the program administrators to use. I decided to use the color blue green which is a very common color used in design, this shade of blue is calming and symbolizes trust which is to make the parents feel that their kids are safe and their information is safe in this system. The Roboto font family was used because it gives many options such as regular, bold, italic, condensed etc which was helpful and showed hierarchy.
To give enough negative space to the user, enabling them to easily visualize all the design elements and explore the website more comfortably. This type of interface is meant to be used by anyone and not necessarily someone who is tech savvy.
My team and I worked together to conduct a thorough research on the competitors that are out there to develop our understanding of current market trends. The direct competitors we analyzed were: EZchildtrack, Jackrabbit care, Active Network, Procare, and Sawyer Tools.
The key takeaways from our analysis was:
1. Effective dashboard starts with a good set of navigation icons and text labels. Keep the icons and labels in line with the tone of the product. It’s for adults primarily, but it’s also meant to be capturing the voice and personality of children’s after school activities.
2. Good visual hierarchy is key. White space will help here, but it’s also important to choose fonts that work together but are divergent. Maybe breaking free of the tyranny of sans serif in some cases will help to set certain labels apart.
3. Look for effective UI elements that will improve data visualization. Sawyer Tools is a great starting block here, just need to hone a more unique voice.
4.Instead of a bland and boring excel spreadsheet layout, look for a unique way to create class rosters, student profiles, etc.
Each team member then created their own set of moodboards and style tiles that were presented to the test users. We conducted multiple user testing sessions and received feedback each time on whatever we were working on at that time.
The users were recruited from personal contacts and social media platforms that had background in after-school programs, teaching or coaching. User testing was done to determine whether the interface design enables users to complete the task assigned to them. Also to measure how many/which errors were made while users completed the task.
Based on user testing, we were able to come up with the design principles we wanted to keep in mind when creating the high fidelity screens and prototype. Each team member worked on their own design for the website. A design system was created at the end to incorporate all the elements of our designs in one place.
Appropriate clear space is equal to half the size of the logo. Bridgeway logo should never be scaled smaller than the minimum sizes provided to maintain readability. The logo is shown here in different colors and can be used in whichever way preferred by client. It can be used on business cards, T-shirts, stickers etc.
The users found the platform very easy to navigate and completed given task flow without any errors. On a difficulty rating survey, they gave it a 1 which represented that the task was not difficult to complete. Users want more context that lets them know this platform is for managing after school programs.
Some participants liked that there were two routes to get to the same information instead of having to go back to the main page. Participants want a confirmation page/message when exporting a page/doc is successful. Users responded positively to when images were used for program cards. Users were able to complete the tasks easiest when the design patterns of the prototype felt familiar/similar to programs they have used before.
Below are some of the screens from my final product and feel free to click on the link below to view the final prototype and design system.
