Common Ground is a digital product that aims to streamline landlord-tenant communication
Research, Service + UX / UI Design
Eileen Huang, Praewa Suntiasvaraporn
This personal project grew out of a photo narrative and research project I completed with Diana Sun and Alex Tsai for a class called Social Interaction Design in Community. Skip to the research project here. It also stemmed from the frustrations I had as a student, first-time tenant and foreigner in a new country. I felt very lost when I had to make important decisions about my housing options within a short period of time and with no guidance.
Through the Social IxD in Community class I delved into the topic of housing, especially within landlord and tenant relationships in housing units that are leased out personally (not through a 3rd party leasing office). Through observational research, quantitative survey results, walk-through tours and personal interviews, I came to a realization that there is an issue with the communication and expectations that landlord and tenants silently set for each other. There is often also a lack of a figure of authority to keep both sides accountable, but also on an equal level of power.
From researching and creating photo narratives, we became were able to visualize and map out the problem space within this issue, and wanted to come up with a better platform for landlords and tenants to communicate - a common ground for understanding and efficiency.
From analyzing the Social IxD Project research, we realized that we were missing perspectives from the landlord's side of things. We reached out to several landlords in the area, ranging from landlords that rented out whole homes to ones that leases out single rooms to a house to create a communal living space for strangers. We then conducted a phone interview with one of the landlords, who shared with us his experience of leasing to both college students and working adults. He has also agreed to test out our first prototype.
With this new information, we started making connections and mapping out the system combining the two perspectives by creating an experience map. We wanted to highlight actions, questions and feelings that both landlords and tenants might have at each point. The center line shows the touchpoints that landlords and tenants have right now, and where our product could fit in to provide an improved experience for both parties.
After laying down the whole process, we went back through each step and marked out the pain points. This gave us a good visual representation of which section of the process problems usually lie.
This mapping exercise really showed how problems really start building up once a tenant moves in, and experiences the new space first-hand. This is often due to a problem in communication, either the lack of, or the mismatched expectations both sides have to their relationship. Many landlords that lease out their houses personally communicate through text, which can be very efficient for communicating emergency messages or short messages, but this can also blur the line of a professional and a casual relationship.
Through this, we decided to create a communication tool that:
- Has a rating system for both landlords and tenants, to keep both accountable for their actions.
- Allows professional exchange of requests to and from landlords and tenants, so that both sides receive reminders for payments or maintenance requests and can easily schedule times to accommodate both of their personal lives.
- Has easy access to certain tools they might need e.g. maintenance services, bank accounts etc. so that they can complete all their tasks for their roles on one application.
- Breaks down complex requests into steps that makes it easier for both sides to understand.
- Fits well within their existing lifestyle, is aware of the other tools they are currently using.
From these goals, we went to the whiteboard to roughly wireframe out the things that tenants and landlords might need:
“There’s still a lot of problems with the house. The floors are good, but the ceilings are a problem. I complained and we fought a good amount... The roof was falling in, so they put a piece drywall on the ceilings. It also rains through the chimney. It brings soot down and it makes a lot of noise.”
- Ben (Tenant)
“If there’s some sort of issue please contact me because I want to know. I don’t want to wait until the problem gets worse because my tenants were scared to tell me about the issues around the house.”
We then went into researching existing systems within the housing realm. Eileen mapped out her experience of using her realty office's maintenance request website, and the site's information architecture:
We moved onto the prototyping phase by creating boards for visual and colour inspiration on Pinterest. We started by mapping out low-fi screens on the whiteboard to get a overall visualization of our sitemap and how it flows. Some considerations we had to make:
- What is the motivation for both the landlord and the renter to use this app?
- What kind of interactions would they feel comfortable to use on this app more than through text, call or email?
- What kind of interactions is better through text/email/call?
- How much of the renter's information is shown to the landlord? and vice versa?
- How do we keep the voting system neutral, so that it does not cause either side to feel resentment to each other?
Current focus points:
- Material design: How each asset lives within the product ecosystem - each page has its own "weight" (lighting, shadows, seams, thickness), so when navigating from page to page, users should be able to see where their previous page went.
- e.g. hamburger menu: slides out from the left side while the page behind it decreases in size and falls behind a dark shadow overlay. Users have a physical visualization in their mind of where the previous page went.
- Intuitive user-flow: this is linked to the importance of material design, but on top of that, hierarchy of texts, buttons, information in general helps guide the users through the application
- Unified interactions and motions: assets should have a cohesive visual language, and that buttons/interactive hotspots should look similar if they have the same functions.
From these focus points and from sketching a few iterations, I decided that card-based interactions would be great for our product. This is so that users can get quick bursts of information to scan through and find what they need quickly, then click in for more detail. This also prevents the screens from being cluttered, and keeps the navigation clean and intuitive.
Creating a style guide
We are also building a style guide as we wireframe, figuring out which shapes, sizes and ratios are the most effective for the tasks that users need to do at each stage. We realized the importance of having a cohesive brand language within our product, and that we would need a physical style guide to refer from in order to increase the efficiency of our collaborative design process.
We first collaborated through Pinterest and Invision, then I created a final colour style guide on InDesign.
Work in progress! :) Next steps...
We are currently working on our first draft of our style guide to lead us to finishing our first high-fi set of screens and prototype.
Apart from finalizing our style guide, we are planning on creating our first physical mock up by importing our Sketch prototypes into Framer to start adding interactions and motion. Once we have this version complete, we are going user test it with the landlord we originally interviewed, a couple of other designers and students who currently live off-campus.
For now, we have our initial high-fi mockup screens up on MarvelApp, and are finalizing them on Sketch, before we move them over to Framer.
A few considerations we are currently making:
- Text fields: think about the different states. Hints to users: use hint text but also autofocusing
- With private data: have information labels to increase the feeling of security for users
- Consider: legibility. Especially if we are considering doing age-responsive design. When filling out text fields, does the box enlarge to fill the screen horizontally?
- Think about a text field’s different states: disabled? On focus? Static?
- Matching keyboard with required text input
- Tappable area for text fields - have enough spacing between each text field
- Autofill? E.g. user’s address according to their geolocation
- Short labels or no labels on buttons?
Research Phase 1
Leasing. Buying. Renting. House. Apartment. On-Campus. Off-Campus. All of these decisions, and simple yet really complicated terms for a sophomore in college, I had to rush through in order to get the best deal I could. I wanted to live near campus, but not through campus housing, I wanted to live in a house, but one with cheap rent, I wanted to have my own room, but have housemates that are my close friends. These were all the things that I considered before signing my lease my upperclassman friend handed to me.
I thought I was already very thorough with my screening, having gone to the house many times and asked my friends who lived there many questions about things I've heard I should ask about homes. However once I started living in my current off-campus housing there were so many problems that I could not have foreseen myself, before signing the lease.
For the Social IxD class, I started off by exploring my own housing unit, and the issues that arose from me and my housemates being first time tenants. Just from this exploration, I realized so many more problems with my lease and living situation. I realized so many new things that I could ask the landlord to do for me, when before I thought I just had to live with it/fix or pay for it myself. From seeing my other classmates' photo essays on this topic, I realized that I was not the only one with these problems.
RESEARch phase 2
We then delved into researching the housing of a "friend of a friend" that lived further away from campus, and a has a completely different housing situation from us, but still within the same age group. My partner for this research phase, Diana, and I chose to interview Ben, a transfer student from Brown who has decided on a housing location through Craigslist, and is now sharing a house with 4 complete strangers.
From this photo narrative, I created a quick mock-up of a built in iOS application that could exist to help remedy tense landlord-tenant situations:
- There needs to be a "mother figure" between a landlord-tenant and tenant-cotenant relationships: someone/something to keep each individual accountable for their actions.
- Better form of communication needed: a formal way to set up reminders and requests, so that they do not seem passive-aggressive / like nagging, making the relationship more awkward than necessary.
- A good way to set the standard/expectation of the relationship: whether both sides come to an agreement to a casual or a professional relationship from the start, or a medium that just sets the relationship for them from the start and not giving users a choice...?
- Organizational tool: something that visually presents reminders/requests/tasks that need to be done in order, and show the status of each item whether they have been read/received, in progress, completed or incomplete.
- Recommendations/tips for new tenants/landlords: tips from people who have been in similar situations. Content will be more relevant to users if it is location-based.