Hellohousing

Product Design

2020

Context

Renting a property can be time-consuming. Well, at least in Germany, where landlords waste a few hours on this process every week. And it's all done manually, which leads to mistakes and misunderstandings.

The tenants aren't happy either. They can't see how their bills are calculated, which is a big deal if you're sharing a house with strangers.

Fortunately, that's where Hellohousing comes in — to automate the process and bring transparency into the tenant–landlord relationship.

I had about two weeks to turn this pitch into a state-of-the-art prototype that's ready for the development handoff and customer demo.

Hellohousing dashboard. There’s a vertical menu on the left side and in the rest of the screen there are cards with information about the property, receipts, utilities, maters, and units.

Everything's in place

Say "tschüss!" to chaotic spreadsheets and unencrypted notes. With Hellohousing, everything about your properties and tenants lives in a single place. It sounds basic, but it's already such a relief for landlords.

A modal to add a property. It contains the option to upload a preview photo and fill in the basic information about the property.

Hellohousing's users own no more than a few properties so the information architecture is fairly simple.

An expanded property dropdown in the global navigation.

Familiar but better

At least once a year, landlords have to record the meter readings and calculate the utility bills for all their tenants.

The first step of the utility billing process. It contains a full-width table with all the property cost types. Each cost type has some details like total cost and allocation key automatically assigned by the system, with the option to override them.

For these tasks, I used design patterns from tools they're familiar with so it's easy to find a way around.

The second step of the utility billing process. It contains a full-width table with a summary of all the costs filtered by tenants.

Show me the receipts

Don't try to make sense out of dozens of PDFs yourself — upload them and watch how Hellohousing generates invoices for you.

A modal to add a receipt. It contains the option to upload a file and fill in the data that’s on the receipt.
The “Receipts” subpage that contains a list of all the receipts with the option to upload a new one.

Friendly with mobile

We didn't have the luxury of creating a native mobile app, but that wasn't an excuse to not make Hellohousing accessible on-the-go.

3 different mobile views of the product.

Ready for whatever's next

To make Hellohousing easy to scale in the future, I put together a library of basic components and design tokens.

A table that shows the type scale.

It also allowed the project's stakeholders to jam on ideas themselves, and laid out the source of truth for the development team.

A group of all the button variants.

Credits

Shout-out to the people who also worked on this project.

Johannes Kegel

Branding

Branding

Branding

Project Management

Project Management

Project Management