Camp Izza
Website Registration System
Website Registration System
About The Project
Camp Izza is a summer day camp in Irvine for kids, ages 5-12.
Problem
Camp Izza’s registration system lacked attendance functionality and was inaccessible to counselors. As the system was a combination of past teams’ work, we refined it into something more workable.
Solution
Integrate an attendance system that can be accessed by administrators and counselors alike
Generate groups based on registered campers with options for customization
Add a counselor dashboard for admin to manage relevant staffing information
Improve and expand the admin and parent dashboard
Sponsor:
Omar Ezzeldine
Team Members:
Vivian Nguyen, Ashlyn Riambon, Ally Chen, Justin Quach, Vivian Phan
Duration:
20 weeks
Tools:
Figma, Trello, Visual Studio Code, PyCharm
Languages/Frameworks:
Python + Flask, MySQL, TypeScript, React
Project Timeline
Development Process
We met with our sponsor every Wednesday to present completed work and plan tasks for the upcoming week.
We kept track of our work through a Trello Board.
Since our group was working with a pre-existing system, we attempted to identify and resolve critical system bugs within the first few sprints.
Trello Board
Identified Bugs
Design Decisions
Our design decisions were based on the previous group's style guidelines and additional functionality outlined by our sponsor.
Our initial focus was on resolving the bugs within the previous system.
However, we recognize that it would be productive to spend our entire focus and energy on resolving these bugs.
As such, we collaborated with our sponsor to identify additional pages to design including but not limited to:
Counselor and Camper Attendance
Counselor and Camper Information
Manage Campers
Implementation Decisions
Towards the end of the quarter, we made the difficult decision of transitioning to a new system.
This stemmed from our unfamiliarity with the pre-existing system's frameworks along with difficulty resolving identified bugs.
Fortunately, we were able to transfer over a lot of the front-end files to the new backend, so we did not waste all of our efforts done these two quarters.
Documentation Process
We started off this project by reading the Developer Handoff Resource Guide from the previous group. This contained information on:
The existing system's structure
Current Style Guidelines
Access to GitHub Repository and Figma
These are the steps we took to accommodate for our issues with the pre-existing system:
We began developing new documentation for use by future groups to assist with implementation and design.
For implementation documentation, our group has created comments on each file to indicate its purpose.
We also created a UML Diagram and Entity Relationship Diagram for future groups to better understand the structure of the system we created.
Meanwhile, these are the steps that we took for design documentation:
We included a Figma page dedicated to the current style guidelines.
We separated our designs from the previous group's designs to showcase the evolution of the design over time.
This documentation will make the style guidelines more accessible and will also clarify how it was used within previous designs.
Additionally, this is how we kept track of our progress and followed agile development:
We wrote seven total sprint reports, each one covering progress over two weeks, which includes a burndown chart, backlog, review summary, retrospective summary, success criteria, and mockups.
We compiled all of our work from the two quarters into a requirements and design document, which includes user personas, functional/non-functional requirements, high fidelity mockups, diagrams, deliverables plan, and revision history.
UML Diagram
Entity Diagram
Evaluation
Our group continuously received feedback from our sponsor through correspondence on Discord and our weekly sponsor meetings.
Design Feedback
As a result, we received suggestions on how to make the overall navigation and user experience smoother for our potential users.
Development Testing & Feedback
Our group provided a live link of the registration for our sponsor and his team to test and provide feedback.
We also communicated with our sponsor through a document listing identified bugs and desired website style changes.
Final Product
The final product of our design work is a functioning website and registration system for parents to register their children in summer camp. Some key functionality that we would like to highlight is:
Counselor Dashboard
Through this dashboard, counselors are able to:
View their profile
View their own attendance
Edit their campers' attendance
View campers in groups on the counselor dashboard.
View Campers in Groups
Admin are able to assign campers and counselors to different groups upon registration.
Counselors are able to view all of the campers in their respective groups.
Camper and Counselor Attendance
Through this attendance functionality, admin and counselors are able to:
Take attendance through the use of rows and columns to mark a student as present or absent
Have a focused view where they can select the term and week for attendance
However, camper attendance is slightly different because there are checkboxes to determine whether or not the camper has been picked up yet.
Project Video