Defining the Challenge
The goal for this project was to redesign the website for Mental Help, an NGO dedicated to mental health that has recently rebranded.
The founder of the NGO and the Brand Designer, along with the Developer were the main stakeholders I have collaborated with.
The challenge for this project was to keep the fine balance between the identity already well established by the NGO and the branding redesign.
My objectives for this project were:
-understanding the message of the NGO,
-immersing the new website into the new brand identity
-creating an interface that combines familiarity with the new branding
Research
Mood Board
For the mood board, I handpicked photos that were related to the NGO’s activities, I added the new color branding and the visuals to create a full picture of what “Mental Help” would look and feel like.
Previous site
After analyzing the previous website, I concluded that the message had 3 focus points: a good description of the organization and its values, call-to-action buttons with the purpose of gathering new volunteers and donation information, given the fact that as an NGO they run exclusively on donations.
Therefore, to keep alligned with the organization's objectives, I have built the design keeping in mind the 3 focus points.
Style Guide, Typography and Color Palletes
In order to get accustomed to the new brand identity, I have received the Style Guide composed by the Brand Redesigner.
Sitemaps
Along with the Style Guide, I have received from the Brand Designer the notes containing the founder’s views on the new website structure.
After carefully analyzing them, I have composed along with the Brand Designer and NGO founder a few iterations of the sitemap of the new website.
The final iteration contained a new page dedicated to project reports that would help the organization obtain new funding from donators, as well as call-to-action buttons that would eventually send the visitors of the site to the main focus points: enrolling as a volunteer or personal donations.
Lastly, the About Us Page had a whole section dedicated to the values and a new section dedicated to the presentation of the team.
New Page Prototype
Before starting the work on the high-fidelity wireframes,, I created a mockup of the About Us page, in order to get feedback on my alignment with the brand identity, message and the previously discussed sitemap.
Delivery
Sketches
After establishing the sitemaps, I have created sketches dedicated to each page that helped me eventually elaborate the vision of the Design.
Components
While designing, I have created a component library to ensure consistency and make future updates easier.
Exploring Page Layouts
The elements upon which the site was built came from the final version of the About us page. A few key elements taken into consideration for the structure of the website were:
-repeating visuals: the curved yellow arrow, the overlapping frames, round edges and smart animate transitions that created an overall friendly impression
-general left alignment for an easy reading
-the pairing alternations between the 3 main colors helped create hierarchy
Results
Final Iteration: Homepage, About Us, Projects, Reports, Donations, Contact
The final result contained a fresh new look that embodied the message of the NGO, constructed with the visual elements obtained from the rebranding and an overall friendly feeling that invites you to be part of the team.
