Embedded Files
Meet the Team
Jackson Podgorski
Software EngineeringAlice Tran
Software EngineeringSugeily Angulo-Limon
Informatics - HCIStanley Lu
Informatics - HCIKelsey Beaulieu
Software EngineeringTaravee Tichilasuntron
Informatics - OITProject Partner
For our project, we were partnered with the UCI ICS Undergraduate Student Affairs Office (SAO). We worked with Sandy Irani, Neha Rawal, and Waylen Oshiro from the office, all of whom work on transfer student articulation requests.
When we met with the staff for the first time, we were introduced to the method they used for student articulation requests - a Google Form that linked to multiple spreadsheets that staff members would sort through and tediously manage by hand. Furthermore, staff from the SAO would manage communication all through emails, another time intensive process. The proposed solution from the SAO was to create a comprehensive dashboard that could be utilized by students, professors, and staff members. This application would streamline the request process, provide automation where able, and reduce the workload of staff members.
Development Process
Over the course of this two quarter capstone, our team designed and developed a centralized web application to improve the course articulation process for ICS transfer students at UCI. We began by meeting with our sponsor and stakeholders to understand the limitations of the current system, which relied heavily on Google Forms, spreadsheets, and manual tracking. From there, we collaborated to define user stories, build wireframes, and plan features that addressed the needs of students, SAO staff, and faculty.
Each sprint focused on refining specific functionality such as the student submission flow, staff review dashboard, and faculty review queue. We prioritized usability, accessibility, and data privacy throughout our process, especially as we worked across three user types. Our decisions were guided by regular feedback from our sponsor, Professor Sandy Irani, as well as the ICS Student Affairs Office, ensuring our designs aligned with real world needs.
We held weekly meetings, used Trello and GitLab to coordinate development, and continually tested design assumptions through informal user feedback and clickable Figma prototypes. Challenges like handling duplicate requests, anonymizing student data, and integrating status tracking were tackled as a team through open discussion and iteration. This collaborative and user focused approach helped us create a product that is functional, scalable, and tailored for long term use within ICS.
Tools [can probably elaborate on our reasoning for each one]
Project Management
Prototype Designs
Backend Development
MVC Framework
Database
Version Control
Wireframes
Low Fidelity
Low Fidelity
Based on our elicitation, we created sketches that tried to include all the features our sponsor wanted. This allowed us to create ideas for the platform.
Mid Fidelity
Mid Fidelity
Once we had our low-fidelity mockups, we were able to discuss what features we wanted and how it would look. We had many sessions of feedback with our sponsors to create the best possible outcome.
High Fidelity
High Fidelity
After all the feedback and discussion between each other and sponsor, we created the high-fidelity mockups. These are the designs we chose to implement and code as our final design decisions.
High-Fidelity Mockups
Student View
Student View
The high-fidelity student mockup helped us finalize the request form and dashboard layout, ensuring clarity and ease of use for transfer students.
Staff View
Staff View
This mockup guided the design of the staff dashboard and workflow tools, allowing us to streamline task management and request routing.
View our mockups here.
Faculty View
Faculty View
The faculty mockup focused on simplifying syllabus review and feedback, helping us test how to present requests clearly while keeping student info private.
Documentation
User Stories
User Stories
We created user stories for our three distinct users (Student, SAO Staff and Faculty). It was important for us to create user stories for these three users to understand their needs. Having a better understanding of our users allowed us to build a project that would benefit them.
Persona
Persona
We created three different personas for our different types of users (Student, SAO Staff and Faculty). These allowed us to keep in mind what types of user we may have and their different skill sets.
View our personas here.
Entity-Relationship Model
Entity-Relationship Model
Due to the nature of our project we created an entity-relationship model. This model allowed us to visualize a majority of the moving software parts our system would need. This allowed us to under stand the relationships each user action has with another user.
Use Case Diagram
Use Case Diagram
Each of our users interact with each other one way or another. We created the use case diagram to see what features the users share with each other, what they interact with and how it relates to the other users.
Challenges
Understanding Project Requirements
Understanding Project Requirements
We had to build this project from the ground up so a lot of elicitation was involved to fully understand the requirements of this project. It took us some time to understand what type of questions we needed to ask to create a system that our stakeholders would be satisfied with.
Learning Curve
Learning Curve
To get our website hosted on UCI servers and to be maintainted by ICS Computing staff, we had to use Yii PHP when we originally decided on using React. A lot of our time was spent on learning PHP and developing with a model-view-controller framework.
Merge Conflicts with Git
Merge Conflicts with Git
We experienced merge conflicts since we were all working on the code at the same time, especially when we shifted our focus more to development. While this was a challenge at first, we were able to manage this more by creating our own branches.
Evaluation
Our program has gone through many iterations that have been reviewed by our project partners and users. Each meeting we presented samples of our project, either Figma or live demos, and received feedback. We used this feedback to better improve our system as it will be used in the SAO office in the near feature.
We have completed a minimal viable project (MVP), from scratch, in the short 20 weeks. Two of our group members will be developing this system on to live servers to be used during the Fall 2025. We effectively created a usuable system.
Final Product
Student View
Updated student request form replacing the old Google Form, with user-friendly design.
Student dashboard to view submitted requests and track status, which the old system did not allow.
Staff View
Dashboard for SAO staff to view all requests in one place and track their status.
Centralized request database for SAO staff to manage requests, replacing the current system of multiple spreadsheets.
Faculty View
Individual request view with all necessary details for ICS faculty to approve or deny.
Articulation database for SAO staff and ICS faculty to view previously approved courses and detailed information.
Demonstration Video
Please turn on closed captions.
Page updated
Report abuse