# Reinventing the home search experience
Startup · 2018 · Lead Designer
Introduced verified profiles, smart applications, and in-app lease flows.

**Methods** : field study, mockups, prototyping

Source : https://albancarmet.com/case-study/designing-a-housing-platform

## Problem

The MVP only supported basic actions — search, chat, and book viewings — and suffered from UX weaknesses, limited trust mechanisms, and heavy, time-consuming processes for both housing seekers and landlords/agents. Additional constraints included limited financial resources, evolving requirements, and design system inconsistencies as new features were rapidly introduced.

## Context

• 🏆 Best Mobile App — 2018 AppGratis Awards — recognised for product design across the Canadian rental market
• 📱 5 major features designed or redesigned — across a dual-sided platform for housing seekers and landlords/agents
• 🤝 Full rental journey covered — from listing search to lease signature and rent payment, end to end
• 🔄 Design system extended — maintained across the full feature set despite a startup-paced shipping schedule
Liv is a housing finder platform dedicated to the rental market. From looking at listings, booking viewings to signing a lease, and paying rent, it covers the entire user journey of the housing seeker.
The idea of launching a platform dedicated to the rental housing search came from the Machobear owner. He owns a real estate company and the studio developing the platform. When I joined Machobear, “Liv” was not available to the public yet. It was just an iOS app that was close to being released on the App Store. At that time the app was an advanced MVP. Users were only able to search for apartments to rent, chat, and arrange a viewing through the app.
As Machobear was a startup with limited funding, I was the only UX/UI designer. Working under tight time constraints — and with no budget for usability testing — design feedback came primarily from the product manager and real estate agents. This is an important constraint to keep in mind throughout this case study: every design decision was made without formal user validation.
When I joined Machobear, there was already a design system in place. However as I had to redesign some existing flows, a lot of components and atomic design elements became obsolete. Even if I really enjoyed updating the design system, I ended up having some UX inconsistencies across the application. I wish I had enough time to maintain the design system and create/edit new design flows.

## Process

It is unclear to me how they defined their MVP but I know they worked closely with the estate company to define the platform specifications. Before joining Machobear I worked on my own on a similar project named Elly. The goal of this mobile application was to enhance the room/roommate search experience. I found the pain points I discovered during my research were also applicable to the housing seekers. Here the ones that probably nourished the creation of their MVP:
- Lack of trust, there are a lot of scams on listing platforms such as Craigslist. On the landlord/agent side it is also about finding a solvent and respectful tenant.
- Time-consuming, between scams, non updated ads (apartments not available anymore), drafting emails to contact landlords/agents, doing follow-ups, and schedule viewings, it takes a lot of time to find an apartment. On the landlord/agent side, it is the same. Searching and filtering potential tenants take also a lot of time.
Similarly to what I did, their mobile application has 2 entry points:

## Solution

I had the chance to design or redesign a large part of the application, including the 2 pillars of the MVP. Getting back to the MVP presentation, here are the 2 pillars Machobear focused on to improve housing/tenant search:
Be effective
Similar to the Tinder dating application, housings for rent and housing seekers are presented as cards. This way, users can either have a preview of the essential information about the housing or the housing seeker information without doing an extra tap. From there users can also:
- initiate a chat
- add cards to favorites (to check those later)
- dismiss cards to never see those again
This “dismiss” feature aims to offer a more efficient search. The next time, the user will open the app, only new listings / new housing seeker profiles will be displayed. To go further, housing seekers and landlords/agents can apply various filters to refine even more their search.
Build trust
Similar to resumes, housing seekers and landlords/agents have to create a profile. Those profiles aim to reassure about user identities and backgrounds. Housing seekers and landlords/agents can become “verified”. Displayed aside their name, the verified icon means they provided to Liv an ID guaranteeing their identity. To continue building trust, users (both sides) have to provide a short biography about themselves.
If this first “layer” of trust is common to housing seekers and landlords/agents some others are specifics.
Real estate agents also have to provide extra details:
- company information (name and address)
- business license
- job started date
- number of housings managed
On the housing seeker side more information is required:
- astrological sign
- smoker or non-smoker
- pets owner or not
- current address
- emergency contact information
- Liv score (credit score + job information)
- job-related documents
- references (employment and landlord)
- insurance information
- roommate information (if applicable)
Housing seeker profiles are also a huge time saver as users don't have to reintroduce themselves every time they start chatting with landlords/agents. They also save time when they apply for housing as most of the information required is already part of their profile. On the other end, landlords/agents can pre-filter candidates by adding a minimum profile completion rule. They can for example set a 50% minimum profile completion before allowing housing seekers to start chatting with them.
Enriching product features
Their MVP at that time was one illustration of how they wanted to enhance the housing search experience. However, Machobear knew they would need to create more added value to recruit users. This is why they already had in mind to develop new features to enrich the product. See what were the existing features and upcoming ones at that time:
In the following examples, I will focus on a few features I designed or redesigned. Those reflect my thinking and highlight the interactions between the housing seekers' side and the landlord/agent side. Even if I did not have the chance to run a proper research phase, my design has been influenced by some rationales I had identified in my Elly project.
Design problem 1 — Listing creation
Who we design for: Landlords / real estate agents
### Design we wanted to improve
This is the previous listing creation flow I designed. At that time business requirements for listings creation were:
- list apartment or house only
- add/edit housing photos
- housing details and features
- housing location
- lease terms
- landlord/agent profile picture
### What metric will we use to measure the impact?
Increase number of listings created
### Design solution
New features added:
- townhouse listing creation
- rent a part of a housing (e.g. 2nd house floor only)
- security deposit
- strata information (model of property ownership)
- new housing rules (smoking, host guests)
- extra terms (parking lot, storage, plus custom terms)
### Design notes — Balance the design
Before integrating new features, the listing creation process was already quite heavy. I did not want to overload the user with even more steps to create a listing. To avoid that, I started this redesign by mapping out the listing creation steps. Here were the steps users had to go through to create a listing in the original version, and how I reorganized them in the redesign.
This flow was one for landlords. Real estate managers had to go through an additional screen where they can select which real estate agent will manage a listing. This selection happened between steps 4 and 5. For context, real estate managers have admin rights on the platform. They can create agent profiles and listings. From there they can attribute listings to agents and promote other agents as admin.
On top of that, some steps can require extra efforts if the landlord/agent needs to add some rules. For example, in step 2, it is possible to set pets policy by defining how many cats, dogs are authorized. The user can also add custom rules for other pets.
When I thought about this redesign I had to think about those « worst-case scenarios » where a real estate manager needs to add a lot of details about a listing. Adding new features to this flow forced me to reconsider every step and information required. The main takeaway of my flow analysis was that step 4 (landlord/agent profile upload) had to be removed and reused for another purpose. While I was defining the new information architecture, I had to be mindful of the quantity of information I asked users within every step. I tried balancing the efforts between steps to avoid discouraging them to create a listing. This is what the new flow looks like after the redesign:
### Facilitate navigation
As creating a listing requires filling out a lot of information, users won't necessarily do it in one go. That's why I introduced a “Save and exit” button. After filling some information, the user can save its progress and finish creating a listing later. To make the navigation even more obvious, I also decided to create a sticky navigation bar at the bottom of the screen. This way, whatever the height of the screen, the button to move to the next step is always visible.
### Facilitate data input
As the user already has a lot of data to enter during the listing creation, I wanted to reduce the input level effort whenever it was possible. That's what I did with the housing address input. From the “Get started” screen, when the user taps on the “add address” it opens a search screen. As the user starts inputting the address, formatted addresses results appear. If the address matches a building which has already been inputted by another landlord/agent, a photo of it will also be displayed. Once the address found, tapping on it will close the search engine to bring back the user to the get started page. At this point, the housing address has been automatically broken down into the address different fields (street address, city, postal code...). If the address selected was a building, it will also automatically include the building name.
### Provide feedback
To make the level effort more transparent it was also important to provide user feedback alongside its listing creation journey. This is why I introduced a progress bar at the top part of the screen. It helps the user evaluating how long the creation process will be.
To avoid handling multiple error messaging I also chose to create button states on each step of the process. This gives users a simple visual hint — users understand that at least a piece of information is missing at this step.
On the photo uploader component, I also introduced contextual messaging to let users know what is the minimum of photos to upload to publish their listing. Similarly, during the photos selection, I included in checkboxes a number, indicating the position the photo will have in the carousel. As a reminder, those photos will be displayed at the top part of the listing.
### Improve photos reorganization
### 1. The original design
When I worked on the original design, here were the requirements of this photos reorganize component:
- add and delete photos
- see full-size photos
- reorganize photos
In my original design, I followed a horizontal approach. My thinking was to horizontally display photos as the user browses them by swiping left or right. The top part displays in full-size a photo. Right under, thumbnails represent all the photos uploaded by the user. Tapping on a thumbnail displays it full-size at the top of the screen.
To reorganize photos, I introduced a drag and drop gesture. The user had to tap and hold a thumbnail to drag and drop it in the desired position. The thumbnail on the far left represents the cover photo — the default photo displayed on a listing. To delete a photo the user has to tap first on the thumbnail then on the trash icon on the bottom right. To add photos the user taps on the “Add” button at the bottom right of the screen.
### 2. The redesign
As I had to integrate new features in the listing creation flow, I also wanted to come up with a better design solution. Even if browsing photos horizontally made sense as it followed the carousel approach, I found it less convenient than scrolling vertically. I also thought the photo deletion process could be improved as the delete icon does not stand up much over the full-size photo.
With those elements in mind, I took the opposite direction trying to simplify the design and interactions. I chose to remove the full-size photo at the top and just have a single column of large photos. For each of them, I added on the left and right side icons. The trash bin icon is to delete the photo while the “3 stack bars” one indicates a draggable interaction. The top photo refers to the cover one.
To me, this redesign feels more intuitive and uses the screen space better. Users can see bigger and more photos without having to scroll, and the delete action is more discoverable — no contrast issue with the trash icon anymore.
### Improve listing readability
### 1. Improve contrasts and interactions
One thing that stood out when I looked at the existing listing template was the lack of visibility of the rent price. As the previous design direction was to display the price over the housing visual, the contrast was not really good. The idea of the previous designer was to have a transparent dark overlay on the housing visual.
When I started to work on the redesign, I kept the housing visual as-is, as it created a simplistic and immersive feeling. I removed the original dark overlay and simply used a subtle gradient from the top to the middle of the visual. I also reinforced the contrast by adding a transparent overlay with dark blurry touches behind the call to action.
Regarding the call to action to access the photo reorganizer, I finally chose to move it right under the visual. Following the redesign of this component, the “edit” button became two calls to action: “Add photos” and “Reorder”. Using a commonly used design pattern, I created over the photo a pagination system represented by dots.
### 2. Improve the information architecture
As I had to add way more details on the new listing template, I chose to reorganize the way information is broken down. I split the page into 2 parts. The first one is dedicated to the key information: rental type (entire housing, a part of the housing…), rental price, key features (# of bedrooms, bathrooms, housing size…), and landlord/agent profile. To make this content easy to read I create a visual hierarchy by playing with font size, colors, and background treatment. As this top part has a black and white color I made the rent price bigger to catch the attention. Close by the price, I used our pink accent color to surface the rental type. Right under the rent price, I display housing key features by creating a two by two grid of tags. Lastly, I surfaced the content dedicated to the listing creator (landlord/agent). In the previous design, the user did not have a visual clue indicating the profile picture of the landlord/agent was a call to action. To make that clear, I added the landlord/agent name as well as a « read bio » call to action. Tapping on this link drives the user to landlord/agent profiles.
The second part of the template is focused on details (lease, amenities, and housing rules). To structure this content, I created a « Lease details » section. It regroups the existing and new lease details I had to accommodate in this revamped version. To keep this section as condensed and consistent as possible I decided on purposed « hide » extra details behind « view details » call to action. Tapping on those links drives the user to detailed views. My intent was to find a balance allowing users to quickly scan high-level lease information without pushing amenities details to down below in the template. Regarding the amenities, I also chose to restructure this section to accommodate more details. That's why I created subsections: features included, utilities included, utilities non included. The idea of clearly mentioning non included utilities came from real agent feedback. Some early testers complained about not knowing clearly if the rent included or not some utilities. Lastly, I regrouped the transit information close by the map indicating the listing address. My goal was to make the connection between the address and the transit time clearer. To do so, I created a timeline starting from the listing location to the various commuting options available.
Design problem 2 — Housing seeker application
Who we design for: Housing seekers
As the application feature was suggested in some old designs, the flow had not been created at that time. I started designing this feature from scratch.
Constraints:
- Follow and refine an existing design system
- Reuse some existing navigation patterns
What metric: Increase user retention on the platform by adding a feature which is part of the housing seeker user journey
Design solution — Key requirements:
- use the housing seeker profile to fill out most of the application requirements
- include an “offer more” feature allowing to offer more money for a listing. As some listings receive a lot of applicants, the goal was to help housing seekers to increase their chances to convince landlords/agents to rent them a listing.
### Design notes — Facilitate navigation
Listings and user profiles are quite rich in terms of data. To offer a pleasant experience and let users quickly scan content, I introduced expandable lists. This system helps to get an idea of the housing seeker search criteria. With this approach, the user can access quicker the sections without having to go through a long list before.
To facilitate navigation I also reused a bottom sticky bar on listings screens. This bar includes the Chat, Add to favorites, and Dismiss buttons. At the opposite, on the “Review details” screen I did not use a bottom sticky bar — at this point in the process, I wanted to make sure the user will scroll the page to review its application details.
### Provide feedback
In addition to button states indicating whether or not they are active or not, I introduced a visual timeline at the top of the screen. Similarly to the progress bar I mentioned in the listing creation flow, the goal was to let users know where they are in the application process. I visually treated this indicator differently as the application process is way shorter. To me, using words versus a progress bar gives clearer feedback to users.
### Build trust
As I mentioned in the “Product core features” section, building trust is one of the key pillars of the Liv experience. To do so, we developed our own trust label named “Liv score”. This score is calculated in points based on the user's credit score and profession. Scores are broken down in 4 categories: Poor, Average, Very Good, Excellent. Displayed as a card, this score stands in the housing seeker profile. Each scoring category is associated with a specific color. Each score comes with a specific recommendation to provide guidance to landlords/agents and housing seekers.
Design problem 3 — Landlord/agent lease creation
Who we design for: Landlords / real estate agents
When I worked on this problem, the application did not offer a feature allowing landlords/agents to create and send the lease to housing seekers. I designed a solution pretty much from scratch.
Constraints:
- Follow and refine an existing design system
- Create a system to ensure communication between landlords/agents and housing seekers whenever a lease is sent out
What metric: Increase user retention on the platform by adding a feature which is part of the landlord/agent user journey
Design solution — Key requirements:
- reuse housing seeker application information and listing data to facilitate the lease creation
- allow the addition of extra terms and addendums in the lease
- add a “send lease” feature (sent to the housing seeker)
### Design notes — Facilitate navigation
As the lease creation regroups a lot of information I chose to break those through tabs. To make this navigation more visible and provide guidance to first times users I also created coach marks. Those explain at a high level what the user should review and add to the lease before previewing it.
### Facilitate communication
Getting notified whenever the landlord/agent or housing seeker sent you a message, lease or payment is crucial. It gives both parts more chances to not miss opportunities or deadlines. In this example, I highlighted one example of out of app notification communicating an important milestone to the landlord.
Design problem 4 — Housing seeker lease signature
Who we design for: Housing seekers
When I worked on this problem, the application did not offer a feature allowing housing seekers to sign a lease. I designed a solution pretty much from scratch.
Constraints:
- Follow and refine an existing design system
- Create a system to ensure communication between landlords/agents and housing seekers whenever a lease is sent out
What metric: Increase user retention on the platform by adding a feature which is part of the housing seeker user journey
Design solution — Key requirements:
- signing by typing or drawing
- add a “send lease” feature (sent to the landlord/agent)
### Design notes — Facilitate navigation
To facilitate vertical scrolling and reach faster the bottom of the screen, I chose to create expandable boxes. Those include data related to terms. Even if terms are all equally important, some are more crucial than others to review. That's why some are expanded and some others not. As examples, “lease terms” or “rent details” boxes are expanded while “pet policy” or “parking information” are collapsed.
### Provide communication
In addition to the “out of app notifications” I showcased in design problem 3, I created “in-app notifications”. It aims the same objective to improve communication and ensure users won't miss important messages or milestones. In this “housing seeker – lease signature” process I chose to start my flow by an in-app notification. The housing seeker could also access it via an “out of app notification” or an activity card.
Design problem 5 — Landlord/agent lease signature
Who we design for: Landlords / real estate agents
When I worked on this problem, the application did not offer a feature allowing landlords/agents to sign a lease. I designed a solution pretty much from scratch.
Constraints:
- Follow and refine an existing design system
- Create a system to ensure communication between landlords/agents and housing seekers whenever the lease is signed and sent out
What metric: Increase user retention on the platform by adding a feature which is part of the landlord/agent user journey
Design solution — Key requirements:
- signing by typing or drawing
- add a “send lease” feature (sent to the housing seeker)
### Facilitate communication
When I joined Machobear the component I am about to describe was already there. Landlords/agents and housing seekers both have access to a section named “Activity”. As previously described, it acts as a chat section where you could also see the milestones related to the interactions you had with the landlords/agents or housing seekers. Those milestones are all actions (activities) you can run through the application: book a viewing, send an application, sign a lease, request/send a payment, request/end a tenancy... Those milestones are represented as cards and let users view a document or start a process such as signing a lease. Having those milestones represented as cards help both parts to quickly identify and access important information. Landlords/agents and housing seekers can also access documents generated by those milestones in dedicated dashboards.

## Results

• 🏆 Best Mobile App — 2018 AppGratis Awards — the app was recognised for its design across the Canadian rental market.
• 📱 5 major features designed or redesigned — across a dual-sided platform covering both housing seekers and landlords/agents.
• 🔄 Design system extended — maintained across the full feature set despite a startup-paced shipping schedule.
• 🤝 Full rental journey covered — from listing search to lease signature and rent payment, end to end.
This project was a natural continuation of my Elly research, and it gave me a rare opportunity: designing a complete two-sided platform from near-scratch, covering every step of the housing journey. Collaborating with illustrators also made a real difference — their work helped break the inherently administrative feel of the flows and bring a human touch to the experience.
My takeaways
Designing without user validation sharpens your judgment — but creates blind spots.
Working without usability tests forced me to rely on real estate agent feedback and my own design intuition. That's a useful skill to develop, but it also means some decisions were never challenged. In hindsight, a few components — particularly the listing activity section — could have been simplified if I'd had the chance to observe real users interact with them.
You can't ship features and maintain a design system at the same pace.
Trying to do both simultaneously is a losing battle in a resource-constrained startup. The visual inconsistencies that crept into the platform weren't a failure of attention — they were the predictable result of an impossible workload. The lesson: a design system needs dedicated time, not just good intentions. If I had to do it again, I'd push to timebox design system maintenance as a standalone deliverable, not a parallel task.

## Impact

Award-winning Experience