OVERVIEW

 The goal of our website, titled Midnight Train, is to help improve the mood and well being of the user. To do so, our website immerses the user by placing them on a train traveling in space that has no specific destination. Once the user, a ghost of the user’s selected color, boards the train, the user has access to a variety of features to help them relax and decompress. Our main features (located in the menu button) include journaling, listening to their own Spotify playlist, doing a breathing exercise, and chatting with other users.

MY ROLE

Project Management

 Throughout the development process, I played a large role in ensuring the project's success. As the project manager, I took charge of numerous critical tasks, including scheduling weekly meetings, tracking team members' progress, managing project scope and risks, and effectively delegating tasks to team members(kanban style development). I also introduced code review and pair programming as essential practices to ensure that our coding efforts were well understood and collaborated upon by the entire team.

Creative Design

 In addition to my project management responsibilities, I played a central role in the project's conception. I was responsible for conceptualizing the project and crafting the initial project proposal. My creative contributions extended to creating and designing all of the 2D art assets, including presentation slides, to enhance the project's visual appeal.

Technical Development

 On the technical side, I undertook various coding tasks, such as implementing the login screen, home screen, all character dialogue interactions, scrolling visual text, and the interactive door sequence where the conductor engages with users. Moreover, I designed the menu in the top corner, providing users with easy access to project features and enhancing user navigation. I also integrated dynamic elements, coding the generation of random quotes when users interacted with posters. Leveraging external APIs, I used the Particles Effect JS library to create randomly generated and moving stars, enhancing the project's visual aesthetics. I also used the socket.io library to create a singular room for users to be able to chat with each other anonymously(bidirectional communication). Furthermore, I developed the journaling feature, enabling users to save and record their daily thoughts. I also created the settings menu, allowing users to customize volume settings, background elements, and their ghostly character's appearance. I also designed all of the CSS animations for all of the buttons and interactables, adding visual appeal to the project.

User Research

 To ensure our project resonated with users, I helped conduct extensive user research, which involved creating multiple storyboards and interviewing 12 individuals to gather valuable feedback. This feedback was instrumental in refining our project and making it more user-friendly. To also ensure our project met user expectations, I helped conduct usability evaluations with external peers, gathering valuable insights and fine-tuning the project's user experience.

DEVELOPMENT STACK

 The project was developed using Firebase for backend account management. For the front-end, we utilized vanilla HTML, along with jQuery, JavaScript, and CSS. Additionally, all 2D assets were created using MediBang Paint.

DETAILS

 With our journaling feature, users have the opportunity to reflect on their day and their emotional state. For those seeking inspiration, guided prompts are readily available within the journal entry. The Spotify feature empowers users to curate their own musical atmosphere, making the train journey a more personalized and immersive experience compared to our standard lo-fi background music.

 The breathing exercise feature offers guided sessions designed to alleviate stress and enhance focus. While our chatting feature is still in the process of being fully implemented (currently allowing users to connect to a single room), it facilitates connections with others who are open to sharing their thoughts and feelings.

  Beyond these key elements, our train interface boasts a variety of interactive features. Users can choose to sit and contemplate the view outside the train window, discover random uplifting quotes by clicking on posters, and engage in conversations with the conductor. These interactive elements collectively contribute to a more comfortable, intriguing, and novel user experience.

Try it out yourself:   HERE!

Demo Video