IABA App
As a freelancer, I worked on designing an App from start to finish for my local mosque, Islamic Ahlul Bayt Association (IABA). They were looking to create an App for their community where members would be able to stay up to date on events and information that pertains to the mosque.
​
Problem: The IABA mosque currently emails its community members about events, important information about the mosque and other members, Saturday school, etc. Although this has worked in the past, emails have started to flood members' inboxes due to the increase of community members joining and various new programs and events taking place to suit each age group. There was a need for a more efficient way for IABA to update the community on all plans and events happening.
​
Solution: The solution I came up with for this problem was to design a fully functioning IABA App, which has been a floating idea for years but never implemented. The design allows community members to stay up to date on events, listen to lectures online, RSVP for programs (this helps volunteers know how many people to expect to show up and plan accordingly), as well as easily donate to charities and the new building through the app.
Below is a short summary of my process and the final, high fidelity, prototype I created:
The Process:
Step 1:
Research & Wireframing
Step 3:
High Fidelity Usability Testing
Step 2:
Wireframe Concept Testing
Step 4:
Final Prototype
Step 1: Research & Wireframing
For the first part of my research, I sent out a survey with questions to the community of IABA in order to inquire whether or not there is a need for the App, what problems can this application solve, and some general suggestions they might have. I got 50 responses from community members of various age groups and genders. With that information in mind, I was then able to sketch out low fidelity wire frames of how the app pages would look like.
Here are some of the pages:
Step 2: Wireframe Concept Testing
After designing these wireframes, I tested them out with community members by asking them to complete several tasks including checking next week's events, contacting IABA, and returning back to the home page.
​
The design was very simple, and the tasks were completed successfully by the group. However, some community members did bring up important questions along the way. Here were some suggestions and responses I got:
-
Change section/page titles to help community members, who english isn't their first language, understand the pages better.
-
Cut out information on the home page because it seems redundant rather than helpful to get to other pages.
-
Add some specific Religious event pages based on the time of year.
Step 3: High Fidelity Usability Testing
Next, I began designing the high fidelity wireframes. While working on the designs, I decided to try out a bottom navigation bar for the app and see if that will be of any use to get to important pages on the app quicker and easier. I then created my high fidelity prototype and usability tested two versions of it, one using my original app with the hamburger menu, and the alternative one with the bottom navigation menu.
Hamburger Menu
Bottom Nav
The results of this usability testing showed that including a bottom navigation in addition to a hamburger menu added more confusion to the user since they did not understand what the icons meant. I also noticed that the icons on the bottom navigation were unnecessary since everyone knows the hamburger menu concept, and therefore used it to get to the pages indicated by the icons rather than merely clicking the icons. Thus, I decided to move forward with the original menu I had planned and discard the bottom navigation idea.
Step 4: Final Prototype
Below are images and explanations of the final screens I designed for the app.
A clickable App prototype can be accessed below:
​
*Please note that not all buttons are clickable due to some information confidentiality.
App Brand Colors
The color palette I chose to use for this app is indicative of the mood that community members feel once they come to IABA. The mosque itself is a welcoming place which brings comfort and happiness to those who enter it, which is what the bright colors represent.
The darker colors nicely balance out the brighter ones and make the design of the app look more professional and modern.
#141414
#FCFCFC
#E4D5BC
#E39F31
#707070
Important Pages/Features
There are many important features that I included into this app that will make the community and volunteers' jobs easier. One problem IABA faces is planning for events and programs especially when it comes to not knowing the definite amount of people who will be attending. Seating, food, and volunteer numbers on a specific day all require knowledge of the number of attendees of a specific event, thus I incorporated a RSVP function into the App which is simple to use and helpful for the volunteers.
RSVP'ing for events
The Events and Programs page can be accessed from the menu and lists all the events of the week
Users have the option to RSVP and the App will show the status of each event, whether they have successfully RSVP'ed or an event got cancelled.
Users can click on a specific day and view a more detailed description of each event
In addition to that, IABA accepts donations of many forms but it can be a tough task to sort through all the money and make sure each community members' pledge is paid on time. Thus, the app also includes a donation section with various forms of payment which ensures money is sent on time and securely.
​
One last feature I would like to point out is the Lecture Page which will be linked to the IABA youtube channel and showcase live lectures online for those who couldn't attend as well as past lectures. This makes it easier for people to go on the app and view everything revolving around IABA instead of needing to visit multiple sites for different types of needs.
Donating directly through the App
Lecture Videos Page
Additional Pages Preview
You can take a look at all App pages using the clickable prototype link below:
​
Next Steps:
The IABA App is currently in development mode. Whenever the app is live, there will be room to continuously update my design. In addition to that, some design changes can be implemented and some pages can be added during special Islamic months to enhance the functionality of the app.