National Muslim Youth Association
National Muslim Youth Association
Redesigning a non-profit website to better serve the Muslim youth community
Redesigning a non-profit website to better serve the Muslim youth community
UI/UX Design
Project Management
User Research
Nov 2023 - Present
Overview
Overview
What is the National Muslim Youth Association?
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.
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.
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.
Problem
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.
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
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.
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.
Development
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.
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
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.
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.
Outcome
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.
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.