Events at Zolo

Zolostays asked for a new feature, Events, built as an extension of the existing app and integrated so seamlessly that residents wouldn’t notice where the old app stopped and the new feature began.

There was a catch. No design system, style guide or source files came with the brief. The only reference for the app’s visual language was the live product itself.

So the challenge was really two problems stacked on top of each other: first reconstruct the system, then design a new feature inside it without breaking it.

Events has two audiences with different needs. Residents want an easy way to find things happening in their building and meet the people they live with. Zolo wants a channel to run and promote its own programming at each property, from carrom tournaments to poetry nights.

The design has to serve both without either feeling like an afterthought: social and low-pressure for residents, structured and measurable for Zolo.

With nothing but the live app to go on, I audited its screens and pulled out the decisions behind them: the brand blue and coral, Poppins as the typeface, how list rows were spaced, how icons sat against text, and how actions were styled.

Everything in Events was then built from that reconstructed set, so new screens would inherit the app’s rhythm instead of approximating it.

Values below are measured from the final Figma frames. Type sizes are read from text-box heights, so treat them as close approximations.

Events takes a slot in the bottom navigation alongside Home, My Zolo and Profile, so it reads as part of the app rather than a feature bolted onto it. The hub splits events by time, which is how residents actually ask about them: what’s on now, what’s coming up, what happened, and what am I signed up for.

People who aren’t yet Zolo residents hit a gate instead of an empty screen, which points them towards finding a property.

The low-fidelity pass settled the layout before any styling: the same 82px row for every list, so the hub and the four lists share one pattern, and an event page built as an image with a sheet sliding over it, so each event has one consistent anatomy.

These wireframes are generated from the same structure as the final screens, with content reduced to blocks.

The most important decision was to design the event page as a single template that changes with the event’s lifecycle, rather than a set of different pages. A resident always lands in the same place; what changes is what the page offers them at that moment.

Thirteen screens, each delivered in light and dark mode.

The challenge ended at design, so there’s no launch data. These are the signals I’d track to tell whether Events is doing its job for both residents and Zolo.

The most valuable part of this challenge turned out to be the part that wasn’t asked for. Reverse-engineering the app’s design language forced me to understand why its screens looked the way they did, and that made extending it feel natural rather than imitative.