IU MSA Club

A WordPress website designed to inform, engage, and support a growing student community

Role

Web Designer

Industry

Non-Profit Organization

Project Overview

The Muslim Student Association (MSA) is a student organization dedicated to building community, educating others about Islam, and organizing events for Muslim students on campus.

I was tasked with designing and building a website that would:

Clearly explain what MSA is and what it stands for
Keep students informed about upcoming events
Provide a transparent and trustworthy way for people to donate
Establish MSA as a professional, official presence on campus

The final result is a centralized digital home that supports growth, engagement, and long-term sustainability for the organization.

The Problem

Before this project, MSA did not have a clear, structured website that students could rely on for information. Key challenges included:

No single place for students to learn about the organization
Events information scattered across platforms
Lack of a dedicated donation system to support future programming
No transparency around how funds were used
An online presence that did not reflect the organization’s professionalism or impact

For new or interested students, this created friction and uncertainty. For the organization, it limited visibility, trust, and growth.

Goals & Design Intent

My goal was to design a website that felt:

Welcoming to students of all backgrounds
Clear and informative, not overwhelming
Trustworthy, especially around donations and budgeting
Easy to maintain for future MSA leadership

From a design standpoint, I focused on clarity, hierarchy, and accessibility over unnecessary visual complexity.

Project Overview

The Muslim Student Association (MSA) is a student organization dedicated to building community, educating others about Islam, and organizing events for Muslim students on campus.

I was tasked with designing and building a website that would:

Clearly explain what MSA is and what it stands for
Keep students informed about upcoming events
Provide a transparent and trustworthy way for people to donate
Establish MSA as a professional, official presence on campus

The final result is a centralized digital home that supports growth, engagement, and long-term sustainability for the organization.

The Problem

Before this project, MSA did not have a clear, structured website that students could rely on for information. Key challenges included:

No single place for students to learn about the organization
Events information scattered across platforms
Lack of a dedicated donation system to support future programming
No transparency around how funds were used
An online presence that did not reflect the organization’s professionalism or impact

For new or interested students, this created friction and uncertainty. For the organization, it limited visibility, trust, and growth.

Goals & Design Intent

My goal was to design a website that felt:

Welcoming to students of all backgrounds
Clear and informative, not overwhelming
Trustworthy, especially around donations and budgeting
Easy to maintain for future MSA leadership

From a design standpoint, I focused on clarity, hierarchy, and accessibility over unnecessary visual complexity.

Research & Discovery

To ground my decisions, I researched websites from:

Other student organizations on campus
University-affiliated clubs and nonprofits
Similar cultural and faith-based organizations

From this research, I identified consistent patterns:

Simple navigation with clearly labeled pages
Strong hero sections that immediately explain purpose
Separate pages for events, donations, and organizational transparency
Clean layouts that prioritize content over decoration

These insights informed both the information architecture and the page structure of the site.

Wireframing & Structure

Before moving into development, I created low-fidelity wireframes in Figma to map out:

Page hierarchy and navigation flow
Content sections for each page
Clear calls to action (Learn More, Donate, View Events)

This step allowed me to focus on user flow and clarity before visual styling. It also made it easier to validate decisions early and ensure the site served real student needs.

Design & Development

I built the final website using WordPress, focusing on flexibility and long-term usability.

Key Pages & Decisions

Home Page
Introduces MSA’s mission immediately, highlights community imagery, and directs users toward learning more, viewing events, or donating.
About Page
Provides deeper context about the organization’s purpose, values, and role on campus, helping build trust and understanding.
Events Page
Acts as a central hub for upcoming events, making it easy for students to stay involved.
Donations Page
Designed with clarity and simplicity to reduce friction and encourage support.
Budget Page
Added intentionally to promote transparency and accountability, reinforcing trust with donors and members.

Throughout the site, I prioritized:

Readable typography
Clear spacing and layout hierarchy
Consistent visual language across pages
A balance between professionalism and warmth

The Outcome

The finished website gave MSA:

A clear, official digital presence on campus
A centralized place for students to learn, engage, and stay informed
A functional and transparent donation system
A scalable foundation future student leaders can build upon

Most importantly, the site now supports the organization’s mission beyond in-person events, helping MSA grow its reach and impact.

Reflection

This project reinforced my approach to design as problem-solving through clarity and intention. Rather than focusing on visuals alone, I prioritized understanding user needs, organizational goals, and long-term sustainability.

For me, this was not just about building a website. It was about creating a tool that empowers a community and helps an organization thrive.

Design & Development

I built the final website using WordPress, focusing on flexibility and long-term usability.

Key Pages & Decisions

Home Page
Introduces MSA’s mission immediately, highlights community imagery, and directs users toward learning more, viewing events, or donating.
About Page
Provides deeper context about the organization’s purpose, values, and role on campus, helping build trust and understanding.
Events Page
Acts as a central hub for upcoming events, making it easy for students to stay involved.
Donations Page
Designed with clarity and simplicity to reduce friction and encourage support.
Budget Page
Added intentionally to promote transparency and accountability, reinforcing trust with donors and members.

Throughout the site, I prioritized: