Islam 360

Product Design | UI/UX | Research | Illustraion | Testing |

Product Thumbnail
Project Duration

03 Months

Client

Islamic Technology Mission

Team

All Stakeholders

My Role

App Design, Research, Information Architecture, Interaction

overview

See it Live

Islam360 is a unique app, many apps available are offering 1 or 2 services to their users but Islam360 is a complete package. It's the only islamic search engine available in more than 1 languages, which means you can search anything about anything in Islam through this app within seconds. Islam360 has the largest database from which user can search just about anything and moreoer they can read Quran, read Hadith, Get information about Qibla, Praying times based on their locations, Learn more about Islam. So, Islam360 is a complete package and that's why it has more then 30 million downloads across the globe and daily active users are more then 2 million.

Process

I follow a simple 3 step process | Research - Iterate/Design - Testing

Research

I got data from competitive analysis, app store feedback and users feedback through offline mediums to hightlight areas of improvements and features that can be included to improve the usage of the app.

Design

I then worked on various wireframes and come up wth various iterations to see which works well and which doesn't, we later then test it internally with stakeholders to see which design iteration is being agreed upon by the decision makers.

Testing

I took out the best 2 or 3 design iterations and conduct A/B testing with real users who are from different walks of life to understand what are their choices and how they are interacting with the designs we've provided them, then we take out the feedback and further incorporate it into the final version and send it for development by providing accurate design assets and design handoffs to developers for better design delivery.

Later we coduct beta testing to highlight the design and functionality errors and get them fix before we make it live on appstores for Google, Apple and Huawei.

Design

pureVPNBusinessWebDesign

Intuative Modern Design

Problem

The app's layout and aesthetics were getting bit old and lacking at various modern usability parameters. It's a data enriched app but the positioning of data and presentation of it wasn't planned earlier and completely neglacted the scaleability of the app.

Thus it was requried to give it a modern touch, sort the data, position it correctly with better visibility and minimalistic approach. Easy to navigate and serve the users off-the-shelve features that they can customize based on their needs.

Solution

Through research and data gathering I came across with most used features / information that user engage within the app. So, I took that out and positioned them at the most prominent places inside the home screen e.g., Prayer time, location, data and time and I collpased daily intimations to reduce scroll and make room for inside elements which were being used but user had to click so many times to get them and I positioned them on main screen for quick and easy access by increasing on customer efficieny score(CES).

pureVPNBusinessPricing

Unique Illustrations and Icons

Problem

The app was very much flat and less attractive and more like a directory for a database, lacking all the visual elements that can help user to get better idea of a particular screen as well increase the enggagement.

Solution

Being illustrator I love to give viusal appeal to any concept and I used my abilities to convert the screen type into a illustrative artefact and used creative colorful headers for all the screens. One of the purpose to surprise the users and create the "wow" factor and the other purpose to modrenize the app. Also to avoid clutter of information on any screen. I went ahead and created custom icons for each screen and giving maximum exposure to each feature so that their usage can be maximised.

pureVPNBusinessMobile

Intuative Radial Menu

Problem

Being enriched in data the app had alot of options to choose, sort, view, listen etc. which was causing plenty of clutter on screen, considering small screen e.g., less then 5 inches the link and buttons were so densed and heavily placed that the actual information area was close to 30% of entire screen and user have to scroll many times to completely see the full piece of information.

Solution

as it's said "creative problems needs creative solution" so, I came up with a creative solution " the radial menu", this radial menu is adaptable scaleable to have as many link/button/option required by users. It can be easily triggerd and cosume less space so, giving maximum area to the content user is viewing. It's smart that it shows various options based on user's selection. It's intuative and contains the "wow" factor that when user used it they were in awww. Makes me happy :)

pureVPNBusinessIllustration

Improved Qibla Finder & Prayer Times

Problem

Qibla is most used feature yet hidden inside the app, the timings for prayers are most viewed screens and yet hidden moreover the information on how to edit and set the location to get the correect prayer timings were undiscoverable by users.

Solution

Made intuative and easy to find screens for " Qibla direction" and " Prayer Timings" along with better positioning and discoverability from home screen.
Quick option to set the Qibla based on location and toggle the notifications for prayer timings. Used aesthetics and theme concepts used across the app to differentiate between prayers and their timings. The same concept has been covered in entire app to keep the consistency.