Morasilat: Revolutionizing Afghanistan

Mohammad Mehdi Wahid

Project Manager
Frontend Engineer
UX Designer
Next.js
Redux
TypeScript
Morasilat Cover Page By Mohammad Mehdi Wahid
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:
Relatively very slow
No means of security
cost-effective
What we aimed is for harnessing the power of technology to help us tackle these issues!

Process

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.
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
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
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
Dashboard Page
Sending Documents Page
Sending Documents Page
Archive of Documents Page
Archive of Documents Page

Statistics

Project Duration : 6 months
Team : Mohammad Mehdi Wahid and Bahir Hakimi
Deliverables : Fully functional App, Responsive Website
Partner With Mohammad Mehdi
View Services

More Projects by Mohammad Mehdi