UI/UX Design | Brand Design | Illustrations

MSAAW

IMG_0757.JPG
MSAAW (My Story as a Woman) is an NGO that focuses on helping people in situations involving abuse, violence or harassment to find help and support by connecting them with qualified mental health and law professionals and with a supportive community in case they choose to connect with others in similar situations.

Why Redesign?

As a volunteer at MSAAW I was asked to help with rebranding MSAAW, redesign their website and illustrate according to requirements.

MSAAW, as an organisation, has grown and veered towards a more open-handed approach to helping people in difficult situations by having a brand image that is inviting, not intimidating. They wish to set themselves apart from the other NGOs in their field by encouraging their clients to engage openly without worries. With this goal in mind, I went forward to redefine their brand and redesign the UI for their website.

My Goals

  • To create a new brand color palette that conveys the words "welcoming", "inviting" and "safe community".

  • To create illustrations and templates as a part of the Brand Identity that can be used seamlessly across social media.

  • To design a  User Interface for the website to align with the design goals.

  • Propose a seamless engaging experience across social media so that users are comfortable connecting with MSAAW and getting the help they need.

User Research

  • Designing the UI for MSAAW with User Research was not possible since they guarantee the anonymity of their users.

  • To make up for unavailable users I asked friends to go through the site to ask what their experience was.

  • Asking other volunteers and the CEO for inputs on their experience with the website.

  • Going through the websites of other similar organisations to gather information on site architecture and elements.

Website Redesign

  • Update the current sitemap to accommodate changes and add a new "Get Involved" tab.

  • Ensure the information is consolidated into distinct sections to avoid confusion.

  • Clear the navigation into distinct sections and combine wherever possible.

  • Clean and clear design with distinct call to action buttons to ensure any user can read and take action accordingly.

Pain Points

  1. Current website is too wordy with no images to enhance the user experience. The text needs to be broken into readable pieces.

  2. The website is created as pages with no way to navigate to another page except the browser’s back button.

  3. Navigation bar and Footer are present only on the Home page.

  4. There is no link to connect to social media.

  5. Improper segmentation of information leading to confusion.

  6. Home page is engaging whereas the other pages are bland in comparison.

  7. Disclaimer is at the end of the page where it will be missed while reading.​

Design Process

  1. I went through the website and talked to friends who went through the website to determine the possible issues to be addressed( since talking to direct users was not possible due to privacy constraints).

  2. I proceeded to define the pain points that need to be addressed and determined the exact brand image the client wanted to convey to their users.

  3. I created multiple Home page wireframes to determine the most effective format. I proceeded to confirm what resonated most with the client’s goals.

  4. I created a tentative low-fidelity prototype on Figma using the brand colors to allow users to check the flow and help me fix any issues that occurred.

  5. Post this, a design was finalised and handed off to the developer.