Quran.com // Web App Interface

Quran.com provides an online platform for the Quran — the holy book read by 1.7 billion Muslims worldwide. I was approached by the development team to design a fresh new user interface that would modernize the aging website.

The team looked at a large database of feedback provided by Quran.com's users, and explored features that would elevate the browsing experience.

Transitioning to a responsive design was critical, since statistics showed that an increasing number of visitors were accessing the site from mobile devices.

A full-width interface was designed to maximize screen real estate. Emphasis was placed on providing an uncluttered, intuitive reading experience with plenty of white space and navigation controls grouped together by function.

The Quran.com team is led by Mohamed El Mahallawy, Ahmed El-Helw, Robleh Jama, and Khaled Hussein.

Idea generation.

[above] Responsive website, as viewed on a mobile device.
[below] Screens, as viewed on a desktop browser.

Home page with full chapter listing.

Chapter page. Sidebar of chapter listings is collapsible to further expand the reading area. Header remains fixed to the top of the window for quick and easy access to controls.

Search results page.