Islamic Forum of Canada

Ongoing Volunteer Mosque Project. Role: UX/UI and Lead Web Developer


Being the central hub for the community’s members to get information online, there are many objectives that this redesign needs to fulfill. As an outsider to the Islamic community, this was a great challenge that helped me refine my UCD skills.

  1. Be great to look at, and extremely easy to use due to the wide demographic of users.
  2. Automate or simplify as many tasks as possible to free up the managing team’s time. Things such as donations, creating events, special function requests (marriage for example)
  3. Gather donations
  4. Let members quickly check the current daily prayer times.
  5. Sell members on their school programs
  6. Present Islam in a non-daunting way to Canadian-Muslims and be an informational resource for the Mosque.


After many discussions with the main stakeholder, I started with a very simple wireframe, contrary to normal procedure. As I wasn’t able to have direct interaction with the interviewees, I decided that a visual aide would be crucial to gain actual feedback.

Initial Wireframe

Afterwards I created questions about the wireframe and also in general about the new website.


  1. What is the first thing you want people to see when they visit your website, beyond the navigation menu?
  2. How much would you like to promote donating? It is currently a tab in the navigation menu with a separate box highlighting it.
  3. There is an opportunity to have blog posts more prominent on your website. How often do you post blogs and what are they currently used for? How could blogs be otherwise utilized?
  4. What other kinds of content do you find yourself uploading a lot of? Things such as testimonials, videos, livestreams, events, members of community, gallery of pictures etc. How would you like that content to be organized and presented?
  5. Would you like e-mail forms present on the website?
  6. View the alpha wireframe. Are you satisfied with the positioning of the blocks? This is the alpha version, and we randomly placed them wherever. If you prefer a different topography, please detail it below (i.e. do you want the blogs to appear above the events? Do you want the blogs to appear in a different style, such as one highlighted blog previewed, with a link to all other blogs? Are you satisfied with where the map appears? Do you even want a map on the front page? Etc)


  1. In the wireframe, “Lorem Ipsum...” is placeholder text. What are the first words that you want users to see when they first look at your website? If we were to include a slider here, what would you want to appear?
  2. The 7 current tabs are placeholders. What would you suggest are the tabs we should include here?
  3. What is the type of wording/visual presentation you would like to use around donations? How would you like the user to interact with this?
  4. What do you think a user visiting your current website would be doing, other than finding out contact/location information? What do you want them to be doing with this new website?

Look and Feel

  1. We have been shown the 10 minute promotional video, and we were told that the website would want to capture a similar theme that was presented throughout. In your own words (and to help us understand) what exactly is that theme? What does the “Forum Family” mean to you, and how do we go about capturing that?
  2. We have been told to capture a mature and intellectual ascetic. In your own words, describe what that means to you. What are some guiding tips that we can follow throughout the project to help us stay on track?

This extensive list of questions was sent out to the 7 volunteers and were answered thoroughly. I was able to extract the main priorities of the mosque and it’s community.

End Result

This is still an on-going project!

Questions? I may have answers!

If you'd like to find out more about my process, please get in touch.