The League of Amazing Programmers
The League needed a web portal that acts as a central hub for their school. They need an interface where students and parents can see the relevant data which includes features such as attendance, class enrollments, and progress. On the other end, the admin needed a way to track all the moving parts of their program. They want to view and schedule classes, see who is enrolled, and track attendance.
Duration: December 2020 - May 2022
Client: Sarah Cooper (The League)
My role: Product Designer + Product Strategist
Design Team: Rickie Chen (me), Evan Lam, & Lydia Smith
Background
The League of Amazing Programmers is a non-profit organization that teaches Java to kids from 5th-12th grade. Their school takes students through 10 levels of mastery. A central part of their mission is to reach out to more girls and underserved youth to accomplish their goal of increasing accessibility to computer science education to children from all backgrounds.
Problem
Before coming to us, The League used a service called Pike13 to manage all of their bookkeeping. However, their previous solution is like fitting a square peg into a round hole. It works but it’s not ideal because of the lack of customization and specific applicability to running their school the way they want. From this, we deduced the problem statement below:
Client needs & current pain points
1. Scheduling: a need for different filters in the calendar area that are specific to what the League is trying to achieve in terms of being able to organize and view classes. Distinguish online and in-person classes.
2. Attendance: A more intuitive attendance checking on the staff side.
3. Sign-up & Account Creation: The current solution is not particularly intuitive, need to clean up the user flow.
4. Member View: Currently lacks attendance and student progress tracking.
5. Data Report: Currently cannot sort through columns of data, not able to save and share reports.
6. Class Creation: Creating class currently is inefficient and not optimized to how The League operates.
7. Volunteer View: A more limited view of the admin interface, able to assist staff with classes.
Main Stakeholders
Research & Development
As we start the design process, we did extensive research on their current solution which was Pike13. The client was able to give us access to dummy accounts for all the relevant stakeholder views. We took account of the shortcomings it possesses, cross referencing those with the pain points the client listed. Another important part of the research process that gave us a further understanding of the problem were the weekly client syncs. During those meetings, we ask relevant preliminary questions and empathize with the users of our product.
Style Guide
For the color of the style guide, we adhere to the existing brand guidelines provided by The League and added some additional complimentary colors that we think are appropriate for the interface.
Reusable Components
Due to the nature of our project, it was imperative that we utilize components effectively to ensure efficient design. Most of the time, the different account views has a similar design with subtle differences in wording. For example, a button that that meant for a parent to submit their data is turned into the button that manages all the data on the admin view.
Design Iterations
Feature 1: Scheduling
Here are the low-fidelity designs for the prime feature our clients asked for: customizable scheduling conformed to The League's needs. I was debating between if we should do a calendar-dominant interface or have class blocks below the calendar so the classes are more accessible.
Mid to High-Fidelity Designs
Moving on to the mid and high-fidelity designs, the question of feasibility was brought up with the developers as we were debating if we should use an API like Google Calendar or just build the calendar from scratch in-house. We ultimately settled on an in-house calendar as that will offer the most customization.
Supplemental screens
To make the process even more customizable and fit the needs of The League, another feature we were able to implement was proper filter options between classes and a non-calendar view to manage classes.
Feature 2: Attendance
For attendance, the approach was a bit more straightforward as we went through low to mid to high-fidelity designs. The League wanted an easy-to-use interface where the teacher is able to track daily attendance in their classes and get notified if they missed a day of attendance.
Feature 3: Sign-up flow
For the sign-up flow, the client emphasized that everyone from faculty to students needs to go through a verification process. Our simple sign-up flow was able to effectively make signing up and verification as easy as possible.
Feature 4: Member views
Another prominent feature that The League wanted was for students and parents alike to track their progress in their classes. My solution was to create a profile page segmented out and displayed clearly in different compartmentalized boxes. I also made the experience more gamified by adding achievements to the student's profiles so they can stay motivated with their classes. One challenge we had to overcome was to figure out just how much information was appropriate to display on these profile pages. We worked extensively with stakeholders at The League to consider factors like privacy, coherency, and clarity.
Developer Handoff
After the features were designed, I worked alongside talented developers who were able to implement the student portal into a functional tool for The League. We work in an agile environment and were able to hand off the project to happy clients in May of 2022!