existence
← All posts
ProductOctober 2026 · 5 min read

Where Jozi is tonight: building a home screen that moves with the city.

A night out starts with one question: where is it actually happening right now? Here is how we built Groove's new home screen to answer it the moment you open the app.

S
SiyabongaAuthor
XLinkedIn
Where Jozi is tonight

A night out does not begin with a venue. It begins with a question: where is it actually happening right now? Most apps answer that badly. They hand you a list that looked the same at six in the evening as it does at eleven, or a map of every pin in the city with no sense of which rooms are full and which are still finding their feet. For Groove, our going-out app for Johannesburg, we wanted the home screen to answer the real question the moment you open it. This is the story of the home experience we just finished building, and the small decisions that went into making it feel alive.

A map that answers one question

The screen opens on a map of the city, because a night is a geography before it is anything else. You are deciding between here and there, between a ten minute walk and a drive across town. So the map is not decoration sitting above a list. It is the primary surface, and everything else on the screen is anchored to it.

The markers are where most of the work went. A standard pin tells you a place exists. We wanted a marker that tells you a place is alive: the busy venues pulse, the ones trending upward draw the eye, and tapping any of them glides the map over and re-centres on that spot rather than snapping there. Small motion, used sparingly, is the difference between a map that feels like a document and one that feels like a window onto tonight. The map also restyles itself to match the app theme, so the same city reads correctly whether you are in a bright room or a dark one.

Reading a room from the outside

The hard part of a going-out app is honesty. It is easy to call everything "popular" and useless to do so. We settled on a small, plain vocabulary for where a venue is in its night, and we use it everywhere: Warming up, Filling up, Busier than usual, and Peak now. Four states, no stars, no scores out of ten. A phrase you would actually use when a friend asks what a place is like right now.

Underneath each venue sits a strip of activity bars covering the hours a night really lives in, from early evening to the small hours, with the current hour picked out. That single highlighted bar does a lot of quiet work. It tells you whether a place is on its way up or already past its peak, which is often the only thing you need to know to decide.

A good home screen does not ask you to think. It answers the question you already had before you opened the app, and then gets out of the way.

One selection, two views

The venues appear twice: as markers on the map, and as a horizontally scrolling strip of cards below it, each card carrying the venue's rank, its area, those activity bars and its status. Two views of the same thing is a classic way to confuse people, so we spent real effort making sure they never disagree. Tap a card and the map re-centres on that venue. Select a marker and the strip scrolls to its card and lifts it. Selection flows both ways, and there is only ever one selected place, so the screen always has a single, obvious answer to "which one are we looking at?"

Around the map sit the few controls a going-out app actually needs: a search field, a city selector set to Johannesburg, and a Check-In button for telling your people where you have landed. We were deliberate about what we left out. The home screen's job is to get you to a decision, not to hold every feature we have.

4plain-language status states
2-waysync between map and cards
18:00–02:00the window every venue is read across

Built on what we already had

None of this is the kind of screen you want to assemble from scratch, and we did not. Before writing a line of the home page, we mapped every part of the design back to something that already exists in our shared foundation, the layer we call ecore, or in Groove itself. The theming, the navigation, the venue data, the card patterns: for each piece the question was the same, and we answered it honestly before building:

  • Reuse as is where the foundation already did the job, which covered more of the screen than we expected going in.
  • Extend where something close existed but needed a little more, like the venue cards gaining their activity bars.
  • Build new only where nothing fit, and only with a written reason for why, which is how we kept the genuinely new code down to the animated map markers and the two-way selection.

This is a habit we have written about before in other corners of the company, and it pays off most visibly on a screen like this. Because the theming, state handling and navigation all came from the same foundation every Existence app shares, the home screen behaved consistently from the first build, and the effort went into the things that are actually specific to a going-out app rather than into rebuilding the floor beneath it.

What "finished" means for a home screen

A home screen is never truly done, because the city it describes keeps changing. What we finished is the shape: a living map, an honest vocabulary for how busy a place is, activity you can read at a glance, and a selection that stays in step no matter where you tap. The parts that feed it, the live data, the trending logic, the places you have been, slot in behind a stable surface without the screen itself having to change.

The quiet test we held ourselves to was this: could someone open Groove, glance once, and know where to go? If the answer is yes before they have thought about it, the screen has done its job, and the night can start.

S
SiyabongaWriting for Existence

Notes, as they happen.

One email when we publish. No digest, no drip, just the post.