Morasilat: Revolutionizing Afghanistan







Morasilat Cover Page By Mohammad Mehdi Wahid



Overview

Morasilat is a cutting-edge web application designed and developed specifically for Kabul University. This innovative platform facilitates the secure transmission of documents within the organization, revolutionizing the way important documents are shared. By digitalizing the most fundamental governmental procedures in Afghanistan, Morasilat marks a significant step towards modernization and efficiency in the country's administrative processes



Spark

The need for such an application is to enter a new era, where speed, quality and security are crucial for every task in the daily life. For every organization there are means to communicate and traditionally it is paper. Paper-based systems had several downsides:

1. Relatively very slow
2. No means of security
3. cost-effective

What we aimed is for harnessing the power of technology to help us tackle these issues!

Process

1. Used UX Research methodologies such as interview, focus group and competitive audit to define the scope of project. It was a redesign of the existing non-functional application.
2. Used Design-Thinking Methodology and Atomic Design Principle to lay foundations to my design. We used feature-driven development meaning I designed a feature and then we would build and integrate that feature into the main flow of the application.



Design Thinking Methodology





Challenges

Over time we faced many technical challenges with either building a feature or a specific page. Here is one of them.

• In the previous version when a document was sent or received it was a file, thus the increase in storage size on the servers.
• Instead what we did was to sent html markup over secure channel and then render the html on document format. The need for downloading the document was also considered so we used a library to convert the html to pdf.



Document Reading Page





What did I learn?

Morasilat was my first project which would be used by hundreds of people on daily basis. This put pressure on me to not only develop it correctly but ensure that the app is useful and usable, is user-centric, ensures smooth performance when the load is maximum. Some of the techniques I used for optimization were:

• React pagination for configuring and managing API.
• SSR and ISR features of Next.js for rendering
• Lazy loading and code splitting
• caching and memoization for speed

Mockups



Dashboard Page





Sending Documents Page



Archive of Documents Page



Statistics

• Project Duration : 6 months
• Team : Mohammad Mehdi Wahid and Bahir Hakimi
• Deliverables : Fully functional App, Responsive Website