Moodr
Mobile application and wearable device that enhances patients’ mental health treatment journey
Hackathon Project
Introduction
UI/UX Design, 3D Model Design, & Presentation Deck
👨💻 Responsibilities:
December 2022 - January 2023
🗓️ Duration:
👏 Meet The Team:
Bach Le: Full Stack Developer
Yen Le: Business Researcher
Chanbin Moon: UI/UX Designer
About
During December of 2022 to January of 2023, I had the opportunity to be part of an exceptional team including a developer, a business researcher, and myself a the UI/UX designer. We participated in Johnson & Johnson's Hacking Health Tech - All Sci, No Fi hackathon which was hosted on HackerEarth, where we showcased our collaborative efforts and innovative solutions.
⌚️ Theme:
Our focus revolved around a captivating theme: developing a wearable technology that connects and protects data in order to enable the creation of a health ecosystem and improve the patient journey.
Problem
Mental health issues are currently the most significant health concern for young people worldwide. They account for the majority of disabilities among individuals aged 10-24 and contribute to 45% of the overall health issues in this age group (Gore et al.).
🙂 Mental Health
However, despite the clear need for mental health care among young people, access to such care remains low due to factors such as lack of awareness, barriers in the existing healthcare system, and societal neglect of the importance of youth mental health.
Research
Fitbit Charge
Xiaomi Mi Band
Apple Watch
🧐 Market Research
After conducting some market research, we discovered that, while the market for wearable health monitoring devices has grown in recent years, no companies have created wearable devices specifically for mental health patients that are widely used during treatment.
✅ Determining Goals
Our team wanted to create a product that can allow users to be more expressive and aware of their feeling by giving possible emotional outcomes based on their vital information and users’ answers to behavioral questions.
Solution
⌚️📱 Wearable Smartwatch & Mobile Application
We developed a wearable smartwatch and accompanying app that can generate and track users' daily emotional records. The data collected by these devices and apps will allow healthcare professionals to better understand their condition and offer treatments tailored to each patient.
App UI/UX Design
Initial low-fidelity design
Mobile Application
The accompanying app will allow patients to sign up for new accounts, complete questionnaires to generate a possible emotion, and manage their smartwatch. With a clear objective for this web app, our team was divided into four main user flows parents, learners, volunteers, and admin.
Wireframes & Prototype
As the UX/UI Designer of the team, I converted the mobile app user flow and design ideas into digital wireframes which were later finalized into a Hi-Fi mockups.
As the design choice, 5 main colors were selected to easily categorize each questionnaire process and increase the user-friendliness of the app.
In terms of typography, Inter was used for legibility so users can easily read and understand their tasks on the app.
App UI/UX Design
High-fidelity design & user flow
With the digital wireframes and design choices completed, 15 Hi-Fi mobile UI designs were created during the duration of this hackathon.
Main Flow
The main flow includes questionnaires that users can complete to generate their possible emotions at a given moment.
Log In & Create Account
Users will be able to create their accounts during the onboarding flow. After creating an account, users will log in with their credentials.
Previous Moods, Profiles & Watch Settings
Users are able to look back to their previous moods and manage their profile and wearable smart watch.
Previous Moods, Profiles & Watch Settings
Users are able to look back to their previous moods and manage their profile and wearable smart watch.
Prototype
Smartwatch
The wearable smartwatch will measure the vitals of the users which will be used as a source in determining the user’s mood along with the questionnaire.
⌚️ Wearable Smartwatch
3D Mockup
3D mockups of the smartwatch were created using Blender. It was a challenging task, but I enjoyed learning new software and seeing the outcome of it. (Width: 2cm Height: 4cm)
Interface Design
The interface for the watch was created using Figma. The main focus for these interfaces was to display a minimal watch face and colors that best represent the user's emotions at a given time.
App Development
🧑💻 Front & Back-end
After the UX/UI design process was completed, I handed over the design to Bach Le who was our full-stack developer.
Business Plan
📋 Business Plan
The business plan including the executive summary, opportunity, research, and financial plan was completed by Yen Le who was our business researcher.
Presentation
👨🏫 Presentation Deck
A 20-slide presentation deck was created to describe the product that we have created and with the help of my team members, we were able to finalize our presentation. (Please note that we do not have real-life data due to the time- constraint nature of the hackathon)
Lesson Learned
What I have Learned
This project challenged me by allowing me to experience the hardships of those undergoing mental health treatment in order to determine the best experience for users on both ends. This hackathon was extremely meaningful because I was able to collaborate with a developer and put myself in their shoes to improve the experience of collaboration.