Mood Diary Application

Role Persona Creation, Prototyping, Low and High Fidelity Wireframing, UI/UX Design, Research

This was a collaborative project designed for the Introduction to User Experience, User Interface and Interaction Design module at Maynooth University
The brief was to design a Mood Diary application for both patient and clinician. The patient side design is for mobile devices and the clinician for desktop.


Our class (eleven students) had both individual and group tasks that were shared and discussed on each meeting in order to everyone to collaborate and give suggestions on the iterative design. We usually had pools with voting to decided on which solution to choose.
Different tools were used to design the project, such as Miro, Figma, Balsamiq, Xtensio, and Illustrator.

The patient app proposal is an app that will be developed for users to track their mood daily, or even hourly in a simple and easy way and be able to keep track of what is affecting their mood either in a positive or negative way through statistics generated with the patient inputs.

Personas Development - Patient Mobile App

(Individual Task)

The first step was understanding and empathizing with users in order to identify their needs and struggles. For that, research on the user profile was conducted and two key personas profiles were created:

patient persona 1

Patient profile - Persona 1.

patient persona 2

Patient profile - Persona 2

Sketches Generation - Patient Mobile App

(Individual Task)

With the users' needs, possible limitations and aspirations identified, the next step was conducting research on simillar mobile apps for reference and inspiration. Narrowing down the essential features to keep the UI simple and a straightforward usability, rough sketches were generated with the main features for mobile interface.

calendar feature sketch

Homepage with calendar with feature for daily and hourly input of mood.

mood input screen sketch

After selecting a date, the user sees the screen for mood input, then:
1) User chose a Mood scale from 1-10 ( 1 being the worst mood, 10 the best)
2) Describe what are you feeling:
3) Any thoughts in your mind?
4) Describe any physical symptoms:
5) What activity were you doing?

statistics screen sketch

On the Statistics section, the user can select a specific period of time and click on the days below the charts graphics for more information.

extra features screen sketch

Page with extra features: Alarm reminders - Settings - About - FAQs

Lo-Fi Interactive Wireframe Design - Patient Mobile App

(Individual Task)

Using Balsamiq, a low fidelity interactive wireframe was created.

Lo-fi patient wireframe gif

Review and Future Improvements - Patient Mobile App

(Collaborative Task)

After concluding this stage, the entire class gave feedback on each others' wireframes. Two main improvements were pointed by my colleagues: One was the use of a plus (+) symbol for the extra features page. This lead them to confusion thinking this was a button to create a new input. The solution could be replacing the icon by a three dots one.
Another issue discussed was the use of colour to represent the feelings and its swifts. As colours can be synonym of performance and red being associated to negativity it could be a big issue for a patient coping with mental stress. This problem could be solved with an alternative method, like a word cloud, to measure how often and which feelings are constant.

User Scenarios - Clinician and Patient

(Collaborative Task)

User Scenarios JPG

Using Miro, everyone collaborated to identify the different possible scenarios users encounter using the app and the results of its actions.

View User Scenarios in PDF

Persona Development - Clinician Desktop App

(Collaborative Task)

clinician persona

Following the same process of empathizing and identifying users and their needs, this time a profile were developed for the Clinician persona.

Lo-Fi Interactive Wireframe Design - Clinician Desktop App

(Individual Task)

Lo-Fi Wireframe Design Clinician Gif

A low-fidelity interactive wireframe was designed using Balsamiq. Taking in considearation that the clinician would use this application on their office, the layout was devloped for desktop. The elements were arranged to make the most of the wide screen area. The features were chosen after thorough user scenario analisis.

Hi-Fi Wireframe Homepage Design - Clinician Desktop App

(Individual Task)

Hi-Fi Wireframe Design Clinician

With extensive interface design best practices research, the homepage was designed using calming colours that are often related to healthcare: blue and green .

Cognitive Walkthrough - Clinician Desktop Appp

(Individual Task)

Cognitive Walkthrough Table

The last step was to do a Cognitive Walkthrough with different possible scenarios to test the usability of the clincian app.

View Cognitive Walkthrough Table in PDF