Haswell Creative — Case Study 36
Start a project

Urbanetics · Senior Living Property Tech · Concept

Four products, one front door

Urbanetics sells senior living operators four tools: a website manager, a sales pipeline, a resident app and a digital display manager. The buyers are executive directors who run buildings full of people, not software. The site had to make four products feel like one decision.

Role
Art direction, marketing site design, front-end build
Year
2026
Deliverables
Single-page marketing site (React 18, TypeScript, Tailwind CSS 3, Lucide icons, Vite), video hero with character-by-character headline, liquid-glass UI system, four product panels with live HTML mockups, contact section, single-file build
A motion study for the suite viewer: the floor plan becomes a furnished room you can see into, which is how a family on the other side of the country first meets an apartment.

The problem

Senior living software is usually sold as a stack of separate logins. The website comes from an agency, the sales CRM from a real-estate vendor, resident messaging from a third app, and the lobby TV runs a USB stick someone updates on Mondays. Each vendor has its own landing page, and each one opens on a dashboard.

Urbanetics built all four and connected them: one calendar, one resident list, one login. The trouble was explaining that without a feature grid of forty checkmarks. The people who sign are executive directors and regional operators. They care about occupancy, about families who call the front desk, and about the Tuesday exercise class showing up on the lobby screen at the right time.

The brand also had to avoid both clichés of the category: the beige, soft-focus retirement brochure, and the cold enterprise dashboard. Urbanetics is a Vancouver tech company selling to people who look after other people. The site needed to feel modern and calm at once.

The approach

Three moves, in order.

01

Open on a place, not a product

The hero is a full-screen film of a city skyline behind a park and a river, with no dark wash over it. The headline Smarter buildings, warmer communities arrives one character at a time, 30 ms apart, each letter sliding in from the left. The subhead, the two buttons and a glass tag reading Websites. Sales. Residents. Displays. fade in behind it in that order, so the four products are named before anyone scrolls.

02

One material for every surface

Every interactive surface, from the navigation bar and secondary button to the product mockups and contact card, uses the same liquid-glass treatment: a 40% black fill, a 4 px blur, and a gradient edge that catches light at the top and bottom. The palette is black, white and one grey. With nothing competing, the film and the four products carry the colour.

03

Show the product with real days in it

Each of the four products gets one panel: a plain-language headline, three checkmarks, and a mockup built in HTML rather than a screenshot. The mockups are filled with real-sounding days, like chair yoga moving to the Garden Room, Elevator B back in service, or a Thursday tour with the Nakamura family. A director should recognise their own Tuesday.

The work

What we built.

The hero

The Urbanetics hero at desktop width: a film of a city skyline behind autumn trees, a footbridge and a river. A glass navigation bar across the top holds the Urbanetics wordmark, four links and a white Book a Demo button. Bottom left, the two-line headline Smarter buildings, warmer communities, a one-line subhead, and Book a Demo and Explore Platform buttons. Bottom right, a glass tag reading Websites. Sales. Residents. Displays.
The film plays with no overlay. Legibility comes from the glass surfaces and the headline's weight, not from darkening the image. On large screens the content splits into two columns anchored to the bottom edge, so the skyline stays open.

In motion

The suite viewer extends the Website Manager into 3D. Utility tabs show daylight, water and energy by room, and the panel on the right keeps the price and a request-a-tour button in reach the whole time.

The platform

Two product panels on black. Website Manager: the headline A website your team can actually keep up to date, three checkmarks, and a glass browser mockup listing suite availability with Studio Garden level Available, One bedroom 4th floor Waitlist and Two bedroom Corner Available. Sales Manager, mirrored: a September pipeline card with bars for Inquiry 42, Tour booked 18, Deposit 7 and Move-in 4, beside the headline Every family, every tour, every follow-up.
The panels alternate sides as you scroll, so the page reads as a conversation rather than a list. The navigation links jump straight to each one, and every panel carries a number from 01 to 04 so a director can quote it on a call.
The resident app mockup: a phone greeting Good morning, Evelyn, with three message cards from the front desk, maintenance and dining, and a white Call the front desk button.
The resident app mockup uses 15 px message text, full-width cards and one large button, because the design brief was written for low vision and hand tremor first.
The display manager mockup: a glass 16:9 screen reading Thursday, 10:24 with the weather, today's activities and the lunch menu, captioned Pushed to 6 screens, Lobby, dining room, fitness studio.
The lobby screen pulls from the same calendar as the app, so the watercolour class only has to be entered once to appear in both.

Book a demo

A strip of four figures: 140+ communities across Canada, 38,000 residents on the app, 1,900 screens managed, and 1 login for all four tools. Below it the Book a Demo section with the headline See your own community in Urbanetics, two buttons, and a glass card listing the Vancouver office address, phone, email and support hours.
The close promises a demo with the prospect's own floor plans loaded, and lists a street address, a phone number and support hours. For a buyer responsible for residents, a local office with someone answering the phone counts for more than another feature.

On a phone

Three phone screens: the hero with the stacked headline, buttons and glass tag; the Resident App panel with its phone mockup; and the Book a Demo section with the office details.
On a phone the navigation keeps the wordmark and the Book a Demo button, the hero stacks into one column, and each product panel places its copy above its mockup. The headline wraps between words, never inside one.

Also delivered

The headline animation is a small React component. It splits the text into lines, the lines into words, and the words into characters, then staggers each character's fade and slide by 30 ms after a 200 ms pause. Words are kept whole so a narrow screen never breaks communities across two lines. Screen readers get the plain sentence through an aria-label.

The site is built in React 18 and TypeScript with Tailwind CSS 3 and Lucide icons, bundled by Vite into one 177 KB HTML file (56 KB compressed). Inter is loaded from Google Fonts, and the hero film streams from a CDN. The full source ships alongside the build. Open the live site →

Results

What the build has to hit.

4

Products, one page, one login

0

Overlays dimming the hero film

56 KB

Compressed size of the site, film excluded

1

Accent colour: white

Urbanetics is a concept project. The company, its contact details, its figures and its customers are fictional. The hero film and the suite viewer film are generated media loaded from an external host.