PropertyCard | Web Design

PropertyCard Redesign



• Project Timeline: 7 Months
• Role: Product Designer

About

Problem

Property management can pose as a daunting and overwhelming responsibility for landlords and tenants alike. A need arises for a platform that streamlines the process, making it more efficient and effortless for everyone involved. The challenge lies in simplifying such a complex task to the extent that even individuals with limited technological proficiency can utilize the platform effectively. The design of PropertyCard before I joined was harsh, a huge learning curve, and required a certain level of technical ability to be even able to use it.

The Goal

To create an intuitive, visually appealing, and user-centric digital environment that effectively addresses the needs and pain points of property management professionals.

My Role

As the product designer my role was to overhaul the current system and streamline it so that it would be easy to learn, easy to set up, and easy to maintain. To do that, I first set out to understand what PropertyCard wanted to achieve, what was the purpose to create such a platform and how have they implemented it and why does it need an overhaul.

Responsibilities

In my role as a Product Designer, I led user-centric research, shaped visual design, and crafted prototypes through an iterative process. I prioritized accessibility, usability, and aesthetics, while also advocating for an exceptional user experience.

Main Screens, in App

Profile Section

User Property Sections

User Like Properties Section

Map Area

User Calendar Section

Discovery

User Research

One of the main ways I understood what users need from this platform is by user interviews. I interviewed home owners that just wanted a way to display their properties as well as manage the monthly/yearly services in an efficient way. I also used market data to learn what properties needed to display and the constant expenses on them that needed to be highlighted on the platform. The age range of home owners and land lords was between 40-75 which highlighted that I needed to create a platform that needed almost zero technical ability to manage or our users will be confused. By understanding the users, as well as the market data I was provided, I was able to create a user experience that meets all of their needs and achieve the companies goal.

Findings:

We viewed that despite the age range, the user was able to properly navigate through the app with little to no problems. We focused on creating an intuitive user experience, allowing even those with limited tech experience to easily manage their properties. Using Figma, I designed a comprehensive and cohesive design system that complements the platform's functionality, ensuring a consistent visual identity and a seamless user experience. Through this system, we incorporated typography, color, and iconography to create a visually appealing and user-friendly interface that encourages engagement and participation from both landlords and tenants.

Pain Points:

• High Learning Curve:
  • Users new to the platform may have found it challenging to quickly grasp the intricacies of navigating and utilizing PropertyCard's features and tools, leading to frustration and delays in effectively using the platform for their property management needs.
• Difficulty in Property Analysis:
  • Users engaged in property analysis or investment decisions may have found it difficult to access comprehensive property data, market trends, and comparables, hindering their ability to make informed choices.
• Complex Onboarding Process:
  • New users might have encountered difficulties in understanding the platform's features and functionalities during the onboarding process, resulting in longer learning curves and potentially discouraging adoption.
• Lack of Real-time Updates:
  • Users may have felt frustrated by the absence of real-time updates on property-related activities, transactions, or changes, which could impact their decision-making process and responsiveness.

Design

Wireframes:



PropertyCard, Property Details, Personal Time, and Profile Cards

Designs:



Design System:

To create PropertyCard I used the Atomic Design methodology, I began by creating the components and building upwards. By the time I had finished, The design system had reached well over 200 custom made components that all interact with the software cohesively.

Stickersheet



Font

DM Sans offers excellent readability on both desktop and mobile devices, making it a great choice for a platform that needs to be accessible to a wide range of users.

Color

Yellow, black, and white can create a bold, modern, and sophisticated brand identity. Yellow represents energy, optimism, and friendliness while black represents power, sophistication, and elegance. White can add balance and simplicity to the design. Together, these colors can create a strong visual impact that is needed for a property management platform.

More Images











Reflection

The development of PropertyCard was a challenging but a rewarding experience. I was able to create a platform that simplified property management for landlords and tenants. Creating a design system that was complex and had around 200 components, including buttons, tags, links, and more. Creating with a responsive first mentality taught me that you start small and go bigger, and with auto layout, making components responsive was a huge step in the right direction. The art of minimal design really struck with me, because through minimal design, users of any age and technical ability are able to use the platform with little to no problems, unlike other designs which require a certain degree of technical ability.

Thank you for reading!

PropertyCard has undergone a redesign after my time there, the designs displayed here are my works and does not represent the current final product.