Banani - Redefining the Property Search Experience with Intuitive Design

Project Overview:

The Banani App was developed with the aim of bridging the gap between landlords and tenants through an intuitive and feature-rich mobile platform. The app was designed to streamline key property management tasks like listing properties, managing rental payments, handling maintenance requests, and reserving amenities, while optimizing the overall rental experience for all users.

Target Users:

• Guest Users: Individuals looking to rent properties who can browse available listings.
• Tenants: Users who can manage rental payments, submit maintenance requests, book amenities, and more.
• Landlords: Property owners who can list properties for rent, manage tenants, monitor property performance, and receive payments.

Challenges:

During the design phase, we faced several significant challenges:

1. Limited Screen Real Estate: As mobile devices have limited screen space, we had to balance a multitude of requested features with a clean, intuitive interface. The challenge was ensuring that essential functionalities were both accessible and easy to use without overwhelming the user.
2. Diverse User Base: Many users (especially tenants and landlords) were not particularly tech-savvy, which meant that the app needed to present major actions upfront and make the navigation straightforward. We had to prioritize simplicity and clarity.
3. Feature Overload: The client wanted to incorporate a wide range of features—each with its own set of requirements. This led to the challenge of prioritizing functionality and avoiding feature bloat while ensuring the app still provided sufficient value to both tenants and landlords.

Design Process:

1. Research & Discovery

The first step was to immerse ourselves in the world of property management and rental apps. We conducted thorough market research and competitive analysis to understand the industry landscape and identify opportunities for innovation. This research involved analyzing top-performing real estate apps and studying common user complaints and pain points.

Competitive Analysis: We closely examined the features and design strategies of leading rental platforms. We looked for gaps where we could introduce new functionalities or improve on existing ones. For instance, while many apps provided basic property browsing and rent payment capabilities, few integrated maintenance requests and amenity reservations in a seamless way.

A comprehensive competitive analysis was done and here are the results:

From this analysis, we identified the following key insights:

• There was often a lack of user-friendly dashboards for landlords to track financials and property performance.
• Tenants frequently complained about the difficulty of submitting maintenance requests or tracking their payment history.
• Property listings often felt generic and lacked rich, engaging visuals or interactive features.

User Interviews: To better understand user needs, we conducted interviews with both tenants and landlords. This helped us gain insights into their daily routines and pain points. Tenants expressed frustration with managing multiple apps for different tasks (rent payments, maintenance requests, etc.), while landlords struggled with keeping track of property performance across multiple tenants.

2. Persona Creation

With a clearer understanding of user needs, we developed detailed personas that represented key user groups. These personas became guiding references throughout the design process to ensure we remained focused on the target audience’s goals and challenges.

Persona Examples:

• Tenant Persona:
• Name: Sarah, 28, Digital Marketing Professional
• Pain Points: Difficulty tracking payments, limited communication with landlords, inconvenience of managing maintenance requests through email or phone.
• Goals: Simplify payment management, request maintenance quickly, reserve amenities like parking or laundry.
• Landlord Persona:
• Name: John, 45, Property Investor
• Pain Points: Difficulty tracking income from multiple properties, managing tenant requests, dealing with overdue rent payments.
• Goals: Improve tenant relations, streamline property management tasks, gain insights into property performance with minimal effort.

3. Information Architecture (IA) & Task Flows

With the personas in mind, we focused on the Information Architecture (IA), which involved organizing the content and functionality of the app in a way that made sense to users. We mapped out the structure of the app, ensuring that users could easily find and access core features.

Task Flows: We designed task flows for both tenants and landlords to visualize how they would navigate the app to complete their main tasks. We identified primary tasks, such as:

• For tenants:
• Browsing and searching for available properties.
• Paying rent.
• Submitting maintenance requests.
• Reserving amenities (like parking spots).
• For landlords:
• Listing a new property for rent.
• Managing tenants (viewing tenant details, reviewing payments, etc.).
• Tracking property performance (financial reports, occupancy rates, etc.).

By simplifying these tasks into clear, manageable steps, we were able to optimize the flow for minimal cognitive load, ensuring users could easily complete their goals.

4. Wireframing & Prototyping

Once the IA and task flows were defined, we moved on to creating low-fidelity wireframes to represent the app’s structure and functionality. This phase allowed us to experiment with layouts and interactions without getting bogged down in visual details.

Key Wireframe Design Considerations:

• Mobile-First Approach: Since the app was designed for mobile, we optimized layouts to maximize screen real estate. We prioritized large touch targets, minimized text, and used icons and visual cues for quick comprehension.
• Clear Call-to-Actions (CTAs): All critical actions—such as paying rent, submitting a maintenance request, or listing a property—were made prominent and easy to access from the main screens.
• Contextual Information: We ensured that each screen provided only the necessary information, preventing visual clutter. For example, on the tenant dashboard, we used card-based layouts to separate different tasks (e.g., rent payment, maintenance requests) to make navigation intuitive.

Wireframes (Examples):

• Tenant Dashboard: A simple, clean layout with key actions such as "Pay Rent," "Request Maintenance," and "View Lease."
• Landlord Dashboard: A more detailed dashboard displaying property performance, financials, and tenant information, presented through easy-to-understand charts and graphs.

5. Visual Design & Branding

Once wireframes were validated through internal reviews and early-stage user testing, we moved into high-fidelity visual design. Here, we focused on establishing a brand identity that felt fresh, modern, and professional.

Design Principles:

• Simplicity and Clarity: We adopted a minimalist design aesthetic to reduce cognitive overload. This meant using ample white space, clear typography, and a consistent color scheme.
• Branding: We developed a color palette that conveyed trustworthiness and professionalism, with a focus on soothing, muted tones complemented by vibrant accents for CTAs.
• Consistency: We ensured that all design elements—buttons, icons, and navigation components—were consistent across the app to foster familiarity and ease of use.

Final Design Screens:

• Tenant Home Screen: A simple overview of upcoming rent payments, a list of available properties, and a quick link to request maintenance.
• Landlord Dashboard: A visually rich page displaying key performance metrics (rental income, maintenance requests, tenant feedback) in easy-to-read charts and graphs.

6. Usability Testing & Iteration

With the high-fidelity designs in hand, we conducted usability testing with real users from both tenant and landlord personas. These tests were critical in identifying any usability issues and fine-tuning the app’s interactions.

Testing Insights:

• Tenants appreciated the easy access to rent payment history but suggested clearer instructions on how to submit maintenance requests.
• Landlords liked the property performance metrics but requested more customization options for viewing financial data.

We incorporated feedback from these sessions into subsequent iterations, adjusting the flow, visuals, and interaction design to ensure a more seamless user experience.

7. Final Handoff & Launch

Once the final designs were approved, we worked closely with the development team to ensure a smooth handoff. This involved creating detailed design specifications, providing assets (icons, images, etc.), and conducting design QA during the development phase to maintain visual consistency.

Conclusion:

Designing the Banani App was an exciting challenge that required balancing the needs of different user groups while ensuring an intuitive and functional design. Through rigorous research, user feedback, and iterative design processes, we created a product that was both feature-rich and easy to use.

The app now empowers landlords to manage properties more efficiently and tenants to enjoy a more seamless rental experience. The final product received positive feedback from the client and users alike, and the project successfully met its goals: reducing operational complexity for landlords and providing tenants with the tools they need to manage their rental experience effectively.

By applying a user-centered design approach and staying focused on simplicity, we were able to create a professional, user-friendly product that stands out in the competitive real estate market.