How Are You Today is an Android App that allows user to record and share everyday mood with his/her partner, and also to view both his/her own mood history and the partner’s mood history.
Learn about this app in 1 min
Design Rationale and Process:
1. Define Problem:
Couples want to know each other’s mood everyday. Especially in long-distance relationship or a relationship where couples don’t see each other everyday, it can be hard to know how the other is feeling. Sometimes when one feels sad, he/she doesn’t want to explicitly tell the partner but still wants comfort.
Also, from my previous research when designing Knowledge Base, I found that couples want to keep track of their partners’ lives but don’t want to spoil the fun when they see each other.
My solution is to use technology as a mediator for couples to record their mood. Because of the convenience of mobile phones, an app becomes an ideal choice. In the App How Are You Today?, after creating an account, couples can match with each other and record their mood for today and only share with their partner.
They can choose from the pre-set moods (happy, good, OK, sad, angry, crying), and can further specify their mood by adding tags. They can also write a short (no more than 50 characters) description indicating why they feel this way, thus giving their partner a little hint but not spoiling the fun when they actually meet/talk.
If in a sad/crying mood, one can choose from the options: “I want comfort” or “leave me alone”, as people have different ways of dealing with bad mood.
On the main page, couples can see each other’s mood and can easily call their partner from the upper right corner either to comfort a partner in a bad mood or simply to chat.
3. Design & Prototyping:
Since it’s a mood recording app, the color needs to look cheerful, so I selected amber as the primary color, and green as the accent color according to Material Design Guidelines. The colors for six mood categories were selected based on their properties, warmth and the harmony when putting together. For example, oftentimes “happy” is associated with yellow, and “angry” red.
When designing the icon, I was thinking about couple, mood and sharing and wanted to express such emotions. The icon used the primary color and expressed joy. I designed two versions of the icon with three variants of one version and did some simple testing with people.
Most people liked the “heart” version better since it’s for couples. For usability concerns I eventually went with the third one (the bold lines) since it could stand out more when installed on a real device.
When creating the user interface I kept the Material Design Guidelines in mind, since it’s an Android app. And because I was planning on actually coding the app, I also took into consideration whether the UI could be turned into reality. Thus the UI turned out to be simple and clean, with color-coded background to indicate the different moods.
Then I created an interactive clickable prototype using POP. (View it here.)
4. User Testing
I did user testing with my peers and also a gorilla testing using Peek. Overall they thought the design was able to address the problem, and the UI was clean and easy to navigate.
- user signup and login by implementing ParseUser
- correctly match with partner by searching the username in the database; can prevent from matching with someone who already has a partner; need both parties to match with each other before they can see another person’s updates
- record a mood and upload to the Parse database
- be able to see a word countdown when entering the mood description
- add tags to specify the chosen mood by implementing a custom tagGroup widget
- display Today’s mood by implementing ParseQuery
- updates “Today” view after recording a mood; ActionBar and background color changes according to the mood user chooses
- display three tabs “Today”, “My history” and “Partner’s History” by implementing View Pager and Fragments
- display a list of my mood and my partner’s mood by implementing Custom List View
- delete a record of my mood by implementing a button in the Custom List Item and an onClickListener in the Custom Adapter
- invoke the “Phone” app by calling an implicit intent