Table of content

Table of content

UI Design
Interaction Design

Designing an internal data management system for a real estate investment company

ProDevs x FlipListRole(s): UI Design, Interaction Design 2022

FlipList is a real estate investment company, based in Florida. The goal of this project was to develop a software that enabled employees of the organization to manage properties and deals made on properties. To achieve this, I worked with the product manager on the project and the client to understand the requirements and internal processes. At the end of the project, we were able to develop a product that was suitable for the company's processes.

Understanding the product

Getting a clear understanding of the product and its requirements was crucial, making it the first thing I needed to do. To achieve this, I started with a literature review of documents on the product idea, which consisted of the problem they were facing and what they want to achieve with the product. To further understand the problem, I undertook stakeholder interviews, asking questions that gave me insight into their day-to-day processes and why they face the problems they are facing.

At the end of these activities, I gained a clear understanding of what was needed to develop a successful solution to their problems.

Problem statement

Insights from the performed literature review and stakeholder interviews showed that there are three main activities performed by employees of the company: gathering data on properties, cleaning the data, and storing the data for future use.

Simplified internal process

The problems they faced lay in the process of standardizing the collected data to make it suitable for their internal processes. This was primarily due to the fact that the data was gotten from different sources with different data structures. Though I proposed further study on their internal processes by observing how things are done, the budget and timeline for the project did not allow for such.

The proposed solution

Following Jacob Nielsen’s 10 Usability Heuristics and the identified needs and requirements of the client, I came up with a solution that involved the following features.

  1. Allow users to import new or existing data.
  2. Automatically map columns with system defined columns while also allowing users manually perform this action.
  3. Allow users to manage data. i.e., perform actions like update, delete, view, group/regroup, and edit.
  4. Allow users to export selected data sets.

Designing the solution

I went straight into developing high-fidelity interactive prototypes, given that I already had a clear path to the solution and that the time frame for the project did not permit early testing. I developed the prototypes in phases (modules) and delivered each phase for vetting.

Importing and formatting external data sets

A list of properties from different counties, cities, states, and regions is gotten from multiple sources. This means the data will most definitely not follow the same structure. With this in mind, I designed the data import module in a way that allows users to map corresponding spreadsheet columns with system columns.

Though I successfully developed a design that worked, I had two iterations, of which the first (shown below) didn’t meet the exact needs of the users after testing.

First iteration of data import interaction

The primary issue with the first iteration was that it was visually complex, making it a bit difficult for users to go through the flow. Also, it did not efficiently handle the upload of multiple data sets (spreadsheets) alongside some accessibility and brand-related issues.

Borrowing the concept of “Separation of concerns” from software engineering, I decided to use modals for each phase of the process, which made the process easier to go through. This decision also allowed the feature to be accessed from any part of the product, making it more dynamic than the first iteration.

Final iteration of data import interaction

Managing the data

The primary data object of this product is the property object. Every other object like lists to tags, lead sources, statuses, markets, etc. depended on the property data object.

Being able to perform tasks like adding/removing property records to/from a list, adding/removing tags to/from property records, deleting a property record, filtering a list of records, exporting a list of property records, and viewing and updating the details of a property’s record were crucial to the process. Therefore, I designed the interactions of these tasks in a way that made it as easy as possible to perform them for single and multiple data sets.

Interactions for deleting data
Interactions for filtering and exporting data

Other UI shots

Handing off to the engineers

The engineers on this project were conversant with Figma’s style library system, therefore, I created the different styles with specifications for use. The style library covered typography, colors, and shadow styles used across the entire application. Components used throughout the product were a variant of material design 3 for web, which made it easier to manage and save time.

Conclusion

The fact that it was my first time getting involved with the real estate world, made it quite a challenge understanding how things worked. However, thanks to the product manager and the internet, I was able to build a substantial amount of knowledge to successfully pull me through the project.

Like what you read?

I'll be excited to hear how I can contribute to the sucess of your product and your overall business goals.

Contact me

Other Case Studies

See all case studies

Reducing the communication gap between HMOs and Health Service Providers in Nigeria

Read case study

Designing Nigeria’s first P2P car rental mobile application

Read case study

Brisk: Improving the user experience of a school management application

Read case study