Back to home

Leo — construction and renovation project management app

From the ground up

About Leo

Leo is a web app for managing construction and housing renovation projects that digitizes the entire project lifecycle — preparation, planning, execution, and closeout — connecting clients, contractors, and subcontractors in real time, from team management to invoicing.

Role
Product Designer
Team
2 fullstack developers, Leo's CEO, marketing manager.
Timeline
2022 – Present

My role

  • Redesigned the user interface for the existing web app
  • Designed Leo's native app from scratch
  • Developed Leo's design system and brand language
  • Interviewed users across different roles to identify pain points and translate them into interface solutions

Alexander Rüsseler, GWG Wuppertal

All communication, centralized in one view — nothing lost between clients, contractors, and subcontractors.

Native Leo app

Leo en celular, pestaña Positionen: filtros por oficio, un grupo de posiciones principales y un anexo con comentario
Works without signal, syncs automatically once back online.
Leo en celular, pestaña Bauzeitplan: cronograma de obra por oficio (pintura, electricidad, limpieza, mobiliario, metalistería, carpintería, madera)
Real-time push notifications.
Leo en celular, pestaña Dokumente: botón para subir documentos y lista de archivos con miniatura, autor y fecha
Installed on the home screen. No URLs, no browser.
Leo en celular sin conexión: aviso de modo offline y lista de documentos pendientes de subir
Native camera: Snap and upload progress photos in seconds.

Jaqueline Krott, Strack GmbH

Cleaner forms with structured steps, making it effortless to create a quote or a new project.

Chat Interaction

Vista de iPad de los chats de proyecto de Leo: hilo de mensajes de DachMeister Krause con el teclado abriéndose al escribir una respuesta
Vista de celular de los chats de proyecto de Leo: lista de chats, hilo de mensajes de DachMeister Krause y el teclado abriéndose al escribir una respuesta

Chat, redesigned to flow seamlessly across every platform.

Main Typeface

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

abcdefghijklm

nopqrstuvwxyz

1234567890$@!

Noto Sans

Medium

Noto Sans covers virtually every writing system, giving Leo the flexibility to support more languages later without switching typefaces.

Color Positions
Maler
Sanitär
Klempner
Tischler
Sonstige
Beton
Heizung
Elektro

Clear construction timeline.

Leo banner at the Baumesse Bad Dürkheim 2022 trade fair, reading "Finde mich, mein Name ist Leo" next to the Lean Engineering Organization logo.

Hanging banners: Marketing event

Sistema de diseño de Leo: botón de carga de documentos, tarjetas de archivo con estados de carga/online/offline, escala de colores primaria y secundaria, set de íconos y componente de comentarios

“Awesome! The new interface is consistent, clear, and easy to use.”

Khalid Aouraghe

Design system:

This is part of the design system, built to create harmony across the app every time new user flows are created.

(Say hello)

David Quirós

Product Designer