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.
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.
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.
- Allow users to import new or existing data.
- Automatically map columns with system defined columns while also allowing users manually perform this action.
- Allow users to manage data. i.e., perform actions like update, delete, view, group/regroup, and edit.
- 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.
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.
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.
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.
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.