Explore possible methods to design effectively for human mental well-being, especially in UI.



Acomp was a research project of mental health study and design. It studied on various parts of designing an effective and user-friendly mobile APP that can help our target user groups to take care of their mental well-being.

However, here I only included a part of the whole research project as a case study. The case study shown in this portfolio piece focused more on a higher level of the design and UI of the product (Acomp). In this part of the research, I will show how I discovered user needs and problem, thought about creating a minimum viable product,  explored and practiced design with the help of expert research, and approached to the scentifically proved effective visual style.

My Role

Product Designer


3 weeks

My Team

Owen Hu
Tony Zhou
Sybil Wang

From user needs to what they “really” wanted

Understanding the real problem behind the needs was the first step to a reasonable product concept.

Narrowing down the  topic

Mental concerns contained plenty of topics such as fatigue, irritation, stress, anxiety, depression, and so on. The impact of each issue in different degrees could also result differently on people. Thus, what issue should I focus needed to be throughly considered.

In order to define a reasonable research scope and avoid any ethical issues, I talked to a psychological consultant to estimate the severity of these issues in several degrees. Regarding to the amount of professional help that was needed for them, I finally went with the topic of reducing the daily anxiety.

Behind daily anxiety, what were the controlling factors?

In order to understand what was causing anxiety in people’s daily life, we collected user voice from forums such as Quora and reddit. We summarized 6 main factors such as family issues, economical issues, pandemic, and others.

We then interviewed 5 people who were between 20 - 40 years old. 2 of them were college students, while the rest were working. Insights from these interviews suggested that there was a common problem buried behind daily anxiety called “the feeling of losing control in life”. Therefore, to generate the feeling of control was one of the controlling factors to reduce daily anxiety.


A valid method for reducing daily anxiety?

After identifying the problem, what would be a valid method had puzzled me. However, I did not directly interview the users what could help them generate the feeling of control because (1) users may not know what was actually effective for them; (2) the results could be biased because of the small sample space.

In order to get proved effective methods with respect to a large database, I needed help from field experts. Therefore, I turned to psychological consultants, cognitive researchers, and clinicians for insights. By interviewing them, I noticed that over half experts mentioned that one of the effective method was to keep track of ones’ life. It helped to create the sense of control because cognitively the trackers  held an overview of their states and mental condition. They might feel safer when they had these records.

Beyond just a mood tracker:
Approaching the solution

There were already many mood tracker products. How to differentiate my product? What did I consider during design and iterations?

Target users & Overall design principles

Whom was the product for?

Considering the professional resource we had and the problem (create the sense of control) we figured out, it was clear that we were not planning to design for everyone who needed mental care.

our product ≠ professional assistance

Instead, we focused on elder students or employees who
• did not have severe mental disorder,
• cared about their mental well-being,
• wanted to actively get rid of daily anxiety,
• and obtain the sense of control of life.

Because (1) in our pre-research survey, people in these states of life were most likely to get anxious; (2) many of them were actively searching ways to let off negative emotions; (3) above reasons could also made our product targetting these problems attractive.

Overall design principles

I set up an overall design principle for the product to make sure the product presented as complete, consistent, and unique. It was generated from the need of our tartget users.

Finding our own product positioning

Why was it also important for a designer?

What would the features in the product, how should they look like, and what function should they provide were related to the designer.

Although this was a research project, practicing the process of finding the product positioning that could diiferentiate our product was worth trying, in order to get familiar with the industry.

From “Safe & Private” to the virtual acquaintance community

According to the competitve analysis of 8 similiar tracker products, I found that many of them focused on the comprehesiveness of inputting information, different types of data visualizations, or a much easier user flow of recording.

But few of them really considered how to provide a trustworthy private space. Further, several products supported social fucntionalities, but none encouraged users to express their care to close friends or family members who cared them the most. Keeping that in mind, we postitioned our product to create a self tracking and sharing safe “house” for small communities with friends and family members.

Creating metrics & Structuring Information

Measuring the success of design

Beside the metrics shown above, I also raised several questions regarding to business:
(1) What could keep the users return in a certain frequency?
(2) How to effectively hear the user voice about the product?
(3) How to raise the Net Promoter Score regarding to users’ satisfaction?
(4) ...

I did not included the results here. They were in my other story which is under development.

Information collection & display

There were several questions that needed to be considered during before crafting the design:
(1) What information needed to be collected?
    a. how many mood emojis could be easily recognizable?
    b. ...
(2) How to collect them (tags, text, video)?
(3) What should be displayed in the mood history/report?
(4) ...

I interviewed 5 users and did not include the results here because it was not the focus of this piece.

More details about the above three parts were included in Acomp: Designing a product for mental health (currently under development). Next, I will only focus on the visual choices of the product.

Speaking the visual language

The nature of the mental well-being product determined that the visual elements should be deliberately chosen. Our design principle “Comforting” also emphasized it.


Choosing a proper theme color

Emotion & Color Psychology

Emotionally, humans preserve colors in different ways. While some colors create a calming feeling, others can be stimulating. In many studies, green and blue can create a feeling of safe and trust, while green and purple can create the feeling of soothing and relaxing [1]. The reason behind this may be that people associate colors with things that they see in nature such as sea, trees, and flowers. These things create the sense of peace which is gradually associated with their colors [2].

[1], [2] Source:

Culture & Colors

According to the color psychology, green, blue, and purple seemed to be good choices. However, another factor needed to be considered -- color’s cultural language. I did not want our theme color to recall improper feelings for part of our users from other cultural backgrounds.

As we know that blue can be associate with peace, but in western culture, it can also remind people of sadness and loneliness. While green is often related to safe and life, in a few Asian cultures, it also means infidelity and it can also be the representative color of Islam. Comparing to these two colors, purple was safer because it lacked significant negative connotations globally. [3] Thus, I set our theme color to be purple.

[3] Source:

design solution

Color pairing

Color balance

Having only the theme color decided was not enough to create a complete visual design. But color pairing was not easy. I applied the “Maximum Three Primary Colors” rule [4] to avoid chaotic visual appearance. In order to create a harmonious combination, I also applied the Golden Rule [5] of color proportion.

[4], [5] Source:

Brand, main, and accent colors

Keeping the above two rules in mind, I first defined the three primary colors as a main color that took 60% of the design, a brand color that took 30% of the design for buttons and tags, and an accent color that took 10% of the design and awaked users (such as warnings).


Legibility & Accessbility

Typography vs. Screensize

Is the text large enough for various screens? I started with the smallest screen size that was 320px wide. After testing, I found out that a size between 32px to 13 px had the best readability according to the information types and density in the design.

Contrast & Spacing

Because we wanted it to be as acessible as possible, contrast was an important thing to increase the visual accessibility. During iterations, I made sure that most of the text and background had AA or above contrast.

As for spacing, I applied the approximity rule to divide the questions and charts in sections.

Final design: UI overview

I included only representative screens here to show the overall product concept and visual design.


Results and takeaways

This case study was very challenging for me. We tested the final design with 3 experts and 5 potential users. 2/3 experts liked this idea and thought the product concept and visual seemed to be academically effective, while the truth would be to develop and release the product which we did not have resources for now. All of the users were satisfied with the overall UI design. “It feels calm”, mentioned by several. Moreover, I learnt a lot about designing a product and polished my visual design skills.

Good design always came from iterations.

As I shown in the process of UI design, there were many iterations on picking the right colors and tested the accessibility of it. I did not know the rules from beginning, but from user insights that enouraged me to study how to present the UI elements. The lesson also applied for the interaction design of the project which I included in Acomp: Designing a product for mental health (currently under development).