The National Muslim Youth Association is a Youth Boys Organization. Their National Muslim 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.

The National Muslim Youth Association guides youth to stay connected with their faith and community. They produce educational materials for boys, including presentation slides, magazines, and competitions, which are regularly posted on their website according to each department's schedule.

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, I faced internal struggles, including significant malware issues. My main challenges were resolving the malware problem and redesigning the website.

In my initial departmental meeting, I presented a website redesign plan for the Youth website, proposing a migration from WordPress to Webflow. The meeting focused on explaining the platform rather than obtaining project approval. We also considered adding a website security team, as the organization lacked one despite most materials being online. Additionally, I suggested compiling all essential information like domain and accounts, which had been inconsistently managed.

Understanding the information hierarchy was crucial for the website redesign, determining which materials should appear first and building the structure accordingly. I began with wireframe sketches to explore ideas and possible layouts. A key missing feature was a section for updates, events, and messages, so I decided to add a slider in the hero section to display this information prominently.

For the website's fonts, I chose easily readable options suitable for an information-heavy site, along with fixed image sizes to maintain a consistent layout. To refine the redesign, I referenced well-designed websites. Once the wireframes were progressing, I focused on branding and colors, researching hues that would appeal to the target age range and encourage interaction with the content.