Case Study Website Apps Infak or Donation
Create a UI/UX design display and website dev for donation and infaq services.
About Project
The Challenge
Design an infak or donation application based on a website that is trusted and easy to use for all ages who want to infak or donate, both for the first time using or those who have already.
Phase
Research — Wireframing — Design — Web Develop
Teams & Roles
2 People in this project
I as UI Designer, User Researcher, Web Develop & My Friend her name is Dewi Hajar as User Researcher & Tester.
Tools
Figma, Visual Studio Code, Google Meet, Adobe Photoshop, & Affinity Designer.
Project Type
Real Project
Project Date
01 November 2021–06 November 2021
The Design Brief
Starting from the development of financial technology that is trending in Indonesia. Fintech has a big influence on transaction behavior for millennials. Most millennials have several mobile wallet applications that are solutions to millennial problems so they can do good anytime and anywhere.
The purpose of this project is to create a website-based application that can make it easier for people to channel funds to donate or donate using e-wallets and banks that have no discount or only a small discount is given.
Phase 1 : Research
In this first phase I did a research first, but due to the limited time, the research on this project was only limited to determining domain knowledge and competitor analysis.
Domain Knowledge
In this case, the first thing I do is find out what business the client is in and know what risks are in their line of business, which aims to provide the right solution so that it can be adapted to the problems, existing risks, and the goals they want to create a project.
In this project, the client I work with is not engaged in a business but as a foundation that aims to help realize the main task of humans in their service to God, the Creator of nature. Their goal in making this project is to create a website-based application that can make it easier for the public to channel funds to donate or donate using e-wallet and banks with no discount or only a small discount given. However, there are several risks they face at this time, namely the funds are still odd and not fixed.
After knowing the three pieces of information, then I will find out the important stakeholders who can interact with the website-based application that I will develop. In this case, I interacted via WhatsApp chat. The results obtained are the wesbite admin who will be able to maintain and further develop the website, ustadz to be able to see the history, amount, nominal that has been collected, withdrawals of infaq that have been collected, and messages conveyed by donors, foundation managers whose access is the same as ustadz, and lastly, there is the user himself who can channel his funds to make infak or donations.
Competitor Analysis
in this step, aims to analyze competitors who are engaged in the same field. For this project, I did an analysis with infak.id, where the platform also provides a website for donating or donating. The analysis is done by looking at the website and analyzing every menu, feature, and step they take with the aim of making a difference from existing competitors.
The results of the analysis that has been carried out:
- Competitors have a mediocre UI design.
- Competitors have payment methods using banks, QRIS, and E-Wallet.
- Not all banks are in competitors for payment methods.
- There are no messages to be conveyed by donors or those who wish to infak.
- The donation website must be transparent, displaying the amount of donations that have been collected, and the people who have donated.
- There is a feature as anonymous or write a name.
From the results of this analysis, we can find out what must be available and what is still not available or presented by our chosen competitor.
Solutions offered
All the desired information has been obtained, the next step is to determine the right solution to be implemented. The solutions I offer are:
- Payment Gateway used in the form of sociabuzz. The reason for using sociabuzz is because it is easy to implement, has many payment methods, has QRIS, can fake the sender’s name and sender’s email, has a minimum infaq or donation of Rp. 1000, has a small discount compared to other payment gateway competitors, sociabuzz can display in costume although it is limited but sufficient, and can export to excel for the history of the collected donations.
- A more modern and responsive UI Design.
- Easy to manage and maintain website.
- Because there are several types of infaq distribution (Dakwah Operational Donations, Orphans and Dhuafa Donations, Waqf Donations, Riba Donations, and Tahfidz Houses), to differentiate between them, I add 1–5 digits to the amount you want to donate. according to the order given. I mentioned earlier, as an example if you want to donate to orphans and poor people with a nominal value of Rp. 1000, then what is paid is Rp. 1002.
- Added the Flip account number option for those who want to donate without being charged admin fees for bank payment methods.
After offering and explaining the solutions offered to the client face to face, the solutions offered are immediately approved and with a few additions, namely for withdrawals from Sociabuzz, the nominal collected at Sociabuzz must be Rp. 50,000 will be withdrawn.
Phase 2: Wireframing
The website that I will create uses WordPress, where the website admin they have already understands using WordPress. The flow for this project is very simple:
user opens the website — clicks the donation button — directs to sociabuzz — chooses the type of donation — fills in the form — chooses payment method — pay- done
Seeing the simple flow, I decided to just create a web page specifically for donations, because they also already have a website about information about the foundation. I made low-fidelity directly using figma because time is very limited, here is the wireframing that I have designed.
After creating low-fidelity (wireframe) in digital form it is actually possible to continue making visual designs (high-fidelity) but it is also risky to get a lot of changes after converting to visual design. So the next step is to ask for an opinion with the client regarding the wireframe design that I have made through markup.io, and there are several revisions such as typos and incorrect naming names, besides that the illustration image of the donation box asks to be replaced with an illustration of a cellphone and coins that better describes the donation which is modern and the following wireframe results have been revised and improved.
Phase 3: Design
At this stage, the first stage I did was to choose a color by following the colors on the existing foundation website to create a color palette for the logo and visual interface design of the wireframe mobile application that I designed earlier.
After get color palette for logo & visual design and also have some illustration, now time to create visual design of interface application.
Phase 4: Web Develop
After completing the design of the website, the next step is to create a website according to the design that has been completed. Making a website using wordpress and done in just one working day. The following are the results of the website that has been developed, which can be seen at the link below:
Website: Infak Yayasan
Sociabuzz: Infak Pembayaran Yayasan
After everything has been done, then this project has been completed. Next is doing maintenance for the website to keep it up to date. FYI, the one who made the thumbnail on sociabuzz for the voucher for each payment is my friend, Dewi Hajar.
The plugin that I use in this project is iconify for the icon that I use and I modify it according to my needs.
Closing
Thank you for reading the case study that I wrote, I understand that in the process and writing this has various shortcomings and limitations of time and resources, I hope that in the future I can carry out a better implementation than what I have done now.
If friends are willing to submit input and criticism for me, you can submit it via the link here. Thank you for your input and criticism.
