Mentality is a website UI/UX case study brief that aims to establish an online platform that would encourage men to be brave and to speak up about their mental health. To encourage a dialogue the design needed to convey a sense of friendliness, warmth, and honesty.
This project was a blank slate. I had complete control and direction over the sitemap, look and feel, and how the website itself would function. The logo hadn't been designed either, meaning the typefaces themselves couldn't use an existing base to pair with. The first step in the process was to take down the three important keywords that guided this project's development:
I went with a colour triad that would best create a subtle, but direct means of communicating the feelings and emotions the key guiding concepts were trying to transmit. The colours chosen formed a triad of Blue, Green, and Orange.
The colour choices balanced each other out. Blue creates trust and reflection and takes away the immaturity of the orange. Green adds reassurance to blue's trust and negates the feelings of deprivation inspired by the orange. The orange adds warmth to the coldness of blue, and fun to the blandness of green.
Looking back, I've also unintentionally created the typical colours of the Earth, and that of children's drawings: orange/yellow for the sun, blue for the water, and green for the grass.
Now we need to figure out how to convey our message and in what tone. You don't want to come off too serious otherwise you'll chase users away, but you also don't want to be too light-hearted that users might think you're making light of their situation.
To create a balance, I went with a retro feel to recollect the ideals of gaming. Many men blow stress through video games. Anyone who's played a videogame knows that they can be serious business, but remain enjoyable. You'll still feel some very real emotions but they're easier to come to terms with and accept. I wanted to evoke that sense of ease that videogames managed to create.
Any text that is used as an accent, or overlayed over an image will have the font family "Atomic Age" ascribed to it.
The following buttons are the only styles acceptable for a call to action.
F45318shall be exclusively used for the donation call to action buttons.
#5ABf13shall be the default for Call Us buttons.
The lessons (re)learnt here is the importance of aesthetics on approachability. There's a fine line between being light and being serious. If the design is too serious, the target audience will hesitate to participate, and if it were too comical then they might feel they are not being taken seriously.
Looking back I'm quite happy with the look and feel. If I were to give this project more time then I would either introduce a more robust site architecture or even launch this project as my endeavour.