Constructing PsychoTip’s Visual Branding
In order to make a powerful visual identity for PsychoTip, it’s important to understand what the core values are and what message the product is going to bring. These things will help shape the whole branding and simplify the process. By reading the documents given by the stakeholders and having discussions with them, the overall message of the product was constructed quickly.
With the brand message established, we moved towards designing how the product is going to look. The visual aspects included in a branding, particularly a mobile application’s, vary from one to another. For ours, we included the following:
- Logo and app icon
- Color palette
- Fonts
- Assets
Logo and App Icon
Designing the logo honestly took the most time compared to the others, partly out of the fact that none of us have ever really done it before. The first step that we did was to consider the overall message of the product and do list down the things that can portray them. As we only had a very limited time, we tried to make a narrow list to make it easier when it comes to decide.
In the end, we settled for three different things combined into a single entity, and we think we’ve managed to sufficiently portray the product.
The brain portrays psychology and mental health, which is in line with the product’s vision to improve the psychological well-being of Indonesians and realize a mentally healthy Indonesian society.
Inside the brain contains a fingerprint. This fingerprint represents the product’s first mission, which is to provide an easy to access online consultation service platform with qualified psychologists. The third item in the logo is the question mark, which embodies the product’s second mission to provide knowledge and educate the society about mental health.
As for the app icon, we settled on using the logo of the product in white. The reason behind that is it solidifies the brand awareness. It also makes it easier for the user to recognize the product.
The full logo and app icon can be seen below.
Color Palette
For the color palette, we translated the product’s intended vibe through each colors’ meaning. We initially made four primary-secondary color combinations, which are portrayed below.
Unfortunately, none of them quite fit what the stakeholders had in mind. At that point, we asked which singular colors spoke to them, and we made a couple of combinations out of it.
When we presented the second set of the color combinations, the stakeholders liked both of the combinations and opinions were quite divided. After much deliberation, we settled on the turquoise-green combination.
Turquoise represents emotional balance and a sense of calmness. Green represents renewal, and believed to help alleviate anxiety, depression, and nervousness. Each of the colors have a darker and a lighter shade.
Besides the primary and secondary colors, we also made a monochrome spectrum for texts and standard colors for information. The monochrome spectrum consists of a black, white, and three transitional gray shades, while the standard information colors currently consists of a red for error, green for success, and yellow for warning. The standard black we used for texts technically isn’t pure black, but more of a dark gray. This is due the fact that pure black texts can cause eye strain when reading over an extended period.
The full color palette can be seen below.
Fonts
In deciding the typography, we agreed that we would use sans serif fonts for the application. The reason behind it is because sans serif fonts are the standard for applications. Sans serif fonts are also easier to read at smaller sizes compared to serif.
Regarding font faces, we decided to only use one font, but with different formatting applied (such as boldness, italics, and such) to differentiate the importance of different things. This is done mainly to maintain consistency. Another reason behind it is because it will be easier during development.
After browsing and testing multiple sans serif fonts, we decided to use Muli, which can be seen below.
Assets
For the assets, there are some that we made ourselves, and some prebuilt. The prebuilt ones are acquired from unDraw, as they fit the whole aesthetic of the application and don’t require too many alterations. They are also completely free and can be used without attribution.
We also used rounded buttons and lined forms to create a modern and simple look.
The assets we use can be seen below.
