Khair wa Baraka
Overview
The Shark Clicks team worked on developing a modern digital experience for the Khair wa Baraka website, which is considered one of the leading charitable organizations currently operating. The website highlights its community-serving programs such as supporting education, developing informal settlements, developing handicrafts, and women empowerment. We focused on building an interface that clearly and simply showcases the impact of the initiatives, helping users quickly identify activities and easily access donation and volunteering options through a few simple steps. We also worked on improving the website’s mobile performance to serve all different user segments. In addition, we paid close attention to organizing the content in an easy-to-browse manner that highlights success stories and the real results of the initiatives implemented by the organization on the ground. We designed a clear user flow that strengthens user engagement with various programs and encourages continuous participation and support. Finally, we ensured visual identity consistency that reflects the organization’s mission and humanitarian initiatives, aiming to deliver a fully integrated digital experience that enhances visitors’ trust and supports the sustainability of positive community impact for the organization.
Our Role
- We prepared a visual system that reflects the full identity of the organization and its various community programs.
- We developed a complete Design System including colors, icons, typography, and project display patterns.
- We worked on providing electronic payment services and payment gateways such as Fawry, Aman, Masary, Valu, and Apple Pay, as well as integration with the National Bank of Egypt electronic payment gateway via Visa and MasterCard, Paymob, Kashier for electronic payments, Amazon Payments, PayTabs, Meeza Card payments, electronic wallet payments, and Vodafone Cash.
- We worked on designing UX/UI for all program pages, donations, annual reports, and volunteering.
- We fully reorganized the content structure to present results and activities clearly and understandably.
- We developed the website using PHP to improve speed, stability, and overall browsing performance.
- We integrated multiple secure electronic payment gateways to facilitate donations for users.
- We optimized the mobile experience and adjusted the interface to suit all different devices.
The challenge
The main challenge was presenting a wide variety of initiatives, ranging from urban development and education to economic empowerment, in the best organized way that clearly highlights the impact of all programs without complexity, while ensuring visitors can quickly reach the correct donation or volunteering paths. Another important aspect was organizing the content in a way that balances the large number of initiatives with ease of navigation, while maintaining clarity of the core and essential messages for all different programs.
Our Approach
We began by analyzing the existing content and the way different programs were presented, then mapped the user journey from the first entry point through completing donations and volunteer registration. We worked on designing complete wireframes, then moved to final designs that reflect the organization’s identity. During development, we focused on improving performance and organizing multiple program pages and main sections. After that, we integrated electronic payment methods and conducted comprehensive testing to ensure a stable and smooth experience across all different devices
Customer Journey
The client journey is considered one of the most important phases during project execution. The client closely followed all stages with us, from approving designs and program presentation methods to testing donation methods before the project launch. This collaboration helped us deliver a website that reflects the organization’s vision and provides a clear and simple experience for supporters and users.
