Boys Island: Premium Real Estate at your fingertips
Boys Island is a property marketplace targeting the Nigerian real estate market. The platform connects property buyers, sellers, and agents, creating a seamless experience for listing, searching, and managing real estate properties. With a focus on trust, accessibility, and a user-friendly interface, Boys Island aims to simplify the complexities of real estate while enhancing visibility and credibility for its users.
Working on this project was lots of fun as it helped me build my data lifecycle management, as lots of data is being generated during the apps usage and they need to be collected, stored, transported and presented in a user friendly way - never overloading the user with too much info or presenting too little that they find it difficult to make decisions.
Timeline
6 weeks
Client
Total Quality Services
Date
July, 2024
Industry
Real Estate
Visit Live Site
Providing access to real estate for locals
Project Discovery
I was approached by Total Quality Services on behalf of one of their stakeholders who needed a custom real estate solution for their business. We had a discovery call soon where they gave a list of requirements.
On the client side:
A landing page where properties would be displayed
A property details page with contact information
A blog page for latest articles to help with SEO
A property listing page
An account creation feature that enables clients to favorite properties, message agents and view property history
On the agent side:
Login / Sign up / Account creation
An interface where the agent can view inquiries
A feature that enables them to create and manage property listings
A message feature to communicate with clients
Subscription service for agents who use the platform
On the admin side:
Account creation
Dashboard where admin can view important and relevant metrics
Property listing creation and management
Client and Agent management
Message feature to communicate with agents and users
Reports and tracking (for subscriptions)
CMS for the blog section and testimonial section on the main website
After confirming the requirements, I created a Product Requirements Document outlining all the requirements, the sub-requirements of each feature, flows needed and separate project document a where I could monitor the project's progress.
Design Approach
I started by ideating. I browsed Pinterest and Mobbin for inspiration and created a moodboard. I used that to begin working on the style guide to ensure consistency across the product.
I chose Raleway as the main typeface not just because of its high legibility but it also injects personality in the design by default. I also created a palette based on the existing brand colors.
Typography and Colors
On to the main thing… Client Acquisition
Starting on the client side, I got to working on the landing page. I decided to build the hero section in a way that immediately builds trust in users and helps them to understand and find exactly what they are looking for within seconds of getting on the website.
Hero section
The property cards give users the essential information they need to decide whether they are interested in a property or not. They also have an alternate button which prompts users to create an account to store their favorite properties. This is one way to turn visitors into customers quickly.
Property Card
I also included a CTA to allow visitors to become agents as well. If approved, they can promote their properties using our platform for a small monthly fee.
Sell With Us
After the landing page I worked on the property details page which gives the details of the property and the contact form to reach out directly to the agent.
Property Details Page
Contact Page
Then I worked on the Blog List, Blog Details, Service List, Service Details, Account Creation and User Profile pages.
Account Creation Modal
Agents do it better..
I started working on the Agent Dashboard. The goal was to make it as easy to use as possible while still making it fully functional. Here are some of my favorite screens from the agent dashboard:
Dashboard
This shows at a glance the properties that were listed (sold, rent), their property views, incoming lead types, property information and messages.
Agent Dashboard
Add to Listings
This is a simple form that enables the agent to create a new listing (for rent or for sale). It contains a preview feature that allows you to preview how the details you enter will look on the live site.
Add to Listings
Subscriptions Page
This allows the agent to view their current subscription tier, payment method and invoice history.
Subscriptions Page
Subscription Modals
These are modals I created for the subscription page to enable the agent manage their payment methods, and subscription plans.
Subscription Modals
Administrative duties don't have to be hard
Finally, I worked on the admin dashboard for the app owner to be able to manage everything that goes on in the app, from users, to subscriptions, properties and messages. Here are some of my favorite screens from the Admin Dashboard:
Dashboard
This allows the administrator to view the total revenue, number of clients and agents using the product, number of properties listed, recent activity and messages.
Admin Dashboard
Property List (Empty State)
This is the empty state for the property list on the app. It shows when there are no properties are listed by the admin or agents. It features an illustration and a simple paragraph that explains what is meant to be displayed there and an action button to begin listing properties.
Property List Empty State
Testimonials
The stakeholder requested for a custom CMS for testimonials and it was my first time designing one. It features a searchable, tabled, and filterable list of testimonials and a simple form that the admin uses to create a new testimonial that will be displayed on the landing page. Like the property listing, it also contains a preview button. Glad to say it turned out nice.
Add Testimonial
Footer
I really loved the design of the footer I created for Boys Island Real Estate. Beautiful and functional like the entire app.
Footer
Reflections
Not a linear process
I worked with a Senior Flutter Dev, Samson, to bring the design to life. During the process, lots of changes were made and we had 1 month of vigorous testing to make sure the logic and data flow within the app was tight. At the end of the development period we presented the product to the client and they were really happy with what we built.
Impact
The client continues to make sales using the product, to make land sales and service clients in Nigeria, UK and all over the world.
Visit Live Site
Looking to build a product that works, scales and makes you money? I'm your best bet.
Let's Connect 👋
