Qur’an Indonesia Project

What exactly is User Experience?


People usually think about user experience (UX) term as something superficial. Something like good design, harmonious colors, seamless interaction and well placed buttons. Sure, those aspects are definitely important. But that’s not all there is to it. A successful user experience comes from good detailed approach. It’s not only about creating good and harmonious design but also about predicting scenarios and deciding how to handle them. It’s all about combining many important factors. These factors include, but not limited to business, human resources, timeline, product roadmap, etc.

Here, we’ll talk about one of our client’s story. In short, QuranID’s (QIP) team has trusted us to handle their project. QuranID is a pro-bono, non-profit project that aims to provide Quran digital audiobook. Of course, there are already some free apps out there for Quran streaming. So, what makes QuranID special? It involves many Indonesian well-known figures like Raisa, Tulus, Rossa, Afgan and many more. These big names allow QuranID to have much bigger exposure. By doing this way, they are able to introduce a better and easy way of learning Quran to a wider range of audience.




We met QuranID’s founder Archi Wirija, and a few of his partners in the middle of February 2017. We were talking about what kind of apps development project QuranID was trying to do. QuranID Project was already running for quite a while, but they were still nowhere to go and looking for more people to help them handle the project. So we were more than happy to help them voluntarily.

Although the audio recording was nearly to be done and soon ready for download on iTunes and SoundCloud. They still had something left to do, which was to spread the news and make it known, then they decided to create a platform that intended to make user much easier to enjoy Quran streaming. It was due for release in May 2017, so public will be able to use it in time for Ramadhan.

What We Do : Understanding the Needs

As we stated before, QuranID invites some big names as contributors. Hopefully, by using their influence and endorsement, wider exposure will be guaranteed. Then it came out our turn, as designers, our tasks were to create outstanding visual and sleek experience design that able to live up to the hype. With limited amount of time, we tried to produce great visual and experience design for users. Together with Archi (Founder of QuranID) and Fitra (CTO of QuranID), we broke down every single feature we needed to develop.

Progress & Ideation


By reducing the complexity, we could assure that this project would be ready for release by May 2017. After some consideration and discussion with lead mobile (Hilmy Muhksin) and backend engineer (Andika), we agreed to create four features, one main feature and three extra features, as Minimum Viable Product (MVP). The main feature is audiobook streaming service equipped with three extra features consist of contributor search, audio search, and blog content.

As we’ve had already covered business and technical side of the project, the next thing left to handle is design. Considering we had to deliver this product fast to the market, we didn’t spend too much time on making flawless interface. We decided to make a simple yet interactive user interface and design. The most important thing in here is knowing where to put extra efforts on micro interaction or just leave it that way with native interaction. Efficiency is a key, because we don’t want our engineers spent extra 2 or 3 days on every screen just to make seamless animation for the sake of our (designer) ego.


Emphasizing the Browsing Experience

Online user experience is very similar to the user experience you get when going to read a book in library or book store. You want a pleasant time without any hassle. You want to be able to navigate the book directory quickly, get what you need right away, and head to the checkout line without a wait.

And more importantly, you don’t want to deal with a slow librarian and cashier, items not where they should be or out of stock. You simply want what you came for and be on your way. As UX designers, we need to help people navigate the library easier.

But it may seem a bit corny for us as UX designer to think about it, but the experiences are similar. The key to providing a pleasant user experience for users is to understand that they are in search of content. So we designed the user interface to let users control their browsing and movement through the application, provide unique and friendly Qur’an streaming experience.


Interface & Interaction Design Development

User Interface (UI) requirements are more than just building text boxes and buttons. We were not just creating a beautiful design but also a functional one. It was not an easy job to create a simple yet elegant design, we considered so many factors like where on the screen should the button be placed, what style button it is, what color scheme are we gonna use. All these things are really important for our client to craft a good impression about the product. It’s crucial to make a great user experience and carefully familiarize users with your product and then those users will come back. QuranID project is a breakthrough, starts with the onboarding screen that tell users about the convenience of learning Quran in different way to the main screens that bring users a simplicity of choosing their favorite recordings.



So, after we did a lot of works and meeting, finally the development team able to meet the deadline and submit QuranID app to google and appstore in early of May 2017, and we did press conference and public release on 17th of May.

Implemented UI on MVP Level


Here the QuranID Project launch event at Conclave Jakarta, 17 Mei 2017.

©QuranIDProject : Press Conference and QIP Event Team


So, Whats Next ?

As the apps and the audience continue to grow, we will make some changes and adjustments to the design to make it more sustainable, first thing that on our plate that we need to gather insight from users, and making improvement based on it, usually we do a lot of researches for our client including InDepth-Interview, Usability Testing, Play&App Store review etc.


Designing a product is way much more challenging, dynamic environment inside the companies/startups are still varies, one way or another designer needs to adapt to the new environment, we can’t only focus on the beauty itself, understanding overall aspects of the product and development are way much make sense on this day, for us at uxmarker, we always positioned our self as a friend, a comrade who dived in from the beginning.

Download Here : Android — iOS

Some coverage from Indonesian biggest newspaper