Roof

Making it easy and efficient to search and sign home rentals based on the user's preferences without being scammed

Roof

Making it easy and efficient to search and sign home rentals based on the user's preferences without being scammed

Blog

B

Why I completely redesigned my portfolio website - Usability in Web Design.

Neuel Sam

1 Min Read, 15 July 2020

Problem Space

People searching for renting a room, an apartment or a house go through so many channels (online and in-person) filled with fraudulent listings or irrelevant out of date data. The fear of being scammed and disbelief in the facilities listed online makes it hard to sign an agreement for a place to live, let alone search for it.

Current Landscape

Platforms such as Kijiji, Facebook Marketplace, and Craigslist are geared more towards selling consumer items. They do not offer consumer protection and users have a hard time checking if the listing is a fraudulent one. According to the Washington Post, more than 43 percent of renters found listings that seem fraudulent and more than 5 million have been scammed.

Project Goal

How Might We help renters minimize their exposure to fraudulent rental ads online in order to feel more confident in the process of renting?

Solution

A native mobile application that allows users to search, sign, and pay for home rentals. A native app helps in securing the process of creating a listing. Examples are location addition only when GPS is enabled and adding pictures locked to In-App Camera. Other solutions include flagging of spam listings and making the lease agreement digital.

Ultimate Impact

The ultimate impact of the project should be to make it easy and efficient to find a place to live based on the user's preferences without being scammed. The design intervention will help users in finding and signing a house that they like without having to put too much strain. The design should enhance visibility to users and cut down on fraud.

Design Process

Roof was my capstone project at BrainStation UX Design Diploma Course, Spring 2020 Cohort. Throughout the 10 weeks of the program, the Double Diamond Design Approach was followed. The design thinking process was split up into 4 phases: Starting with research, moving on to synthesis, ideation, testing, and ending with finalized designs.

Double Diamond Approach

Project Assumptions

  • Customer's need is to easily find a place to stay when moving to a new city without having a fear of being scammed.

  • These needs can be solved by setting up constraints for listing and making listings verifiable.

  • My initial users will be people moving to a new place in search of places to rent.

  • The value of the product will be to find a place to rent and sign an agreement without being scammed.

  • Additional benefits for the user are to terminate/cancel the agreement in case of fraud and Insurance.

  • The majority of my users will be acquired through word of mouth and marketing.

  • Make money by advertising, prepaid notifications, and premium listings.

  • Primary Competition in the marketplace is from Kijiji, Facebook marketplace, Craigslist.

  • Will Beat them due to fraud prevention and integration.

  • The biggest risk is the fear of being scammed and fraudulent people listing properties for rent.

  • Will solve this through strict checks and constraints for posting.

Project Constraints

  • Fraud prevention in location mapping

  • Enforcing requirements when publishing listings

  • How to integrate legal agreements to prevent fraud

  • What would diverse people prefer to engage in renting

  • How to make fraud prevention an integral part

Part 1

Research

Secondary Research was conducted to gain insights into the home renting space and information about the problems that homeowners trying to find tenants and people in rent search face. From the articles published in journals and magazines, it was evident that the home rental space is plagued with spams and fraudulent listings.

43 %

of renters found listings that seem fraudulent

5.2

million renters have lost money from rental fraud

6.4 %

of renters lost money in a rental scam

Primary Research

Primary Research was conducted for qualitative and quantitative data. Quantitative data from a user survey was used to validate the problem space and get an understanding of user preferences in home rental applications. Qualitative data from user interviews were used to inform how users perceived renting and how the analog renting process worked. This was instrumental in understanding the renter's behaviors, problems, and their needs.

User Survey

Anonymous survey hosted on qualtrics platform was used to collect data from people who have experience with renting and rent search. 16 participants older than 21 years took part in the survey.

User Interviews

3 Participants were interviewed for qualitative data. All the participants in the user interviews were between 18-30 years old and had experienced rental scams and frauds in 2019. The average interview duration was 20 minutes.

Part 2

Synthesis

Primary and secondary research conducted provides loads of data that are unusable without proper synthesis. The synthesis steps vary according to the research method used to collect data and according to the number of participants. Empathy map and deriving insights from keywords are common synthesis methods.

Deriving Patterns and Insights

  1. Due to COVID-19, the interviews were conducted through Zoom and recorded for analysis. Recorded audio is converted to text using otter.ai.

  2. Keywords from the transcribed interview are used to create an empathy map to clearly define user thinking, user needs, and the user wants.

  3. The keywords are then used to synthesize research findings by separating them into categories and then finding a common insight and HMW question.

1

2

3

Research Insights

  1. Renters want promises to be fulfilled before signing the lease and these to be included in terms and conditions.

  2. Renters have a hard time figuring out whom to contact for help.

  3. Renters prefer having a human touch if possible. But non-housing websites do not provide this because of cheap just a room type of renting.

  4. Landlords keep advance deposit conditions and renters lose money if the lease is broken if mutually agreed terms are not fulfilled.

  5. Renters need a structured and honest platform where they can choose without having fear of false information.

  6. Renters are not informed about things they should know.

  7. Renters should know how they can prevent being scammed into signing a place they don’t like.

  8. Renters have to go through a lot of checks before being sure that a listing is not a spam.

User Persona

Based on the insights from the user interviews, a primary and a secondary user persona were created. These personas worked as points of focus for the segment of customers I needed to keep in mind.  These two personas convey traits, behaviors, personal goals, frustrations, pain points, direct quotes, and motivations of the potential users I interviewed.

Experience Map

An experience map was created to gain a deeper understanding of what users are seeing, thinking, and feeling through their journey to renting a place. Developing an experience map for the primary persona helped me in thinking about opportunities that can be incorporated into the feature set to help the user. The experience map helped in developing empathy for the user and addressing the pain points at a macro level.

Deducing the opportunity to make a difference

Based on the experience map, the opportunity selected for design intervention was search, sign, and pay for a home rental. Many of the applications that exist in this space have a search feature, but lack sign and paying for rentals. Based on a quick competitor analysis, an approach that would tackle spam and fraudulent listing problems from both the consumer and business end was chosen as the way forward.

Part 3

Develop

Synthesized research insights help in the ideation process of a solution. I began by noting down ideas to tackle the problem. The ideation phase is the most enjoyable part of product design as you get to draw out the solution and think over it multiple times, iterating each time a new idea pops up. The first step was to create user stories and tasks.

User Stories

User stories are created to find scenarios that the user would find himself engaging in while using the application. It helps in easily noting down the needs and wants of the user in a particular problem space. The user story is the start to finish of interaction from the user with the application for a single task. Multiple tasks will have multiple user stories and will help in keeping the application as focussed as possible to what the user needs.

User Task Priorities

Tasks are derived from user stories. These tasks will be performed by the user in the app.

These user tasks are then split into 4 Epics:

  • Document Transparency

  • Information on listings

  • Report Scam

  • Ask for Help

Standout Epic : Document Transparency

The main task flow is enabling transparency of documents in renting. Higher transparency in the process will lead to lower spam listings and less fraud.

Task Flow Diagram

A task flow diagram is drawn out based on the standout epic. The user story here is to see all documents so that the user can check if the listing is a fraudulent one or not. The task flow diagram lists out tasks to be performed by the user, system states in between, and screen needed for the task.

Task

The core task is to request documents of the listing from the landlord. The landlord will check if the tenant has a preferred profile and will also communicate via the inbuilt messaging platform. The landlord will accept the request to view documents and then the potential tenant would be able to view documents of the listing.

Sketches

Sketching out variations of screens for the chosen task flow was the next step. These sketches went through many iterations. Sketches aid in scribbling down design ideas easily and effectively.

Sketch Version 1

Sketch Version 2

Keeping on Iterating

I brainstormed ideas within our BrainStation student group and mentors on ideas for the project. The main outcome was that no idea is a bad idea and the best ideas came when we were thinking without borders. Some of the ideas I wished to implement but not a part of the current prototype are the VR home check experience.

Part 4
Deliver

From the finished sketches for the project, I moved into creating the wireframes for level 1 user testing. The feedback from level 1 user testing was used to create a version 2 wireframe prototype. User testing was done again and the feedback was incorporated into version 3. The feedback received from user testing after version 3 was reviewed and implemented as per the Effort and Impact of the change.

Wireframe Version 1

Prototype Link: Click Here

Usability Testing Version 1

5 user tests with 4 tasks to be completed by the users. The tasks were straight forward and were meant to test navigation from the home page to different screens and bottom bar.

Task completion

Most of the users in the test completed the 4 tasks easily and offered feedback which was incorporated into version 2 of the wireframe prototype. The usability testing confirmed the card navigation in the home page works and the bottom navigation bar needed some modifications.

V1 to V2 Improvements

Improvements implemented after version 1 usability test

  1. Profile icon in the home page increased in size

  2. Alert card is left aligned for better legibility

  3. Search function enabled in home page

  4. Bottom Nav bar layout adjusted to remove more and add an interested section

  1. Lease and General Information screens changed to mobile-first Views

  2. Next removed from individual documents screen

  3. Wording change for Lease Agreement to Residential tenancy agreement and Terms and Conditions to General Information

Wireframe Version 2

Prototype Link: Click Here

Usability Testing Version 2

Usability testing of version 2 included new tasks to be performed by 5 users

Task completion

Most of the users in the test completed the 5 tasks easily and offered feedback which was incorporated into version 3 of the wireframe prototype.

V2 to V3 Improvements

Improvements implemented after version 2 usability test

  1. Interested changed to saved in the bottom navigation bar

  2. Typed in characters changed to black from grey in search page

  1. Alert updated for showing message after signing of the agreement

  2. Icon added to requests card

  1. ‘Sign Here’ added to prompt user to sign agreement

Learning, Iterating and Repeating

After the navigation from the home page to different screens and the bottom navigation bar was set in stone, the next phase was to change the wireframes to high fidelity designs. A mood board was created for the application based on pictures and fonts related to homes. The mood board was then used with adobe color extractor to find accessible color palettes for the application and for branding.

Mood Board

The Moodboard reflects a homely feel which is a warm and pleasant style with yellow as the main color. But this color palette does not pass WCAG guidelines. Adobe Color Extractor was used to find color palettes from the mood board that was WCAG compatible. This color palette was used both in branding and for applying visual design.

WCAG Compatible Color Palette

Adobe Color Extractor was used to find this color palettes from the mood board which was WCAG compatible. This color palette was used both in branding and for applying visual design.

Logo

The logo was chosen based on user likes. Users were asked to choose from 16 logos and the chosen logo was then iterated upon and changed to a digital format. Logo 13 received most likes. Based on quick iterations, the logo was changed into a digital format with the double 'o' acting as a smiley face. The smiley face is also used in branding and in the cards on the home screen. The logo also looks like specs which means that you are looking out for spammers and the arc represents a roof.

Color Injected Logo

Styleguide

Design handbook for branding style, icons, typography, spacing, and colors used in the Roof App. The design system was built in sketch and I am slowly converting it to a library so that I can reuse elements.

Web & Mobile Marketing Website

As part of the responsive marketing website design, I created the Roof websites from which users can log in and have a full experience except signing up and paying rentals.

High Fidelity Design

Prototype Link: Click Here

What's Next?

It was great to design and own a product and its experience. 10 weeks is a limited time to have for a product that has more than 100 screens in its full glory. An onboarding experience is currently lacking. I would also like to show how users experience transit and navigation in-app. The messaging feature also needs to be designed and tested to create an optimal user experience. There are some parts of the application that still needs fleshing out in experience where users would find it difficult to understand and navigate. I would also like to make the library design of the app universal and create more custom icons so that users have a great experience.

Key Learnings

  1. The user is always right!

  2. Research can make or break a product, The biggest challenge I faced is how to prevent fraud and scam listings from the application.

  3. User interviews reveal a lot of unexpected information and make it possible to adapt the product to users’ needs. Most of the obvious things that were included didn’t make sense to the users on how to use them.

  4. Usability tests are surprising. Some of the complicated interactions can be done away with sneaky tricks.

Visual Design

My Role

Product Designer

Deliverables

Timeline

Minimum viable product (iOS)

10 Weeks

Web & Mobile Marketing Website

Web Prototype Link: Click Here

Mobile Prototype Link: Click Here