🎯The Brief

For my university's introductory Human-Computer Interaction course, I conceptualised and designed a mental health tracking mobile application called Psych in a team of four students. All the team members were assigned the role of UI and UX designers.

We chose the theme 'Mental Health' because not only is it an important contemporary issue which requires urgent attention from all communities, but also because insufficient study and background research goes into designing and developing mental health applications, which renders them inefficient and unsuitable for users.

Since this project was designed for a HCI course, the focus was on learning HCI processes instead of working towards a business challenge. The project was carried out in three iterations.

The first iteration focused on the contextual enquiry, laying out a conceptual design, generating paper prototypes and carrying out initial evaluations on the product.

The second iteration focused on the UX of the product, developing a medium-fidelity prototype from the paper prototype, and carrying out rigorous empirical evaluations on the same. The third iteration consisted of developing a high fidelity prototype and improving the application from the previous two iterations.

The Process

The overall design process of this project is derived from the Interaction Design Lifecycle Model which consists of four primary steps and can be summarised as follows: Establishing Requirements, Design, Prototype and Evaluation. The first step, Establishing User Needs and Requirements, aimed to create an initial set of requirements for the product. To acquire convincible data for our initial interaction design, the team conducted varied activities such as interviews, online surveys, observations and researching similar products. I was responsible for the online survey and for product research.

The data received was split into two categories: quantitative and qualitative. Quantitative data included results from sources such as surveys and TAM questionnaires, whereas qualitative data included affinity diagrams on the basis of the survey results. I made three User Personas on the basis of this initial data collection. The personas in turn were used to generate Interaction Scenarios by my team members.

User Personas

User Persona 1

🧔🏾

User Persona 1

User Persona 2

👱🏾

User Persona 2

User Persona 3

🧓🏻

User Persona 3

One Sentence Problem Statement

"A mobile phone/tablet application that can provide support for people who are suffering from mental health issues, allowing for a person to journal their thoughts, meditate or contact a psychologist whenever the person starts to feel like they need to reach out for help."

User Flow Diagram & Prototyping

A user flow is a series of steps that lays out all of the possible decisions that the user can make while interacting with the system. Drawing a user flow diagram aided visualisation of the entire system and helped the team identify pain points which were to be improved in subsequent iterations.

For initial prototyping, the team followed a Diagonal-Prototype approach, since it’s a combination of a horizontal prototype with a vertical prototype. Horizontal prototypes are useful in the early stages of design for they map out the system’s structure whereas vertical prototypes are useful in testing specific details of the design.

Paper prototypes were designed by me and another team member first, which were then converted to low fidelity static prototypes in the second iteration. A complete high fidelity prototype was made for testing purposes in the third iteration.

UI Design and UX Considerations

All the features designed by the team have been discussed below. Things of significance, such as interface metaphors, affordances and UX considerations have also been discussed along with each feature. The prototype was designed in Adobe XD. Please note the length of some screens are longer than others due to scrollability, and hence the appropriately fit them into the screen, their size have been decreased which has rendered them thinner in comparison to the non-scrollable screens.

Sign-up and Login Screen

Once logged in, the user is taken to the dashboard which presents various features to the user in a card-based layout. Card-based metaphors have been popularly used in modern applications, and also are intuitive, minimalist, neat and mobile-responsive.

Each card displays a separate feature, which link to subpages within the application. The top-most card is reserved for the Self-Care Tracker; the Journal, Therapy and Meditation features are provided underneath as separate cards.

UX considerations include:

1. Greeting the user depending on the time of login

(Morning, Afternoon, Evening);

2. Providing shadows to each card to create a visual

hierarchy and an impression of depth as an example

of Design Affordance;

3. Using images inside cards to communicate with the

user better; and

4. Call-to-action buttons within specific cards to do a

specific action, such as Add an Activity or Continue Meditation.

Dashboard

The user starts out on a Login Screen which asks for a Username and Password. If the user does not have an account yet, a sign-up option is provided at the bottom of the screen. Clicking the text takes the user to the sign-up screen, where they can enter their name, email, username and password which will be used to log in. Once logged in, the user is taken to the main dashboard of the application.

Users prefer visuals which are minimalistic and soothing to the eye, which leads to an enticing user experience and thus the team chose gradients of blue as their main palette. Additionally, Proximity and Similarity from Gestalt’s Principles have been used to influence how the text boxes are placed and to help categorise all of the UI elements across the screens better.

Further UX considerations include:

1. Providing hint text within text boxes;
2. An option to log in directly with their Facebook and Google Account; and
3. A bold ‘Sign Up’ or ‘Login’, which serves as a call-to-action button.

Self-Care Tracker

The self-care tracker is the one of the first features that the user notices on the dashboard. It displays a simple graph of data points plotted against days of the week vs. numbers on a scale of 1-7, which are the ratings for three things: Mood, Diet, and Sleep, one being the lowest rating and seven being the highest rating. The settings can be altered to view the data for a day, a week and a month.

Upon clicking the ‘Add Activity’ button, a pop-up is shown which blurs the current background. This pop-up displays an interface for bars that be toggled to change the values for the Mood, Diet and Sleep metrics. A help button, acting as another design affordance, has also been added to the interface to succinctly provide quick information about how to the use the interface and what the number scale means. At this stage of the prototype however, it has not been implemented.

Once all the values are added, the user could click on the ‘Add Activity’ button, and the three data points would be reflected in the graph. The purpose of the self-care tracker is to provide the user with a general trend of three things that account for mental health the most: Mood, Diet and Sleep. These are quantified into a visualisation which can be quickly glanced at by the user, thus providing them with condensed information over time.

Journal

Upon clicking the journal card, the user is taken to the main screen of the journaling interface.

The interface is also laid out according to cards, with the top card reserved for creating a new journal entry. Subsequent cards, separated by a separator serving as a visual cue to the user, are all of the previous entries, serving as an example of Proximity and Continuity from Gestalt’s Principles. Each card consists of the date of entry and title of the entry for the sake of consistency. Any photos inserted within entries are shown as a preview within the cards in the right side of the card.

A sort-by-date feature has also been designed by the team, which is essentially a pop-up featuring a calendar with a selected date and all of the entries on that particular date. This feature helps provides a better user experience as it prevents the user from scrolling through an endless list of previous entries.

Therapy

Upon clicking the therapy card on the dashboard, the user is taken to the main therapy interface which displays a list of available therapists. Each card belongs to a therapist, and shows the photo, name and credentials of the therapist.

Upon clicking a therapist’s card, the user is taken to the therapist’s profile. The profile consists of their location, metrics such as ‘Clients Helped’ and ‘User Rating’ which aid in the user’s decision- making, their associated licenses, and a small bio.

Once the user has perused all of the given information and scrolled down, a ‘Contact Now’ button is available which establishes a connection between the therapist and the user.

Meditation

Upon clicking the meditation card on the dashboard, the user is taken to the main meditation interface. The interface consists of:

1. The lessons the user is currently undertaking;
2. A ‘Discover’ section which helps them discover new activities and playlists; and
3. Progress Statistics to improve user engagement and quantify useful metrics.

A hovering ‘Add’ button, albeit being displayed in the middle of the screen due to a flat art-board, is also present in the lower-right corner of the screen. It retains its position as the user scrolls across the screen. This is also a common affordance which can be found in popular mobile applications. New courses and playlists can be added by clicking on this button.

Lessons under ‘My Lessons’ which have already begun can be resumed by clicking on the Play Button. The interface for each lesson is consistent, with The Lesson Number and Name at the top, a play/pause button in the middle with a dynamic timer around the edge of the buttons, an ‘Up Next’ label and a ‘Skip to Next Lesson’ button near the bottom.

Profile

Upon clicking on the user icon in the top right corner of the dashboard, the user is taken to their profile.

The profile consists of the user’s photo, their location, and metrics which show how many journal entries they have, and the number of meditation lessons completed.

It also shows three other metrics, namely Mindfulness, Self-Care and Therapeutic, which are calculated on the basis of the usage of other features in the app. These have been designed with Gestalt’s Closure Principle in mind.

Lastly, the profile provides the user the ability to connect their social media accounts to the application.

🧪 User Testing

The most important step of the iterative design process is the evaluation of prototypes and how the user interacts with the conceptual models which have been developed. Observing these interactions allows for the design team to understand where the conceptual model falls short in terms of the implementation. My responsibilities included conducting surveys, interviews and time-on-task testing, along with helping my team members with quantitative user testing using TAM and SUS testing.

For the first iteration, the team tested the paper prototype with the help of Technology Acceptance Model (TAM). To test the paper prototype, the team went out and got interviewees to act out a scenario where the application is implemented to be used and observed. The interviewee was then questioned using the TAM process, and results recorded.

TAM questions were put to the interviewees after they had used the application and given their feedback. These questions are designed to give definitive (yes or no) feedback using a 1- 4 system.

Once the medium-fidelity prototype was developed in the second iteration, the team conducted a System Usability Scale (SUS).

The System Usability Scale (SUS) is a reliable tool for usability measuring, that basically contains 10 questions with 5 options, from strongly disagree to strongly agree. It is used to evaluate perceptions of usability for various products, services and come up reliable results.

The chart below indicates the System Usability Scale score of the medium fidelity prototype, with score 81.6, which is dramatically higher than the average 68. This success benefits by an in-depth understanding of users’ needs, with an improved interface which is clear and easy to use. In the first time using the app, most users understand what they can do and how to achieve the goal. In other words, the user effort to complete tasks is minimized, so they will keep using this app frequently later.

However, for people who do not use technical devices much, there is still a difficulty to adapt the interface, which leads to a long time taken as a result. Furthermore, some descriptions, such as mindfulness and therapeutic, are slightly unnecessarily complex.

A Time on Task evaluation was also conducted during the second iteration.

The time on task evaluation is used to identify usability problems within a user interface. This evaluation measures three events:

• Average time to complete the task.
• Average time to failure.

The interviewees were given the medium fidelity prototype on a laptop along with the scenario to act out with the end goal of completing the task as quickly as possible. Their scenario was timed, and any errors that were made were recorded at the time they happened along with a brief description of what happened.

The results were then plotted in the form of a Box and Whiskers Plot.

The third iteration consisted of a heuristic evaluation, qualitative surveys and interview testing with users.

🧠 Insights and Reflections

The self-care tracker is the one of the first features that the user notices on the dashboard. It displays a simple graph of data points plotted against days of the week vs. numbers on a scale of 1-7, which are the ratings for three things: Mood, Diet, and Sleep, one being the lowest rating and seven being the highest rating. The settings can be altered to view the data for a day, a week and a month.

Upon clicking the ‘Add Activity’ button, a pop-up is shown which blurs the current background. This pop-up displays an interface for bars that be toggled to change the values for the Mood, Diet and Sleep metrics. A help button, acting as another design affordance, has also been added to the interface to succinctly provide quick information about how to the use the interface and what the number scale means. At this stage of the prototype however, it has not been implemented.

Once all the values are added, the user could click on the ‘Add Activity’ button, and the three data points would be reflected in the graph. The purpose of the self-care tracker is to provide the user with a general trend of three things that account for mental health the most: Mood, Diet and Sleep. These are quantified into a visualisation which can be quickly glanced at by the user, thus providing them with condensed information over time.