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 profile - Persona 1.
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.
Homepage with calendar with feature for daily and hourly input of mood.
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?
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.
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.
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)
Using Miro, everyone collaborated to identify the different possible scenarios users encounter using the app and the results of its actions.
Persona Development - Clinician Desktop App
(Collaborative Task)
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)
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)
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)
The last step was to do a Cognitive Walkthrough with different possible scenarios to test the usability of the clincian app.