TheSoftwareDevlopers

Helping the students of UH study

View the Project on GitHub thesoftwaredevelopers/thesoftwaredevelopers.github.io

View My GitHub Profile

ICStudy

Link to team contract

ICStudy

Overview

Problem

The problem: ICS students often spend more time than they need on their homework and don’t learn the material as effectively as they could, because they study alone and do not leverage the power of face-to-face study groups with peer mentors.

The solution: ICStudy is an application for UHM ICS students to self-organize face-to-face study groups around a course and/or specific homework or project topic.

Approach

To use ICStudy, a student must login and set up their profile. The profile enables each student to list courses they have taken and for which they are willing to attempt to provide help (sensei), and courses they are currently taking and for which they might need help (grasshopper). Thus, all students are sensei in some courses and grasshoppers in other courses. Each student must also provide a head shot so that they can be visually identified.

Another section of the site lists all of the ICS courses. Within each course, it is possible to see the grasshoppers and the senseis. A grasshopper can propose a study session around a topic currently being covered in their course (for example, “Write my essay on configuration management”, and a time to meet within ICSpace (i.e. 8:30-9:30pm tonight)). This proposal generates a notification to all of the grasshoppers and senseis, and they can respond by saying they intend to come at some point during the time period.

There is an online calendar that shows all of the study sessions and who is attending.

There are two styles of use for ICStudy:

  1. You want to plan a group study session for later in the day or some subsequent day. In that case, you schedule the time period for sometime in the future.
  2. You are having a problem right now. In that case, you can go into ICStudy and schedule the session for “Right Now!”. This indicates you are right now in ICSpace and need help. All the other sensei and grasshoppers for that course will be notified, and hopefully a group will spontaneously form in a few minutes.

ICStudy seems great in theory, but there is a significant barrier to adoption: students are naturally inhibited about asking for or offering help. This might be overcome through the use of well-designed game mechanics.

Part of the design of ICStudy should be some kind of point system, or “levels”, or some other game mechanic to reward students for participating.

In addition, you can solicit gift cards or other kinds of rewards from the ICS Department or UH Manoa to reward the “best” sensei and grasshoppers in a given week, month, or semester. The challenge is to design the point system so that students cannot “game” the system to obtain points without actually helping others. You also want to prevent a “hui” of students from simply pretending to work together to get the most points and then split the prize without actually helping each other.

There must also be admins who monitor the site and who users can contact if they suspect inappropriate behavior.

Important design goals for ICStudy are:

  • To encourage use of ICSpace among ICS students.
  • To minimize risk of inappropriate encounters by requiring all meetings to occur in ICSpace.
  • To encourage face-to-face interaction among ICS students.

There are other mechanisms (Slack, Piazza) for asynchronous, online help and support. ICStudy is designed to facilitate live, real-world help using ICSpace.

Some mockup pages include:

  • Landing page
  • User home page
  • Admin home page
  • User profile page
  • Calendar page
  • Create Study Sesh page
  • Study Session page
  • Game mechanic page(s) (for example, a leaderboard?)

Use case ideas

Whether or not the following bullet points list all pages or not, the completed use case should show an end-to-end scenario of using the system.

  • New user goes to landing page, logs in, gets home page, sets up profile. (How do they learn how system works?)
  • Admin goes to landing page, logs in, gets home page, edits site.
  • User goes to landing page, logs in, requests study sesh.
  • User is notified of study sesh, responds. (Can they respond via text message?)
  • User checks their status with respect to game mechanics.

Beyond the basics

After implementing the basic functionality, here are ideas for more advanced features:

  • Text message interface. See notifications, and reply to confirm attendance all through text message.
  • Slack integration to facilitate notification and organization of meetings.
  • A Slack Bot to suggest and help implement ICStudy meetings.
  • A rating system for meetings and sensei participation.
Diagram of ICStudy System

Diagrams which show the layout of the mockups for Milestone One

Link to deployed site

Below are up to date screenshots of the current build

Screenshot 1

Landing Page

Screenshot 2

Find Session Page | Here you can find a session to join!

Screenshot 3

Profile Page | View your own profile!

Screenshot 8

My Sessions | View and manage your sessions!

Screenshot 4

Leaderboard | View the leaderboard for all users!

Screenshot 5

Create Session | Create a new study session!

Screenshot 6

Calendar | View a calendar which shows all of your sessions!

Screenshot 10

Edit Profile | Edit your profile however you like!

Screenshot 9

Submit Feedback | Submit Feedback to the Admins!

Screenshot 7

Admin Feedback | Admins can view the feedback you send!

Screenshot 6

Manage Users | Admins can ban users from here!

Screenshot 10

Banned | Banned users cannot access the site. Period.

Screenshot 9

Admin Manage Sessions | Admins can delete sessions deemed inapropriate.

Developer Guide

  1. Clone repo
  2. Run npm install
  3. Setup database environment:
    • NeonDB, Vercel (link them together)
  4. Create S3 bucket with AWS to store images
    • Create AWS account
    • Use S3 service to create a bucket to store objects
    • Setup and create IAM user to configure permissions and create access and secret keys
    • Configure user policies and CORS permissions to allow clients to upload and PUT objects into the bucket
  5. Add environment variables into local .env file (From AWS keys and NeonDB environment variables)
  6. Run npm run dev, site running on localhost

Community Feedback

Upon asking five peers within the UH system for feedback on one of the versions of our deployments, the findings were generally that the app, although (mostly) functional at the time, needed more visual flare. They all liked the look of the landing page and suggested that we change the rest of the site to have a similar style.

Upon asking them to use the application, there were some bugs and inconsistencies that they discovered, which opened our eyes to many of the minor problems present. This feedback allowed us to modify the site further and address those issues.

The feedback process, although short and simple, has been instrumental in refining the functionality and user experience of the ICStudy platform.

M1 project board

M2 project board

M3 project board