Digitization Mosques with Custom Mobile Apps Software in Arkatama, Software House Malang
Hi, Medium People 👋🏻… So, in this article we want to share the design process of the Sajada App. This project is a collaboration between the Arkatama, Software House in Malang and the Mosque Takmir Institute, one of the largest religious organizations in Indonesia, for regional branches.
📑 Project Overview
Sajada is an application used to digitize mosques, especially mosques in the city of Malang. Mosque Takmir Institute launched their application to help digitalize the mosque administration system. This application is also a form of support for recording mosque data which is important for the general public today.
This project is one of the strategic steps carried out by The Takmir Mosque Institute is one of the largest religious organizations in Indonesia for regional branches in order to follow up on the Technical Guidance on Mosque Digitalization in Malang City which was organized by the Malang City Government in collaboration with the Indonesian Mosque Council (DMI ) Malang city.
✒️ Design Thinking Framework
In this project, we use design thinking framework to help us solving the problem in creative way. Here are the 5 main processes of design thinking :
👋🏻 Phase 1 — Start with Empathy
This phase helps us to understand the user or people who we are designing for. We are not our user, so that we need to have empathy to what actually the challenges, the difficulties, the problems they face. At this phase, we will do 2 main things including planning the research and conducting the research.
In planning the research, we carried out activities in the form of :
a. Defining the Objectives : The objectives of this research is to understand user needs to digitize mosque information and the mosque administration system through one application.
b. Defining the Research Goal: We break the objective down into research goal points to make the objective measurable and to simplify the research question we are going to use in the interview session. And here are the research goals:
- Demography of target user
- How users find information about the nearest mosque in their location
- Expectations for the Sajada application to help the process of digitizing mosques
c. Defining the Methodology: In doing this research, me and my team used mixed-method which combining unstructured interview and needs research based on stakeholder requests. Unstructured interview allows us to ask an open-ended question and also to ask follow up question in order to get deeper information from participants yet stay aligned with the research objective.The participants involved in this research whose criteria, as follows:
- A Muslim aged 18–60 years
- Female or Male
- Familiar with smartphones
d. Making the Timeline: It took 10 weeks for us to conduct the research starting from making research plan to doing the designs. In the following you can see the detailed timeline of each activity we’ve done.
In conducting the research, we interviewed each participant in person by asking questions that we had created. This research involved 10 participants that took less than 10 minutes for each participant. The questions in question include:
📄 Phase 2 — Define : Reframe the problem or challenge at hand.
In this phase, we turning the data findings into insights that can help us in generating ideas or finding the opportunities to solve the problems. We will build that insights into user persona, user journey map, and affinity diagram.
a. User Persona: To understand users better, I created User Persona which help keep the user in mind throughout the design process, and define problems that need to be solved. In this below we create user personas that represent participants in this project.
b. User Jorney: We visualize how the user journeys through each step to achieve a specific goal. Below there are 5 main steps that users must go through. At each step, we analyze the data and convert it into specific segments including thingking, doing, touch point, feelings and pain points. From these segments, we determine the right opportunities for improvement and answer problems.
- Steps: specific designed stages of interaction or time periods, which describe the time span of user and product interaction from start to finish.
- Thinking: the stage in the user journey where the user begins to form an understanding, consider, and plan before taking action or making a decision.
- Doing: the step in the user journey where the user begins to take a concrete action or make a decision.
- Touch Points: activities that describe the stages of user interaction with our product. Touch points are also understood as traces that map where the user interacts with us.
- Emotions: representation of customer feelings at certain stages when interacting with the product. Emotions can help us understand the user’s experience as well as be a reference in solving problems at that stage.
- Doing: a series of events/stages that occur at a certain stage.
Pain Points: problems faced by customers to achieve their goals, you can get this by interviewing users or asking the team that often interacts directly with users. - Opportunities: mapping opportunities or possible solutions that we can do to solve problems, both from customers and from internal teams.
c. Afinity Diagram: In order to check the main features the app should have, I wrote down my insights, pain points and ideas so far and grouped them using an affinity map.
d. Prioritizing using MoSCoW: Through the Affinity Map, we can see some clear patterns such as which features are important, which features are useless but rarely used, and some are only used seasonally. Using the MSCW (Moscow) Method, we then prioritize the key features the application must have on initial launch.
📄 Phase 3 — Ideate: Challenge Assumptions and Create Ideas.
Time to come up with some ideas! In this phase, we consider the solution for the problems we defined at the previous phase by making user flow and information architecture.
a. User Flow: User flow is a series of steps that need to be passed by the users in order to achieve their goal. This user flow design is useful for representing various user stories and to ensure that the path plans created can help the various types of users involved with the application.
b. Information Architecture: From the user flow that was created before, we create an information architecture which provides an overview of the content on each page. The following is the information architecture of each page that the user will interact with.
📄 Phase 4 — Prototype: Start to Create Solutions
At this stage, the ideas that have been generated in the previous stage are developed into prototype. At this stage, the team will start creating solutions that can be tested directly with users. In this phase, the results of the UI design and prototype will be shown which can be clicked on from the application.
The aim of this stage is to get input and feedback from users, so that the resulting solutions can be more precise and effective.
a. UI Design: Next step is turning wireframe into high-fidelity or mockup in which visual elements were added such as color, image, icon, illustrations and others. So, the following is the depiction of near-final version of the solution for the problems we defined in the previous stage.
b. Clickable Prototype: In this phase, the interaction or a bit of animation were added to the mockup used as a sample that user will interact with when the testing session.
I made this interactive prototype in Figma to understand how the app would flow. You can try the prototype through the link below :
📌 https://s.id/prototype-sajada-app
📄 Phase 5 — Test: Try the Solutions Out
The team tests these prototypes with real users to evaluate if they solve the problem. The test might throw up new insights, based on which the team might refine the prototype or even go back to the Define stage to revisit the problem.
a. Usabilty Test’s Goal: The testing method used in the design process this time is the Usability Testing method.
The usability testing method is often used to evaluate the extent to which the prototype meets user needs and expectations. By carrying out this test, the team can identify weaknesses or problems in the solution that has been created, so that they can carry out further improvements and iterations before the solution is implemented more widely. This test can also help ensure that the resulting solution truly provides added value for users.
The following is the usability test’s goal for this project:
b. Test Scenario: Creating test scenarios aims to verify the complete functionality of each feature. Ensure business processes and flows are in line with functional requirements.
c. Result and Insight: In this phase, the results and understanding obtained from the testing or evaluation process of the solutions that have been created will be presented.
🧩 Conclusion
🔚Result:
In this way, the application design can begin the next stage of development, namely code development. The design process is never finished because it adapts to user needs.
🎯What goal was achieved?:
This application design has been tested by the internal team and related stakeholders. From the initial research results and testing results, it will definitely make it easier for users to explore the application
📄Lesson Learned
- When doing the research phase, we learned to accept and appreciate each other’s opinion as a team since we collaborate with different people who certainly have different thoughts .
- It is important to always validate the assumptions and solutions we made to the user to avoid bias
If you need help in developing information systems and business applications for your company. Arkatama as an IT Consulting Service and Software House can help your business overcome these challenges. We are ready to help your business in designing, developing and implementing IT solutions that suit your needs, including providing a good UI/UX appearance.
Don’t hesitate to have a discussion and ask about the details of the work process that our team carries out. Arkatama also has experience as an IT Training Center by providing IT training services to produce competent human resources in the current era of digital transformation. Contact our team here!
Whatssap Arkatama | Instagram Arkatama | Website Arkatama | Linkedin Arkatama
Want to ask questions or have input and additions regarding this article?
Please type your questions, input and additions in the Response Section below.
Thank you for taking the time to read.. 😊
