UI/UX Design
UI/UX Design
UI/UX Design

Moodi

An interactive mood tracking app that takes the hassle off the user and makes mood tracking casual and breezy. Chat with Feelix, the friendly Moodi bot who loves to hear about your feelings. Have a short conversation, and Feelix will log your mood for the day.

Technologies

Moodi is a Flutter and Dart application. The database we used is Firebase's Cloud Firestore, where we store the data needed to track the user's emotions every day. We used Google Cloud's Dialogflow to create our very own chat agent, Feelix. We learned about intents, actions, entities, and fulfillment, and had a good time training the bot. It was our developers' first time using these technologies. Our demo uses Android emulator, but Flutter apps can be used cross-platform.

Our design team worked hard to produce refined low-fi and high-fi wireframes using Figma, working in tandem with the developers as we spent a very long day and two very long nights building Moodi.

Challenges faced

Our team comprised two developers and two UI/UX designers. This provided good balance between design and implementation decisions, however, it also added more challenge to the developers since the project required a fair amount of coding. It was the developer team's first time developing a mobile application.

We aimed to fully utilize Google Cloud's Dialogflow functionalities such as speech-to-text, multilingual support, and sentiment analysis. However, due to time constraints we could only train the bot enough to have small talks with the user and log emotions using a text command.

The development team could not reproduce the design team's ideations in its entirety. One particular case was the calendar screen. Most popular libraries only allow a specific amount of UI customization that did not include the one we needed to match the design. We had to come up with a new UI design 2/3 into development.

What's next for Moodi

Thanks to our great design team, most of the front end is already drafted and implemented. The backend required more time to polish and integrate. We did not manage to create a user database to store different users. Moodi's software architecture was created with scalability in mind. Some features that can easily be implemented, given the time, include the speech-to-text, sentiment analysis for automatic mood tracking, monthly reports, a better calendar implementation, user login and authentication, and many others.

Built With

avd
dart
dialogflow
firebase
flutter

Submitted to

Hack the North 2020++

Created by

I worked on the UI and the UX behind this app and edited the pitch video. It's been a while since I went to a hackathon, but I am glad that I found myself an amazing team that allowed me to be creative as possible.

Kei Kusama
I was responsible for the backend, making it talk to the frontend, and I helped out with some UI implementation in the final stretch. It was challenging using Flutter, Android Studio, Firestore and Dialogflow for the first time, but enjoyable!

Kailey Chew
I mostly worked on the frontend. I helped with parsing the backend information to make them show on front end elements and designing the code architecture to allow scalability. It was my first time making a mobile application and using Flutter, Firestore, and Dialogflow, and I learnt a lot!

Elizabeth Lam
Grace Yip