Project 1: Recording the Journey

Documentation Links

Documentation (.docx)
Designs

Description of Project

The purpose of this project is to develop an application that tracks and journals goals and various activities. My focus was around mental health, specifically tracking anxiety, any associated feelings, what activities or events triggered the anxious feeling, if it affected any daily tasks, and how long it has lasted for the user.

The rationale behind my focus was that I have been personally struggling with mental health, experiencing severe anxiety, and that part of the advice that was handed to me by several professionals, friends, and family was to write down everything. This would include any thoughts, emotions, triggers, impacts on my life, and beyond. I felt that developing an application with a mental health focus could benefit myself as well as others that are also struggling in their own ways.

Interviews and Feedback

In interviewing and collaborating with colleagues early in the project, they presented to me with concerns and expectations that the user must be able to record metrics that can allow viewing of trends or quantitative data over a period, as it is not easily measurable based on purely open-ended questions that could possibly be non-definitive over a course of time.

It was also brought up that users should be able to navigate through entries to view history, in a manner that is easy to learn and understand.

I have been reaching out to colleagues within the User Interface class, specifically about the design and layout, and have received positive feedback about how my layout incorporates the boxes to separate and group the information appropriately. Additionally, colleagues have appreciated the color scheme and its contrast between the background and text color as it was noted that it drew people’s attention while keeping things understandable.

Interface in Detail

The interface is only one single screen that users can view without having to scroll anything. The left side of the interface/screen consists of the overview information, including the following from top to bottom:

• Username/User Logged In
• Current Date
• Days since user created the login
• Days total relating to the daily active streak

The middle consists of the main form, and entry navigation, to where users can fill out one entry per day and view all entries from before. The layout in the middle section is as follows from top to bottom:

• The entry navigation, which displays the date of the current entry selected alongside two arrows (the left arrow on the left side of the date, and the right arrow on the right side of the date) to indicate that users can go back and forth between entries.
• The main form, which allows users to enter information and save/edit the form. The following question with its type is as follows from top to bottom:
  • “Goal”: A textarea to allow a user input of any string of text/characters to enter their desired goal for the day
  • “Did you feel anxious today?”: A selection of yes or no to indicate if a user felt anxious
  • “What emotions were you experiencing?”: A textarea to allow a user input of any string of text/characters to enter their emotions associated with their anxiety
  • “What thoughts were you experiencing?”: A textarea to allow a user input of any string of text/characters to enter the associated thoughts associated with their anxiety
  • “What events occurred that led up to or triggered your anxiety and/or emotions?”: A textarea to allow a user input of any string of text/characters to enter the events that led up to the anxiety feeling
  • “How long did you experience anxiety/emotions in hours?”: A numeric field that accepts a number as an input to enter the number of hours that the user felt anxious
  • “Did it affect any daily routines or tasks for the day?”: A selection of yes or no to indicate if a user could not perform daily routines as normal
• The form action buttons, which allow the submission, editing, and deletion of the form, which is represented as the following from left to right:
  • “Save”, which on click will save the new entry or modified entry
  • “Delete”, which on click will delete the existing entry

The right side of the interface is the data for the user to review, including the following from top to bottom:

• Number of days in the past week that a user felt anxious, which tracks and displays a numeric value (from a range of 0-7) that shows how many days a user selected “Yes” on the “Did you feel anxious today?” question within the past 7 days.
• Number of days in the past week that it has affected daily tasks, which tracks and displays a numeric value (from a range of 0-7) that shows how many days a user selected “Yes” on the “Did it affect any daily routines or tasks for the day?” question within the past 7 days.
• Average time in past week of feeling anxious, which tracks and displays the average numeric value in hours of the last week’s entries from the “How long did you experience anxiety/emotions in hours”, taken to two decimal places.

Implementation

This application is implemented using the Svelte framework, consisting of HTML, CSS, and JavaScript code, without any other usage of frameworks. The code for this application is hosted on GitHub and is hosted live with the Vercel service, which is connected to GitHub.

AI Usage

I utilized the GitHub Copilot extension for various aspects within Visual Studio Code as I do have a student-verified Pro Account with GitHub, which allows access to the Copilot tool. I was able to utilize the AI tool to help develop and debug the JavaScript/Backend code as I was encountering issues with the entries not updating and displaying correctly, in addition to the buttons on the main interface not calling the desired functions as intended.

Additionally, I have utilized Copilot to automatically generate comments within the code, which I have manually gone through and verified its accuracy. I have also been automatically generating the commit messages that are seen on GitHub for efficiency purposes as I have made the application live prior to developing and been pushing frequently to reflect my development online as I went along the process.

Future Work

Future work will include enhancing the layout to be evenly spaced and aligned with each other, as currently it is possible to see that the bottoms of the boxes are not in perfect line. Moreso, adjusting the layout to ensure that it is optimal on both laptop/desktop screens and mobile screens would be future work to improve accessibility to users given our usage of smart devices in our day and age.

Additionally, future work will also include fine-tuning the backend functionality of the form to ensure that users do not click the “delete” button when filing out a new entry as currently, there is a bug that the delete button will light up as active if a user types any data into a new field, though clicking the button will not erase any data. This can be seen as misleading and ideally, the delete button would only be active upon saving the new entry for the first time. There will also be changes to where the save button is replaced with a edit button to indicate that the form can be editable and not just utilize the same save button, which users as a result may believe that the form is not able to be changed.

Source Code and Demo

Soruce Code hosted on GitHub
Demonstration of UI
Live Application