Hi there!

This is a developing and ongoing project/case study, and will be updated more extensively when significant progress has been made. Please bear in mind that for now, only parts of my process are shown. If you'd like an update about this project and where it's at, please feel free to contact me.

The Problem

Creating a website and maintaining it is hard work--especially for local non-profit organizations such as mosques, that may be mainly supported by community contributions. Once a website is developed, it often becomes difficult to maintain the site or update it with ease. For this reason, it is common for mosques to either 1) not have a website at all, or 2) have a very outdated, unorganized site that they are not happy with.

About the Product: Musalleen CMS

This is where Musalleen CMS comes in--our very own content management system that aims to facilitate the process of developing and maintaining a mosque website. Musalleen CMS allows users to use a pre-built library of specific widgets catered to their unique needs in order to quickly and easily create their own custom site.

My role

I, along with another UX Designer, were the team behind the ongoing UX Research and UI Design of Musalleen CMS. I was involved in:

• User research & Analysis
• User Personas
• MVP definition
• User Stories
• Use Cases
• User Surveys
• User Interviews
• Information Architecture
• Sketches
• Wireframes
• UI Design & Prototyping
• Usability Testing

Client: Musalleen Inc.

Secondary Research

The first step was understanding the domain we want to make an impact in. This involves doing some background research about the industry, any competitors, the target audience, and their needs and goals.

How was this done?
• Conversations with stakeholders to understand their previous knowledge of the target audience and their frustrations.
• Competitor analysis, to understand our direct market and how needs are currently being met.
• Digging around the internet to better understand who our target audience is and what their needs are.

Conclusions:
• Conversations with our stakeholders revealed that they had conducted research previously that allowed them to understand that there is a need and interest for this product. Through our stakeholders, I was able to better understand the industry, potential clients, frustrations and needs that they have, and the stakeholder’s ideas of how our product can benefit them. This information was useful, but I would then go further to validate it through my own primary research.

• There are no direct competitors to our product, meaning there is no CMS that is specifically meant for building a mosque website. However, there proved to be many indirect competitots in terms of general website builders or CMS’s such as Wix, Squarespace, and many more. Extensive research was also done by using competitor website builders, observing best practices, common patterns and points of frustration.

• Our target audience, or target clients, are mosques that are based in the US. Extensive research was conducted by taking a look at over 30 websites of mosques that fit our target audience. I created a spreadsheet in which I noted common themes, patterns, and occurences amongst these sites to understand what a mosque website commonly entails.

Primary Research

User Surveys

User Surveys were created to gain insight into the current processes mosques were using to build and maintain their site, how happy they were with it, as well as which problems and frustrations they face. Surveys were passed on to a group of 8 individuals who are a part of management at different mosques. Their responses helped us validate some assumptions we had made through secondary research, being:

• Mosque websites are usually built by a volunteer or outsourced developer.
• Maintaining the site is often a hassle, as usually there is no one person who is fully and solely dedicated to the maintainence of the site, rather it is done by a volunteer.
• Updating the site often requires contacting the developer, waiting til they are available, and having to direct and micromanage how they want the website updated. Something as small as updating an upcoming event becomes much longer and harder of a process than it should be.
• users valued the ability to be able to quickly and efficiently make updates to their site themselves, and without needing much technical knowledge. The idea of a website builder was well-received.

User Personas

User Stories

I wrote out as many user story/use case scenerios I could think of in order to help me think of the main features and flows the user would need to go through and what they might want to accomplish.

Information Architecture

Site Map

In order to better visualize and understand the content and structure of the site, a site map was created for the website builder.

Sketches

Now that I had a better understanding of the content of the site, I went ahead and sketched out any rough ideas I had for the website builder.

Wireframes

After getting feedback on sketches and going through many iterations, I was able to proceed to creating low-fidelity wireframes. These were also iterated on many times after feedback from the team and stakeholders.

Hi-Fi Mockups & Prototypes

Wireframes were then converted into Hi-fi mockups and prototypes using Figma. We are currently still in the iterative phase.

Usability Testing

Due to time constraints, we were unable to conduct usability testing as early as we would have liked. However, we look forward to implementing that into the process and validating our designs next. Usability testing will be conducted on the product to better understand any pain points the user may have, and to iterate on them accordingly.