2022Bloc Solutions

Simplifying the landlord-tenant relationship with 100% electronic leases.

I spent a year designing and improving the UX and UI at Bloc Solutions, helping shape new features and update the platform’s overall design.

  • Industry

    Service as a software

  • Team

    2 designers, 1 PM

  • Website

    Visit website

Expanding Bloc Solutions’ design system.
Overview

Symplifying rental management since 2016.

Bloc.Solutions is a Québec-based SaaS platform simplifying rental cycles through tenant search, e-leases, rent reminders, payments, credit checks, and communication all in one single platform.

The company was the first to introduce electronic leases in Quebec's real-estate market, allowing property managers to save time on a daily basis.


Feature

Designing flexible payment management for diverse landlord needs.

During my time at Bloc Solutions, I worked on the design of a new payment tracking feature. This project was led over 6 months, in collaboration with Vincent (lead designer) and Julien (product owner and PM).

Our main challenge was finding creative and intuitive ways to integrate the feature to the rest of the app without disrupting legacy workflows. Landlords needed visibility into payment status, late fees, and tenant communication all while managing multiple properties.

We ran dozens of iterations, leveraging Figma's prototyping capabilities to test flows and edge cases before committing to development. The result was a flexible, intuitive system that became one of Bloc Solutions' core features.

[Fig.1] Payment tracking feature designed for Bloc Solutions.
[Fig.1] Payment tracking feature designed for Bloc Solutions.

Design System

Contributing to Bloc Solution's design system and brand.

I developed several components over the span of my year with Bloc Solutions that were later implemented in the app, including a new button and tag system. All of our components were created following the Atomic Design method.

We chose this approach for its flexibility and scalability. I strongly believe that a design system should be conceived as a toolbox or language, not as a strict framework that dictates designs. Using this approach allowed our design team to be more efficient, consistent and improved our handoff processes with the dev team.

[Fig.2] Example of a button component built for Bloc Solutions.
[Fig.2] Example of a button component built for Bloc Solutions.

Documentation

Closing the gap between design and development.

Despite having a well-established design system in Figma, none of our components were documented. This caused issues, especially when handing off designs to developers. Since Figma can be challenging for non-designers, much information was lost, necessitating extensive verification each time a new feature was released. The lack of common documentation led to inconsistent components and design updates.

Before leaving the company, I took the initiative to create comprehensive documentation for our components and design principles using Zeroheight. This documentation includes usage rules for interface colors and component styles, providing guidelines and resources to ensure knowledge transfer among team members and simplifying developers' work.

[Fig.3] Overview of the documentation created for Bloc Solutions.
[Fig.3] Overview of the documentation created for Bloc Solutions.
blocsolutions