Masjid Istiqlal Houston Kiosk Design
Masjid Istiqlal Houston Kiosk Design
In collaboration with the Indonesian American Muslim Community (IAMC), I designed a mobile donation app for Masjid Istiqlal Houston to help streamline donations and improve community engagement. The app allows users to donate easily and stay informed about nearby events and mosque updates.
In collaboration with the Indonesian American Muslim Community (IAMC), I designed a mobile donation app for Masjid Istiqlal Houston to help streamline donations and improve community engagement. The app allows users to donate easily and stay informed about nearby events and mosque updates.
Client
The Indonesian American Muslim Community (IAMC)
industry
Software as a service (SAAS)
role
UI/UX Designer
tools
Adobe XD, Skype, Pencil, Paper
duration
2 weeks
Year
2019
current situation
About the client
Istiqlal Houston Mosque was established in July 2015 in Houston, Texas by The Indonesian American Muslim Community (IAMC). IAMC has a mission to provide a safe environment for Indonesian Muslims, as well as others within the broader American society, to strengthen their Islamic belief. Long story short, a fundraising app for Masjid Istiqlal Houston donation has been built on Android and iOS to make it easier to donate to the mosque and see the nearest event or news at the Istiqlal mosque.
About the project
Someone from IAMC contacted me to help him solve the problem with donations at Masjid Istiqlal Houston. This project was done by me and my partner. I was the UI and UX Designer and my partner was the Developer. Discussions about the project are carried out once a week via Skype due to time and distance differences.
About the client
Istiqlal Houston Mosque was established in July 2015 in Houston, Texas by The Indonesian American Muslim Community (IAMC). IAMC has a mission to provide a safe environment for Indonesian Muslims, as well as others within the broader American society, to strengthen their Islamic belief. Long story short, a fundraising app for Masjid Istiqlal Houston donation has been built on Android and iOS to make it easier to donate to the mosque and see the nearest event or news at the Istiqlal mosque.
About the project
Someone from IAMC contacted me to help him solve the problem with donations at Masjid Istiqlal Houston. This project was done by me and my partner. I was the UI and UX Designer and my partner was the Developer. Discussions about the project are carried out once a week via Skype due to time and distance differences.
the challenge
The client wants to design a Kiosk for Masjid Istiqlal Houston to help the donation process. The challenge was that the Jemaah, people who pray in Masjid (i will call them users in this case study), often forgets to bring cash and most old Jemaah are lack experience in using technology while the existing donation process is through Android and iOS apps. Wouldn’t it be better to issue that Jemaah can do a donation when they are in the mosque easily without using cash?
The client wants to design a Kiosk for Masjid Istiqlal Houston to help the donation process. The challenge was that the Jemaah, people who pray in Masjid (i will call them users in this case study), often forgets to bring cash and most old Jemaah are lack experience in using technology while the existing donation process is through Android and iOS apps. Wouldn’t it be better to issue that Jemaah can do a donation when they are in the mosque easily without using cash?
DESIGN PROCESS
empathise
In this project, I used the Design Thinking framework to solve the problem. The Design Thinking model was proposed by the Hasso-Plattner Institute of Design at Stanford (d.school). d.school is the leading university when it comes to teaching Design Thinking. Design Thinking has 5 stages, according to d.school (Figure 1.), namely empathise, define, ideation, prototype, and test. The design thinking stage that I did was up to the prototyping stage, the testing stage was carried out by the client and his team in Houston, Texas.
The first stage of the Design Thinking process is Empathise. This stage aims to show empathy to the people we are trying to design for. At this stage, I do research and data collection from the user to understand them better. Unfortunately, due to geographic issues, I cannot do the research directly. Therefore, my client and I collaborate to research to find experiences, motivations, and pain points/barriers of the donation process in Masjid Istiqlal Houston.
Within a week, the clients do observation in Masjid Istiqlal Houston. The observation results showed that the young Jemaah (18–28 years old) did not find it difficult to donate to the mosque but most of the old Jemaah / user (over 30 years old) are confused when they want to donate to the mosque, 3 points became their main confusion:
They did not find the box donation at the mosque (which is no longer provided)
They did not bring cash money
Most of them are not tech-savvy. They find it difficult to use Masjid Istiqlal Houston apps to donate
In this project, I used the Design Thinking framework to solve the problem. The Design Thinking model was proposed by the Hasso-Plattner Institute of Design at Stanford (d.school). d.school is the leading university when it comes to teaching Design Thinking. Design Thinking has 5 stages, according to d.school (Figure 1.), namely empathise, define, ideation, prototype, and test. The design thinking stage that I did was up to the prototyping stage, the testing stage was carried out by the client and his team in Houston, Texas.
The first stage of the Design Thinking process is Empathise. This stage aims to show empathy to the people we are trying to design for. At this stage, I do research and data collection from the user to understand them better. Unfortunately, due to geographic issues, I cannot do the research directly. Therefore, my client and I collaborate to research to find experiences, motivations, and pain points/barriers of the donation process in Masjid Istiqlal Houston.
Within a week, the clients do observation in Masjid Istiqlal Houston. The observation results showed that the young Jemaah (18–28 years old) did not find it difficult to donate to the mosque but most of the old Jemaah / user (over 30 years old) are confused when they want to donate to the mosque, 3 points became their main confusion:
They did not find the box donation at the mosque (which is no longer provided)
They did not bring cash money
Most of them are not tech-savvy. They find it difficult to use Masjid Istiqlal Houston apps to donate
define
At this stage, I put together the information from the Empathise stage and created a persona for a deep understanding of the needs and behaviors of our users. The Persona can be seen in Figure below. He is the best fit representative based on data observation.
From the research and insights we have, we prioritize the main problem and decided to focus on two problems:
They did not bring cash money
Most of them are not tech-savvy, so they find it difficult to use Masjid Istiqlal Houston apps to donate
The idea to solve the problems is to build a Kiosk that allows Jemaah to donate one time or recurring time (schedule the donation) where they can customize the donation date and time without worry that they did not bring cash when they are in the mosque or the complex donation process during the app use.
At this stage, I put together the information from the Empathise stage and created a persona for a deep understanding of the needs and behaviors of our users. The Persona can be seen in Figure below. He is the best fit representative based on data observation.
From the research and insights we have, we prioritize the main problem and decided to focus on two problems:
They did not bring cash money
Most of them are not tech-savvy, so they find it difficult to use Masjid Istiqlal Houston apps to donate
The idea to solve the problems is to build a Kiosk that allows Jemaah to donate one time or recurring time (schedule the donation) where they can customize the donation date and time without worry that they did not bring cash when they are in the mosque or the complex donation process during the app use.
ideate
There are two main features implemented on the Kiosk:
User can choose a donation category
User can custom time and date for a recurring donation
User Flow
Before jumping into screen design, I created a User Flow to help me visualize the processes users need to go through when they use the Kiosk.
Wireframe
The wireframe is like a blueprint for a house so I do not want to skip this part. In this process, I create a wireframe to see how the screens and layout look before transforming it into a high-fidelity prototype.
The discussion with the client is carried out after the wireframe is finished. Long story short, the client wants to add the Iqamah timing and news features to make it easier for users to find news about the Istiqlal mosque. Then I update the wireframe based on client feedback. See full wireframe
There are two main features implemented on the Kiosk:
User can choose a donation category
User can custom time and date for a recurring donation
User Flow
Before jumping into screen design, I created a User Flow to help me visualize the processes users need to go through when they use the Kiosk.
Wireframe
The wireframe is like a blueprint for a house so I do not want to skip this part. In this process, I create a wireframe to see how the screens and layout look before transforming it into a high-fidelity prototype.
The discussion with the client is carried out after the wireframe is finished. Long story short, the client wants to add the Iqamah timing and news features to make it easier for users to find news about the Istiqlal mosque. Then I update the wireframe based on client feedback. See full wireframe
design
After that, I moved on to the design stage. For the prototype, I followed the existing visual theme used in the iOS and Android applications, which primarily featured the color green. In the psychology of color, green means calming and symbolizes healing. See full design
After that, I moved on to the design stage. For the prototype, I followed the existing visual theme used in the iOS and Android applications, which primarily featured the color green. In the psychology of color, green means calming and symbolizes healing. See full design
takeaway
Due to time constraints and agreement with the client, I did not do the testing stage of my ideation. Even though I did not do the test, these are some considered improvements that can be done:
Conducting user testings to validate the prototype and identify issues
Explore multiple payment methods for user
Improve the design based on user feedback
Due to time constraints and agreement with the client, I did not do the testing stage of my ideation. Even though I did not do the test, these are some considered improvements that can be done:
Conducting user testings to validate the prototype and identify issues
Explore multiple payment methods for user
Improve the design based on user feedback