ChoDi

Saad Siddiq, Cooper Yap, Khachik Yetenekyan, Koji Quimbo, Andre Amini

Meet ChoDi

ChoDi is an organization management system with the goal to assist non-profit organizations in analyzing their data and organizing their events in the most efficient way possible.

ChoDi serves as a one-stop shop for all non-profit needs: for CEO's to found non-profits, event coordinators to plan and create events, accountants to track the financial data of a given event, HR managers to contact employees and volunteers with ease, and many more.

Project Goal: Develop a web application for a non-profit to manage their information all in one place.

Sponsors: Thi Nguyen & Christine Dinh

Project Duration: 20 weeks

Tools: Figma, Trello, Discord, Slack, Zoom, GitHub

Languages & Frameworks: HTML, CSS, JavaScript, React.js, Firebase

Meet the Team

Our team consists of five Informatics majors, specializing in Human Computer Interaction and Information Technology, at the University of California, Irvine. We have individuals with experience in UI/UX design, frontend development, and backend development. Together we designed and developed a web application for ChoDi while simultaneously refining and honing our technical and interpersonal skills.

Saad Siddiq

Cooper Yap

Koji H. Quimbo

Khachik Yetenekyan

Andre Amini

Initial Meetings

Initial Expectations

Our sponsors tasked our team with building out the non-profit side of their web application. Our group was tasked with creating all of the following functionalities from scratch since the previous group's system was not viable. The following functionalities were what we were tasked to build:

Fall Quarter

We decided to focus on developing the following functionalities:

Developing an initial Landing Page for ChoDi
Creating login functionalities
Developing a calendar view
Exporting ChoDi calendar to personal calendar
Event Main Page - includes ability to create new events & a list view of all past, current, and upcoming events
Create Event Form
View Event Dashboard - view details of a specific event

Winter Quarter

We decided to focus on developing the following functionalities:

Connecting a Firestore Database to the frontend
Developing the CRM functionality to display all contacts associated with non-profit
Refining Landing Page and adding more information about ChoDi
Further refining Event Dashboard to include graphs and other data pertaining to event

Our Development Process

Our work was divided in bursts of two week sprints across a total period of 20 weeks. We leveraged organizational tools such as Trello and communication channels on Discord for each sprint. All of our sprints followed the same general process:

Wireframes/Mockups

Each sprint, our team would focus on either developing a new functionality for the web application, or refining a functionality from a previous sprint. We typically begin with creating a lo-fi mockups for a feature, based on the example UIs our sponsors' provided for us. However, we did not wait for designs to be approved before coding however, preferring to get started on a good code base rather than wait.

The main goal of our initial mockups was to demonstrate the organization of the page and the layout of the most prioritized features. We would create multiple mockups for each potential page that would be needed for a functionality (i.e. list view & specific view for events).

Once we were done, we would show the mockup to our sponsors for feedback, develop a more detailed mid-fi wireframe to their specifications, and then show it to our sponsor for further feedback. For each user story we implement as features on ChoDi, we also conduct internal bug testing within the team.

Lofi Mockup of CRM Page

Mid-fi Wireframe of CRM Page after receiving sponsor feedback

Sponsor Feedback & Discussion

Our team ensured that our sponsors were involved in every aspect of our development process. We would have weekly meetings with them via zoom as well as a Slack channel. Our correspondence typically begin at the beginning of our sprint when we would show them the mockups for the feature we were working on via Zoom. Based on their feedback, we would tweak the design to fit their specifications, along with us giving them advice on how pages could better follow UX design principles.

During our implementation phases, they would also give us feedback on how exactly they want the web application to look and work. Our design and implementation decisions were majorly influenced by their feedback, but our team also took the time to set expectations with our sponsors to ensure that we weren't overpromising and underdelivering.

Discussion was also the time and place to sober sponsor expectations, especially since they were non-technically oriented sponsors who had many ideas for their application.

Typically, our sponsors would give us feedback during our weekly meetings on Zoom, however they would also use our ChoDi Slack channel to also give us any extra feedback they may have had after mulling over our design and implementation. This feedback tended to influence our implementation and design decisions, but we also took the liberty to design aspects of the website that we thought would look/work better.

Example 1 of Sponsor Feedback on Slack

Example 2 of Sponsor Feedback on Slack

ChoDi Meeting, 2-22-22.mp4

Recordings

Additionally, we recorded all of our meetings with the sponsors so our team had the ability to go back and listen to any feedback that our sponsors may have had.

Implementation & Testing

Even though we validate with our sponsors, we typically implement code and design simultaneously. It was better to have a code base already started rather than waiting for designs to be approved. Typically, our group pair-programmed and would assign each pair a specific feature to implement. A lot of the designs we developed in our wireframes were able to be implemented into our code. The changes that were made typically occurred during our sponsor meetings when we showcased the prototype to them. However for the most part, the final mockups tended to influence how we implemented certain features and designs into our programmed prototype.

Testing usually occurred when we had programmed a feature with all of its required functionality. Usually, we would walk through each required functionality and make sure it is working efficiently and properly. We would do this for each feature until we were sure they worked seamlessly within the system and interacted well with each other.

Documentation

Personas

We identified the main goals, needs, and frustrations of potential users of our web application. In this way, we were able to keep the user in mind when designing and ensure that all pain points were being addressed

UML Sequence Diagrams

We created various UML diagrams to model the relationships between design elements for each page

UML Class Diagrams

This artifact was developed to help our team better visualize the relationships between the classes in our web application. Though, implementation of code at times outpaced updating the Diagram.

Figma Prototypes

We utilized Figma to develop our mockups and prototypes to show our sponsors. These designs guided our programmed prototypes which we will deliver to our sponsors at the end of the quarter.

Go to Figma Page

The Hurdles We Faced

Unfamiliarity with React.js

Almost all team member had ever worked with React prior to working on ChoDi. There was quite a learning curve to breach.

Uncertainty with Backend Systems

Not all team members had the same level of backend experience and skill, as some had to do research and learn for this project.

Inexperience with Agile Processes

Most team members had little to no experience with working in an Agile environment, especially one that required a lot of communication and fast paced working such as this project.

Scope Creep & High Sponsor Expectations

As the weeks went on, certain sponsor expectations proved too aggressive for the scope of our knowledge and time left. Our non-technical sponsors were excited to implement many, many features on their wish list.

Project Management Hiccups

Managing our project proved to be difficult during this project, especially as the Winter quarter progressed to more busy weeks. At times what each team member was supposed to do became uncertain and too often our schedules mismatched.

How we Overcame our Hurdles

Constant Communication

Our team was in constant communication via Discord, Slack, and Zoom. Messaging was primarily done over Discord, and messages were responded to shortly after they were sent majority of the time.

Taking the Initiative to Research and Learn

Learning was essential, especially when it came to working with React, as none of our team members had used the software before this project. When we made mistakes, we learned from them and corrected them so that the project is of higher quality.

Helping One Another

Our team was very respectful and understanding of everyone strengths, weaknesses, and differences. Thus, we utilized them all to make sure everyone on the team can come together and produce a high quality project. All conflicts were handled quickly and professionally.

Being Honest with Our Sponsors

Our team communicated with our sponsors as the quarter went on that certain expectations were simply unachievable and that it would be best to focus our efforts on other more important areas that will be finished. It is important to elicit from sponsors the most prioritized features.

Applying Feedback from the Professor

Whenever our team received feedback from the professor, we aimed to apply it to our work immediately. Would take them seriously in our team meetings so as to ensure we finish with a quality final product, especially in the cases we were falling behind.

The Final Product - The ChoDi System

Landing Page

The landing page is the initial page users will see when they get to the ChoDi web application. It lays out all of the pertinent information a new user will need to know about the application before using it.

Home Page

The home page displays at a glance the ongoing activities of the non-profit organizations the user is in, so that the CEO or employee can quickly get up to speed on what is happening for the day and the week.

Signup

New users to ChoDi can sign-up to found a new non-profit with ChoDi or join an existing non-profit whose name is associated with ChoDi already.

Login

Any current users of ChoDi can sign back in, along with options for resetting their password in the cases they forget.

User Profile

A user who is logged in can view their basic profile information and have the ability to edit their contact information, along with updating their account email or account password related to Firebase Authentication.

Agenda

The Agenda's calendar shows all the events of the month labeled on their respective dates. The calendar can be exported in iCal format and imported to any popular calendar platforms, such as Google Calendar

Events List View

The events page shows events of the past, future, and ones that are currently occurring. The user has the options of adding an event as well as viewing and clicking on and editing an event.

Events Dashboard

If a user clicks on an event from the Events List View or Agenda Calendar, then they will be brought the dashboard for that even, where they can view and edit all the necessary data.

CRM List View

The CRM (Customer Relationship Management) page is a multi-featured table directory system that shows all contacts of a non-profit. Features allow a user to search & filter contact information, Excel Sheet upload and population, & manual create contact form.

CRM Contact View

Any contact listed on the CRM list view can be clicked on and the user redirected to the CRM Contact Page, which displays all the contact information and other demographic data of the selected person. Any contact can be edited as well.

Final Deliverables

The ChoDi Repository

This will include all code we have for this web application, along with all the web pages above.

Firebase Backend Email + Credentials

This will give the sponsors access to the Firebase Database.

Requirements & Design Document + User Guide

Our teams requirements and design document included the requirements and our work on all the type of pages.

Project Video

Page updated

Report abuse