At sit eleifend efficiendi, utroque forensibus vel eu. Eros mandamus ad nam. Ad natum virtute pro, dicit scripserit nec cu et qui dicat.

Follow me:
Tw        Be        Fb        Pin

Image Alt


Project Brief: Mental health and technology

Team: Solo Concept Project
Role: Creator, UX & Visual Designer
Date: Sept. 2013 – Nov. 2013 (UPD 2018)

Humankind is a web application project that fosters a national discussion on the importance of having positive mental health. Many adverse incidents can be linked to our psychological well-being, therefore it is crucial to find possible solutions to help our society thrive and make healthier choices.

Today, many clinicians and engineers have partnered to develop applications that help patients from all backgrounds. From monitoring medicine intake to behavioral health issues, technology has become a mainstay within the healthcare community.

For my User-centered Design class, I was challenged to create a project that would help users maintain positive mental health habits and instill them into their daily lives.

User profile home page

Building character page

The Problem

In recent years, one of the most prominent technologies that have affected our mental health has been the use of social media. There are a number of studies that show the positive effects, however a rise in the disruption of our mental health has been recorded by many health care researchers and professionals.

Teenagers and young adults are two groups that are the most susceptible by the use of social media, and constant use of the technology has been shown to exasperate feelings of depression, anxiety, narcissism, etc.


To gain a deeper understanding of how users feel after being on social media, a list of questions was formulated to conduct a testing survey of 15 participants. There were a number of positive and negative answers from each person partaking in the questionnaire.

Making sense of the data

After conducting research, the majority of users reported positive results from their use of social media such as feeling connected to their peers and being informed about the latest world and national news. Many people have reconnected with friends and relatives who may live long distances away. And several received their news primarily from social media.

However, one of the top negative affects participants felt was the social comparison to their close and distant peers, and those who were chronically exposed to social media reported this feeling more.

A new perspective

The goal of Humankind is to create a platform where young adults, who are the largest demographic for social media use, to have a place to discuss their emotional and psychological well-being, and how they can maintain an overall healthy mindset. At an early age, many teens are introduced to topics such as peer pressure, bullying, and unhealthy comparison which can carry on into adulthood. The basis of the platform is not to persuade people to stop using social media but to shift some of their focus to how they are doing mentally instead.

Application focus topics include:

  • Dissociating a sense of self-worth and confidence from an online persona.
  • Promoting an active discussion on the importance of mental health.
  • Combating narcissistic personality traits by building empathy and compassion for others.


Before starting any designing, I wanted to visualize my thinking and brainstorming on paper. This helped in creating ideas for the best possible user experience based on the research findings. These ideas were evaluated, which helped in keeping standout ideas and eliminating ones that wouldn’t work.

User insights

After gathering data from the above research, I was able to create personas that represented the range of behaviors from surveyed users. Below are the main features of each persona.

Design process

The design process includes developing the best ways to convey the points above. The three main objectives are character building, developing inherent self-worth, and promoting healthy discussions between healthcare professionals parents, teens, and young adults.

The three main components of the web application include:

Building Character

This component helps users focus on building positive character traits such as compassion, self-discipline, and humility.

Developing inherent self-worth

Here, users can challenge the things we have grown to base our self-worth on, such as external validation, and know that we have intrinsic value regardless of outside factors.

Fostering discussions

Finally, users can have an open discussion on the importance of cultivating healthy mental habits with parents, health care professionals, etc.

Starting the design

Prior to prototyping, I wanted to expand on what each category would offer, what would be on each page, and how many pages there would be. One of the main features of the application was to encourage users to practice one or two attributes of good character, and use it on a consistent basis.

Afterwards, I proceeded to map out with sketches what each page of the application would try to accomplish for the user.

Sketching interfaces

Before wireframing, I opted to sketch my designs on paper to get a feel of how the interface should look. In order to test the UI, I utilized paper prototyping techniques to test them with a few users. Sketching beforehand helped me to further communicate the application’s concept and visualize more ideas.

Visualizing the user’s path

A condensed user flow was created to gain an understanding of the possible path that the user can take. I wanted to focus more on the experience and needs of the user before considering any small design details for the screen.

Wireframe for main pages

To further solidify the structure and architecture of the application, two main wireframes were created including the home and building character page.

Home page wireframe

Building character wireframe

Colors and Typography

For the UI colors, I chose a range of blues and greens. These two colors, according to color psychology, are used for their calming affect. They can also be used to help people concentrate and experience a sense of peace and tranquility.

The typography used was a mix of legible serif and sans serif fonts, the serif fonts were used for the main titles on the home page, and a set of sans serif fonts were used for the dashboards and paragraphs.

Design Thinking: Prototyping

I created the protoype for the user study with Protopie. The prototype was used to communicate a brief wizard for new users of the application. The tutorial wizard includes:

  • A brief explanation of the side dashboard.
  • Outline of the three main application options.
  • Options for the user section and more.

Evaluations & Findings

An evaluation of the design was conducted by performing a think-aloud session with 5 participants. Observation of how the group interacted with the UI was recorded. Below are some of the main points based on feedback and observation:

  • Participants felt that there should be more information about each subcategory on the side dashboard. Most of them wanted a better breakdown of what each option on the dashboard and home page entails.


  • Participants agreed that the UI was easy to use, and they appreciated the simple design and focus on the application’s main functions.


  • One participant mentioned that the application reminded them of positive subliminal messages and affirmations. They enjoyed having a sense of peace and slowing down their mind from constant thinking and comparison.

Final Design

The final design includes a tutorial wizard that includes a brief explanation of what each area of the home page entails. Further development will include a more comprehensive explanation of user’s can accomplish depending on their individual needs.

Home page mobile screen

Building character tablet screen

Final Results & What I learned

Prior to prototyping, I wanted to expand on what each category would offer, what would be on each page, and how many pages there would be. One of the main features of the application was to encourage users to practice one or two individual attributes of good character and be able to instill that into their daily lives.

What I Learned:

Don’t let aesthetics overpower the purpose: The majority of users are definitely attracted to a well thought out design, however, the application’s main purpose should be placed at the forefront of the design process. Users also liked that there were only a few interactions, giving them the chance to focus on what they wanted to accomplish.