Harini Ran
UI/UX Designer + 2D Animator
BLOKE SUPPORT
The ‘Bloke Support’ is an initiative that helps BSSG extend its reach to men by making stroke rehabilitation more normal and relatable.
INTRODUCTION
> THE BRIEF
The brief required to create a design strategy to protect, prompt public health and reduce the risk of factors that lead to an increased burden of disease, injury & illness.
> THE RESPONSE
We choose to prompt the Boroondara Stroke Support Group. Through research, we discovered that stroke rehabilitation in Boroondara had less 100 members despite having 3,169 people with the effects of a stroke. And the number of men seeking support after a stroke were far less than women. The goal of our initiative is to increase awareness but help BSSG extend its reach towards men through the use of videos with inclusive language that included a sense of humour.
> THE SITEMAP
Within the sitemap, the layout is very simple and straight forward. Man stories are for there for users who want to know if others have they gone through the same. Man FAQs will you give you answers to questions other men have already asked before you. And Man Support will help you find help.
WIREFRAMES
These prototypes were built in using illustrator with a screen resolution of 1920 x 1080p (HD). Once these prototypes were built, they tested among several peers, rather than users of the targeted audience.
USER TESTING
> ALTERATIONS
Zooming in on each wireframe and through user-testing, I have shared the feedback that was given by users to further improve on the application.
Boroondara Stroke Support Group
Suggestion: Instead of having this page, include a page for man support instead
Link Page To Bloke Support
Suggestion: It would be better if it was a singular page layout rather than separate pages.
Homepage
Suggestion: Since the video isn’t autoplay, have some text as an overlay to welcome users and have it disappear when the video is played.
About Us
Problem: Use grids in text, add some statistics!
Solution: Divide the information into four columns, one of the columns containing a newsletter and the other containing another carousel scroll with statistics
Man Stories
Problem: Overcrowded with information, the images are too enlarged and no use of grid structure.
Solution: Use the logo’s icon to create a clipping mask on the image. Box the information to portray a clean and concise look.
Man FAQs
Problem: Placement of text and newsletter
Solution: Place the information in a carousel scroll, but as a double-side flip card (one side having the question and the other side having the answer)
DESIGNS
The final designs were built using skeleton framework, HTML, CSS and a little of JavaScript. The screen resolution here is HD, 1080.
