From a pin on the map
to a place in the row

Where do I pray, and when?
Harder than it should be.

Finding a masjid nearby and the right jamaah time today still means a forwarded picture, a paper notice on the wall, or a pin on a map with the wrong details, or none at all.

268,703 masjids on the map.
Very little to trust.

We started from open map data and imported 268,703 masjids. An audit on 11 October 2026 showed how thin the details are once you look past the pin.

9:41

Generic name Estimated, not confirmed

Seen in our own test area

Three of the five nearest were simply called "Masjid"

And none of them had a confirmed time. A list that looks complete would have been a lie, so the app says what it knows and what it doesn't.

• Say what's estimatedTimes worked out from the adhan are marked "estimated" until someone who prays there confirms them.
• Say when it was checkedA masjid's times show when they were last checked.
• Make confirming one tapAnything not confirmed yet carries a strip with "Confirm" and "Not right".

The decision the audit forced: the app can't just show data, it has to help people make it right. That is why it is built around the community confirming things.

Six people we keep
in the room

Not research participants and not made-up quotes: the people we picture whenever a decision is close, what each of them needs, and what we built for them.

Nine rules we
design by

Written down early and checked on every screen. The language borrows the craft of Yandex Maps, studied from 91 current screenshots, but not its brand.

Four tabs,
one question each

The app started map-first. In the fourth round it became prayer-first: Home answers what's next, the Map answers where, Community shows what's happening, and You keeps what's yours.

Six journeys,
start to finish

Each flow is the shortest honest path from a need to an answer, with the real screens along the way.

A

From "where do I pray?" to standing in the row

The journey the app was first built for.

1. 1Home shows the next prayer
2. 2Soonest jamaah first
3. 3The masjid, at a glance
4. 4Directions, your way

9:41

Kurla West

26° · Partly cloudy

24 Jumada I

1 class

Hadith

Al-Kahf

Duas

Dhuhr · 12:23 pmin 34 min

Masjid Al-Noor

4 min walk

12:38 pmLeave by 12:33

24 more masjids nearby

Happening soon 3See all

NOV6

Tafsir evening: Surah Al-Kahf7:30 pm · Masjid Al-Noor · 300 m

NOV8

Saturday Quran class for kids10:00 am · Jama Masjid · 600 m

Help nearby

Janazah services Free clinic Food bank

HomeMapCommunityYou

9:41

9:41

9:41

DirectionsWalkDriveTransit

Google Maps

Apple Maps

Waze

Start · 4 min walk

Decision

Sort by the jamaah you can still make, not by distance. Each masjid's next jamaah, from its timetable or estimated from the adhan, plus the walk or the drive. The closest masjid isn't always the one you'll make in time.

B

The trust model

With so little to start from, the people who pray there have to keep things right, and the app has to make that safe.

Anyone suggestsA time, a facility, a missing masjid. Most things go live at once, marked until confirmed.

Others nearby confirmA tap on Confirm or Not right. Masjids that claim their page confirm their own times.

Points and levelsApproved help earns points. Higher levels need fewer confirmations.

History and reportsEvery change keeps a history, and anything can be reported.

9:41

9:41

9:41

Six levelsConfirmations an edit needs, at each level

Newcomer0 pts

Member10 pts

Contributor30 pts

Trusted80 pts

Senior200 pts

Steward500 ptsLive at once

Points alone don't lift you. Each level also needs that many of your additions approved by others. +10new masjid approved+4timetable approved−3rejected−1vote against the outcome

C

A missing masjid, added in a minute

When a masjid is missing, adding it should take a minute, not an afternoon, and never a duplicate.

Stand in itThe common case: a fresh, precise fix from your phone becomes the pin.

Paste a maps linkA Google or Apple Maps link, or plain coordinates, places the pin for you.

Use a photo's locationPick a photo taken there. If it was taken far away, the app asks "Same masjid?"

Drop a pinMove the map under the pin, with satellite view, and mark the entrance for cars.

Address filled in for you Already listed within 50 m? It shows you first Photos upload while you type

9:41

D

An event, from the first post to the recap

Classes, talks and iftars are a big part of a masjid's life. An event should be easy to post and hard to miss.

1. 1Create
2. 2Remind and RSVP
3. 3Tickets at the door
4. 4Recap

9:41

9:41

Lecture Official

Tafsir evening: Surah Al-Kahf

Thursday 6 November · 7:30 – 9:00 pm

A weekly reading of Surah Al-Kahf with tafsir in English and Urdu. Tea after Isha. Sisters' section upstairs.

Remind me

Route

Share

24 going8 interested

Masjid Al-Noor300 m · 4 min walk

Kurla Youth CircleOrganiser

Follow

Imam Abdul HameedSpeaker

I'm going

Interested

Masjid Al-NoorApproved

Tafsir evening

DateThu 6 Nov

Time7:30 pm

Tickets1 + guest

Show this at the door

Masjid Al-NoorRecap · Tafsir evening

JazakAllahu khairan to everyone who came. Next Thursday we carry on with Surah Al-Kahf.

42 came3 photos

Decision

Joining can need approval. Some events need more than a headcount, so organisers can ask sign-up questions, approve requests, allow +1s and let guests sign up on the web without an account.

E

Fundraisers, without money passing through the app

Masjids raise money all the time: a roof, a wudu area, Ramadan food packs. The app makes the need visible and leaves the giving to the masjid.

9:41

No money goes through the appThe first line of the form, before a single field. Notices only: the app shows the need, and the giving happens directly with the masjid.

Renovation₹64,000 of ₹1,00,000 · Roof repair

Update posted by the masjid · until 31 Dec

Legitimate?

LegitimateSuspicious

Anyone can mark a notice. New fundraisers are sent for verification, and a rejected one costs the poster points.

F

Connections: other people's free services, with credit

Good free Islamic services already exist. Rather than rebuild them, First Saff shows them inside the app, with their makers' names on them.

9:41

9:41

9:41

From AlQuran.cloudVisit Hadith API · links to Sunnah.comVisit

A small system,
used everywhere

Tokens live in one file, glyphs in another, components in a third. Feature code uses only these, so a change to a token reaches every screen. It is also how dark mode and Larger text work everywhere at once.

Colour

Type

Corners

Glyphs

Components

Small things,
done properly

The details people only notice when they're wrong.

Prayer times

Prayer times

Kurla West · 24 Jumada al-Ula

5:32:45Dhuhr · 12:23 pm

Fajr5:25 am

Sunrise6:40 am

Dhuhr12:23 pm

Asr3:38 pm

Maghrib6:04 pm

Isha7:18 pm

Collapsing title

A large title that hands over to the bar

Pushed screens start with a clear bar and a large title. As the title scrolls under, the bar gains a blurred surface on iOS or a solid one on Android, a hairline, and a small centred title.

Map sheet

Three resting points

Small at rest, a place card halfway, and at the top a full masjid page with a back bar, without leaving the map.

FacilitiesWomen's prayer hallWudu area

Imam and staffAbdul HameedImam

8 pt band

A grey band, not another card

Sections on a page are split by an 8 pt band of backdrop grey, which keeps long pages calm without boxing everything in.

iOSAndroid

BackChevronArrow

Bar when scrolledBlurSolid

Date and timeWheel sheetMaterial dialog

SwitchesPlatform switchPlatform switch

SpacingAs drawnAbout 8% roomier

Letter spacingTightened titlesNone, so the last letter isn't clipped

Native bits

One design, two platforms

The same screens on both, with each phone's own controls where people expect them.

Blue

Tinted

Base

Card

Ink

Green

Masjid Al-NoorDhuhr 12:38 · leave by 12:33

Go

Masjid Al-NoorDhuhr 12:38 · leave by 12:33

Go

Dark mode

Every token has a dark twin

Accents are lifted a little so they keep contrast on dark surfaces, and soft tints become deep, low-saturation versions of themselves. Settings offers Device, Light or Dark, and Larger text, which makes the whole type scale 15% bigger.

Where are you?To show masjids and prayer times near you.

Use my locationChoose a place

Permissions

Ask at the moment it matters

Location is never asked for on opening: a card says why and offers a choice. Notifications wait until you set a reminder.

Sheetdamping 30 · stiffness 260

Pressdamping 28 · stiffness 480

Popdamping 22 · stiffness 240

Motion

Three springs, named once

Presses, tabs swiping back into place and the segmented control share three springs set in the theme, so motion is decided once, not screen by screen.

Pull to refresh

The whole screen becomes the card

Pull down and the screen itself slides away as one card with rounded top corners, uncovering a blue band that runs right up under the status bar. The arrow turns with your finger, the label changes from "Pull to refresh" to "Release to refresh" past the threshold, then it spins while the data loads, says "Updated" and springs back.

• Rubber band0.8 of your drag at first, firmer as it goes
• At least 0.6 sso a fast refresh never flashes
• iOS bounce keptAndroid gets a pan that only starts at the top

9:41

Pull to refreshRelease to refreshRefreshing…Updated

Kurla West

AllEventsRequestsHelp & services

Help nearby

Janazah services Free clinic Food bank

Happening soon 3See all

NOV6

Tafsir evening: Surah Al-Kahf7:30 pm · 300 m

NOV7

Sisters' halaqa11:00 am · 450 m

Volunteers needed 1See all

Volunteers for Friday clean-up5 needed · Fri · 50 m

Questions 2See all

Women's prayer space near the station?3 answers · 150 m

HomeMapCommunityYou

Round by round,
in the open

Most rounds were saved as a checkpoint before the next began. This is what changed each time, as the changes themselves record it.

1. 1 Novv1-maplibre

   Masjid Finder, the first build

   One Expo codebase for iOS, Android and the web, a Supabase database with its rules, photo uploads, and a design system. A map home on MapLibre; masjid pages with timetables, facilities by vote, photos, reviews, people, events and fundraisers; Qibla, weather, and profiles with scoring and a moderation queue.

   The first look borrowed from Yandex Go: yellow, 3D emoji, heavy type. It was later replaced by the quieter craft of Yandex Maps, which is the language you see today.

2. 2 Novv2-google-maps

   Google Maps, and the masjid inside the sheet

   Google Maps on phones, MapLibre on the web. The masjid page moved into the map sheet, whose top resting point became a full page with a back bar. Adding a masjid was reworked: photos upload as you pick them, place search, an entrance pin for cars, Jumu'ah time and language.

3. 2 Novv3-map-first

   Map-first

   Map layers and walking rings, search results on the map, community boards, nearby alerts, and worship tools: a fasting tracker, Friday and suhoor and iftar reminders, travel mode. New kinds of place too: prayer rooms, Eid grounds and temporary jamaats.

4. 2 Novv4-tabs

   Prayer-first, in four tabs

   Today, Map, Community and You. Today ranks nearby masjids by the jamaah you can still make, from the timetable or estimated from the adhan plus the walk or drive, with Jumu'ah on Fridays. Green pins mark masjids with confirmed times. Today is called Home now.

   MapTodayMapCommunityYou
5. 3 Novv5-community

   The community round

   Joining events with approval, sign-up questions, +1s and walk-ins; organisations with verification and followers; and confirmation rules: most things go live at once, labelled until confirmed, while pushes and alerts wait for one confirmation.

6. 3 Nov

   Connections

   Free Islamic services inside the app with their makers' logos and credit: the Quran from AlQuran.cloud, Quran Radio, duas and adhkar, a hadith of the day. Peace Radio and lectures were built, then kept off until their makers agree.

7. 3 Nov

   A calmer, plainer app for new users

   No tips on the first opening, then at most one a day. Location never asked for on opening. "Prayer" instead of "iqamah" on everyday screens. Home's seasonal cards one at a time, friendly load errors, Larger text, and no hidden long-presses. Row titles and chips moved from Regular to Medium.

8. 3 Nov

   Renamed First Saff

   The app became First Saff everywhere people see it, at firstsaff.com. It wasn't in either store yet, so this was the last cheap moment to change its name and its ids.

9. 3 Nov

   Faster, closer to home

   The database moved to Mumbai and each screen's reads were batched into one request. Measured from Kerala, one database call went from 0.54 to 1.8 seconds down to 0.16, and the profile page from 4.9 seconds to 0.08.

10. 3 Nov

    A new mark

    The mihrab mark across app icons, the launch screen, store art and a brand study. The launch screen became brand blue edge to edge, with the mark alone in the middle.

11. 3 Nov

    Small decisions, written down

    • The big create buttons under each Community tab went: the + menu at the top already had them.
    • The map asks for location only on "Use my location", not when the tab opens.
    • Prayer reminders are scheduled once, not once per launch, after a day of installs left eight identical Isha reminders.
    • On an iPhone without Google Maps or Waze, directions open Apple Maps rather than a web page.
12. 4 Nov

    This website

    A first site went up on firstsaff.com on 3 November, with the web app moving to app.firstsaff.com. A day later it was rebuilt in the style of the Glow template, with the app's own colours, type and glyphs, and this case study.

The first row,
drawn

How the mark was made: what the name means, what we studied, what we tried and threw away, and why the final mark looks exactly the way it does.

a mihraba 1the first row

41references studied

7design rounds

~50drawings and variants

10legibility tests

BThe brief, and the gap

Six things the mark had to do, written down before the first sketch and checked against every round.

01Say masjid, without the clichéNo domes, crescents or mosques in pins.

02Say firstThe name is a promise to be early. Carry the number one.

03Show the rowA saff is a line of people. The mark needs a line in it.

04Work at 16 pixelsFavicons, notifications, map pins. If it breaks small, it breaks.

05Feel like the appSaff Blue, soft corners, calm, Anek Latin. Not a brand bolted on.

06Reward a second lookThe best marks hide a second meaning. So should ours.

The pictures masjid apps keep coming back to, redrawn by us as plain diagrams. Our own first icon was one of them: clean and friendly, but any masjid app could have it.

The gap. Every one of these says "mosque". None of them says first, and none shows a row. That empty space is where our name lives, so that is where the mark should live too.

DSeven rounds, about fifty drawings

Each round answered one question, and the answer usually threw something away. These are the real working sheets.

Round 1Six first ideas

A mihrab with rows, a pin with a mihrab inside, an arcade, a gate, a pointed arch and a dome built from rows.

KeptThe rows, and the mihrab instead of a whole building.

DroppedThe pin with a building inside, which every finder app has.

Round 2The idea that clicked

Cut away the lower part of a mihrab's left leg, and what is left could be the number one.

KeptArch, one and row: one shape, three meanings.

DroppedA left end hanging straight down: a hook or a cane, not a 1.

Round 3Making the 1 a 1

Stop the left curve part way down and cut it square to the curve, so the flag points down and left like a real numeral.

KeptA cut square to the curve: a 1 at every size.

DroppedWith half the arch gone, the mihrab disappeared.

Round 4Bringing the arch back

Draw the missing leg again, but faded. The eye completes the arch and still sees the solid 1 in front of it.

KeptThe ghost leg: both readings at once.

DroppedA bullet-shaped arch that looked like a pen nib.

Round 5Trying a true ogee

A real mihrab has round shoulders that flick into a fine point. We tried it with thick strokes.

KeptThe lesson: draw filled shapes, not thick lines.

DroppedStrokes that kink into spikes at the tip.

Round 6Shapes, not strokes

Rebuilt as an ogee outline minus a pointed niche, the way a real frame is made.

KeptUnmistakably a masjid door.

DroppedRound shoulders that read as a small pagoda, and a weaker 1.

Round 7The balance

A simple pointed body, with the ogee only in the last tenth of the tip. Every option checked at 60 and 40 pixels.

KeptVariant K: the bolder stroke survives best when small.

DroppedThinner options, which break up below 60 pixels.

MaterialFrom flat to 2.5D

The flat mark became an app icon: a recessed niche, a frosted leg, a raised 1 and a glowing row. Then four refinements side by side.

KeptSoft 18-unit corners, lighter glass so the 1 leads, a slimmer row.

DroppedSquare feet, heavy glass, and a row like a button.

FConstruction and material

Drawn on a 1024-unit canvas with a 64-unit grid, from filled shapes rather than lines, so every edge can be controlled exactly.

Guides onGuides off

Canvas	1024 × 1024 units, 64-unit grid
Arch width	384 units, 37.5% of the canvas
Leg width	134 units, about a third of the arch
Crown depth	126 units, so the stroke feels even
Tip	The last 11% of the rise is a small ogee
Fold	30° below horizontal, square to the curve
Row	384 × 76: as wide as the arch
Gap	44 units between the feet and the row
Corners	18 on the feet; tip and fold stay sharp
Balance	170 above, 168 below: centred within 2

Built as one outline

Outer arch, across the feet and back over the niche in a single closed path. No overlapping edges, so no hairline seams at any size.

Pointed body, ogee tip

A full ogee looked like a pagoda, a plain point like a pen nib. A plain point with a small flick at the very top reads as a masjid.

The fold, square to the curve

A horizontal cut made a hook. A cut at 30°, square to the curve, makes the flag of a numeral, as if the leg were folded back.

Explode layers

1. TileSaff Blue from a lighter #3D8BFF at the top to Deep Blue at the bottom, with a soft sheen in the top-left corner.
2. NicheThe inside of the arch darkens towards the top, like a real alcove, so it reads as a recess, not a sticker.
3. Glass legWhite at 32% fading to 10%, with a crisp highlight on its lit edge. The same idea as the app's two-tone glyphs.
4. The rowGold from #FFE38A to #F5A300, a bright top edge, and a warm glow that spills onto the tile.
5. The oneNear-white, a cool shade on its lower-right edges and a rim light on the upper left. Its shadow falls across the fold.

When there's no room for light

Below about 29 pixels, and anywhere effects aren't possible, the mark goes flat: same shapes, same two-tone rule, no shading.

GTen tests before we called it done

A logo lives mostly at small sizes, at a glance, on someone else's wallpaper. So we tested it the way people will actually see it.

Shown at real pixels. 16 px uses the flat version.

The squint test

Blur it until the detail is gone. A strong mark keeps its shape: a tall white arch on a gold line.

SharpSquintingAcross the room

Colour vision

About 1 in 12 men and 1 in 200 women see colour differently. The mark is built on lightness, not hue, so the 1 and the row stay clear.

Silhouette

In one colour the shape alone has to carry it. Without the glass leg, it's a pure 1 on a line.

First Saff

First Saff

On real wallpapers

Light and dark, busy and calm: the blue tile and the white 1 stand out on both.

Android shapes

Android crops the icon to whatever shape the phone uses. The mark sits inside the safe zone, so nothing is ever cut, and it works as a themed icon and a white notification glyph.

Contrast, measuredWCAG ratios from the exact colours. Shapes need 3:1, text needs 4.5:1.

White on Saff Bluethe 1 against the tile4.6:1

Gold on Saff Bluethe flat row against the tile3.1:1

Row in the app iconfrom the icon's own pixels4.6:1

Saff Blue on whitethe tile on a white page4.6:1

White on Nightwordmark on dark17.1:1

Night on Goldtext on a gold surface11.7:1

Caught by this test

The first gold, #FFC23A, measured only 2.8:1 on flat Saff Blue, just under the 3:1 a shape needs. In the 2.5D icon it was fine, because the row sits on the deeper blue at the bottom of the tile. So the flat gold moved to #FFD04F, a touch lighter, which passes everywhere.

• Readable from 16 to 1024 px
• An arch and a 1 when blurred
• Distinct in three kinds of colour blindness
• Holds as a one-colour silhouette
• The 1 and row pass 3:1, flat and 2.5D
• Fits Android's circle and squircle
• Works as a themed icon
• Reads as a white notification glyph
• Stands out on light and dark wallpapers
• Centred optically within 2 units

IWhere you'll meet it

9:41

9:41

3:12

Tuesday 3 November

First Saffnow

Asr in 15 minutes. Leave now for the first row.

9:41

First Safffirstsaff.com

JBrand assets

The files, for anyone writing about First Saff or putting up a poster at the masjid. Please use them as they are.

App iconSVG · 2.5D App iconPNG · 1024 px Flat markSVG · blue tile MarkSVG · blue on white LockupSVG · for light backgrounds Lockup, whiteSVG · for dark backgrounds

#1F6BFFSaff BlueRGB 31 107 255 · the tile and every main action #1240D8Deep BlueRGB 18 64 216 · the tile's shadow side #FFD04FFirst GoldRGB 255 208 79 · the row and the i-dot, sparingly #0B1A3DNightRGB 11 26 61 · the wordmark on light #FFFFFFPaperRGB 255 255 255 · the 1, and room to breathe

Blue 55%Paper 25%Night 12%Gold

Gold works because there is so little of it: the row, the dot, and moments of recognition. Tap a colour to copy it.

What's next,
and what we learnt