Overview:
I worked with a team of other developers to create a mental health related web app. Through our mood website, we offer a platform of support for users to improve their mood and mental health.
Tools used: Figma HTML/CSS JS/jQuery AJAX Chart.js Flask SQLite Github Heroku
Duration: Oct 2020 - Jan 2021
Role: Lead UX Designer, Full-Stack Developer
As a designer, I led the design process of creating wireframes and prototypes of the website. Then, as a developer, I worked on the page UI's and website responsiveness. On the back-end side, I worked on the back-end logic of creating, reading, updating, and deleting entries from the database for the moodtracker feature of our application.
View the Github Here
Published website: Joybot
(To test: username: joybot_user, password: joybot)
Back to projectsOur Web App Idea and Features
With the effects COVID has had on mental health, many people need mental health support to improve their mood. Therefore, we created a mental health website that has 3 key features:
Prototype 1
Based on our plan, I created a low-fidelity prototype version for our web app, focusing on the mood tracker, chatbot, and mood randomizer page.
Mood Tracker
Mood Randomizer
Chatbot
Final Prototyped Design
After collaborating with my team members, we created a high-fidelity prototype and fleshed out the details of our application. For example, since both our application we were creating and Inside Out are about mental health, and our platform's goal is to make people feel as happy as the character Joy, we included images of her. We decided on a dark blue and purple color scheme, also inspired by Inside Out. Here is our final design:
Mood Tracker
We did not change much on the content of the mood tracker pages, but just added our background, which we got from bggenerator. We also made the inside of the entry rows, notes, and drawing space into a blue and white mix of colors.
Mood Randomizer
Similarly, the content stayed the same, although we added a "Show me another!" button, which would randomly choose another video/quote/image to display.
JoyBot
We added in an image of Joy from Inside Out on the side to make it appear more friendly to talk to. We felt like this fit in very well since through the chatbot, we want others to feel happy, and this is similar to how Joy is always trying to cheer others up. Because of this, we named our chatbot "JoyBot".
Home
We designed a home page together that introduces our project by showing an image of Joy next to a description of our website, and a summary of the 3 features our web app has: mood tracker, mood randomizer, and chatbot. These 2 sections are divided using 2 different backgrounds.
My Role in the Development Process
Published website: Joybot
UI for mood tracker, rating, home page, and login/signup pages
While developing, I was in charge of the mood tracker/mood rating feature, however, I also helped the front-end team with the login/signup pages and the home page. While working on these pages, I aimed to make them as similar as the design as possible, and ensuring that the application is easy to use. I also contributed on making all the pages responsive (using CSS flexbox), so that our website worked well and looked good on all devices.
Mood Tracker Backend
Using the Flask-Login library and Jinja Templating, I was able to hide certain content until the user is signed in. I also used SQLAlchemy and the SQLite database to store the journal entries and display them on the mood tracker page. Once getting the database logic working, I created a data visualization using Chart.js, with the x-axis as the journal entry dates, and the y-axis as the user's mood rating. To prevent the chart from getting too crowded, I set it to only display the last 7 mood ratings.