MENtality

Preface

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.

Identity

Colours

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:

  1. Friendliness
  2. Warmth
  3. Honesty

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.

Brandmark show casing the colours forming the identity and look-and-feel of the website Brandmark show casing the colours forming the identity and look-and-feel of the website

Typography

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.

Image showcasing how the font family Atomic Age is to be used within the design Image showcasing how the font family Atomic Age is to be used within the design

All primary text will have the typeface "Roboto" ascribed to it.

Image showcasing how the font family Roboto is to be used within the design Image showcasing how the font family Roboto is to be used within the design

All paragraph texts will be set in the "Roboto" typeface.

Image showcasing how the font family Roboto is to be used on paragraphs within the design Image showcasing how the font family Roboto is to be used on paragraphs within the design

Interactive Elements

Call-to-Action

The following buttons are the only styles acceptable for a call to action.

  • Hex Color F45318 shall be exclusively used for the donation call to action buttons.
  • Hex Color #5ABf13 shall be the default for Call Us buttons.
The two variations of call to action buttons that are allowed within the design The two variations of call to action buttons that are allowed within the design

Header Call-to-Action

The design properties of the Call-To-Action button on the header The design properties of the Call-To-Action button on the header

Primary and Secondary Buttons

The following are the acceptable button types for actions within the UI:

The design properties of the primary and secondary buttons on the header The design properties of the primary and secondary buttons on the header

Forms

The following are the acceptable button types for actions within the UI:

The design and CSS properties of the forms and associated type The design and CSS properties of the forms and associated type

Landing Page and Header

Header

The headers and landing page have been designed to react to specific breakpoints as per responsive design norms but in a fashion that allows for the background to respond to the resizing viewport appropriately rather than allowing for empty fill space.

The design of the header along with it's various breaking points The design of the header along with it's various breaking points

Landing Page

The design of the header and landing page along with their various breaking points The design of the header and landing page along with their various breaking points

Banners

The banners are responsive and change to fill the viewport appropriately rather than scaling or filling space with truly responding to their surroundings.

Testimonials will be presented using the Roboto Mono typeface.

The design of the banners along with their various breaking points The design of the banners along with their various breaking points

Footers

The design of the footer along with it's various breaking points The design of the footer along with it's various breaking points
The design of the footers along with their various breaking points The design of the footers along with their various breaking points

Prototype

Laptop Scroll

Mobile Page Scroll

Donation Process

Final Thoughts

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.