National Muslim Youth Association

Redesigning a non-profit website to better serve the Muslim youth community

UI/UX Design Project Management User Research
Nov 2023 - Present

Overview

What is the National Muslim Youth Association?

The National Muslim Youth Association is a non-profit organization. Their National Youth departments are tasked with creating content/ materials for the teachings of Islam, religious prayers, spiritual and physical wellness, financial, and guidance. Their website is host to all of these materials and information and is regularly visited by every youth nationally.

I was appointed their website departments position to maintain the website and to regularly upload content or announcement updates that happen regularly throughout the year (Programs, Events, Contests, etc.). I had proposed a design overhaul of the current website and potentially migrating over to a new platform to host and redesign the website on. After a month of collecting resources, I presented my plan and it was accepted by the organization figures. Below I breakdown the process and steps I took to redesign the National Muslim Youth Association website.

Old National Muslim Youth Website UI

Old National Muslim Youth Website UI

Problem

The National Muslim Youth Association's wordpress website became cluttered and hard to navigate due to yearly content updates. Parents and youth had trouble finding materials. After joining the organization, I faced internal struggles, including significant malware issues. My main challenges were resolving the malware problems and redesigning the website.

Wireframe

As the problems on the website were assessed, I began working on wireframe for the new website. I went through a process of researching and figuring out how to solve major pain points the users were facing the most with the website.

NMYA Homepage Wireframe NMYA Style Guide
Atfal Logo Color On Dark Atfal Logo Color Atfal Logo Grey

Wireframe of New National Muslim Youth Website UI

Development

Once the board approved the final wireframes, I began developing the site on Webflow. I started by incorporating the organization's logo colors and assets. I also introduced additional colors to enhance the interface design and add uniqueness to the youth website. During development, I prioritized accessibility, as most users access the site on various screen sizes, particularly mobile devices and tablets. Additionally, I considered users from diverse backgrounds and age groups.

User Research

As I worked on developing the new Youth Website, I conducted user research groups. I collaborated with small focus groups, providing them with an early prototype of the website. This approach helped me understand how users navigated and interacted with the site. I also observed their usage of the old national youth website and compared their navigation with that of the prototype.

User Research Chart

User Research New National Muslim Youth Website

Outcome

The final version of the new National Muslim Youth Association website launched in June 2024. After a few months of use, traffic increased by 30% as users became familiar with the site. The number of youth visitors rose due to the interactive sections on various pages. Parents and teachers found it much easier to navigate the website. I continue to manage, enhance, and maintain it.