Daleelo - A community guide for Muslims on web and mobile
“
Find a masjid, a business or an event, and the time of the next prayer.
Daleelo
iPhone, Android, tablet and web app, 2015
About the project
Daleelo is a community app for Muslims in the United States and Canada, first released in 2012. It lists businesses, masajid, events and classifieds, with prayer times, a Qibla compass, a zakat calculator and a trip planner. In 2015 we redesigned it for iPhone, Android, tablet and the web, from audience research to the final UI.
Project
Daleelo App and Web App
Industry
Community and Local Directory
Location
Texas, USA
Date
2015
“
Client Request
Daleelo wanted a website that matches the new app design, with a map view, favorites and sharing on every listing.
Daleelo
Website requirements, July 2015
Design Pillars
Core UX Principles
Each section has its own tile on the home page, under one search bar.
The home screen counts down to the next prayer, and the trip planner offers a stop when one is near.
Our research put most users at beginner level, so screens use large tiles, plain labels and one main button.
What Users Need
Built for Muslims in North America
Places They Can Trust
Our personas wanted Muslim-owned businesses, halal food and a nearby masjid, at home and on work trips.
Prayer on the Road
People who travel a lot need prayer times, the Qibla direction and the closest masjid wherever they are.
Ways to Give
Zakat, sadaqa and community projects sit together, so people can work out what they owe and give.
The Challenge
Problem Statement
The Main Goal: Put a Whole Community in One Clear App
Daleelo already had an app with a business directory, a trip planner, events, classifieds and prayer times. The redesign had to fit all of it, plus accounts for businesses, masajid and organizations, into a structure a first-time user could follow on a phone, a tablet or the web.
“
Bringing the community to your fingertips.
Daleelo Tagline
Daleelo, 2015
Our Approach
Solution
From Personas to Four Platforms
Audience research, personas, user stories and flows, wireframes and the final UI for iPhone, Android, tablet and a web app with account areas. It is an example of our Mobile App Design work.
01 - Research and Personas
We profiled the audience and wrote three personas, from a young father to an older masjid board member.
02 - Flows and Wireframes
User flows and wireframes for every app section in June 2015, then for the website and the account areas by early September.
03 - The Final UI
iPhone and Android screens in August, then the web app, the tablet layouts and the account manager in September and October.
Before & After
The Blueprint & Evolution
Wireframe to Final Screen
The Qibla and zakat screens kept the structure of their June wireframes.
Before: the gray wireframes, June 2015.
After: the final iPhone screens, August 2015.
Design
Key Features
Zakat Calculator
Enter cash, gold and silver, loans, stocks and business stock, and the app works out the zakat due.
Trip Planning With Prayer Times
A route can include stops for gas, groceries, rest areas and restaurants, and the app offers to add a stop when a prayer is due.
Design System
Visual Identity
Typography
Roboto in light and regular weights on every platform, with large light numbers for the prayer countdown.
Color Palette
Daleelo blue for actions, and a color for each section, like orange for classifieds, teal for masajid and pink for events.
Three Account Types
Businesses, masajid and organizations each get an account manager. A masjid posts events, announcements and prayer times, and a business adds deals and buys ad packages.
Impact
A Full Redesign in 2015
Results for Daleelo
By October 2015 the designs covered iPhone, Android, tablet and the web, plus the account areas for businesses, masajid and organizations.
Daleelo
Result
By the Numbers
1,316 Screens and States
In the final iPhone, Android, tablet and web app files.
4 Platforms
iPhone, Android, tablet and a web app.
15 Website Flows
Mapped before the web UI, including the account areas.
Audience Research
Starting With the Community
Personas Before Screens
Before any screen, we mapped who Daleelo serves: Muslims aged 25 to 55 across the US and Canada, many of them new to apps. Three personas and user stories for each section shaped the flows and wireframes that came next. You can see some of the results below.
Final Showcase
The Daleelo App and Web App
