Agentdrive - Real estate CRM

Agentdrive is a data-driven sales, marketing and advertising platform for the real estate industry. The platform allows users to efficiently manage daily activities, with a streamlined view of all data on deals, as well as simplified reporting.

I was hired as the sole Product Designer to work on the full redesign of the platform with the view to improving the user experience. Within 30 days, I had built bespoke UI components, user flows and finalised screens for the development team. You can read more about the process, the different elements and final results below.

Date: 2017 - 2018

Website: www.agentdrive.com www.agentmile.com

agentdrive_domingowidenpng
 

The challenge

Agentdrive and Agentmile platforms were preparing for an Initial Coing Offering (ICO) fundraiser so it was necessary to prepare a proof of concept, demonstrating what the platforms could look like going forward. As part of the process, it was necessary to build a UI component library as well as finalised screens for all main user flows.

 

The process

With only 30 days to finish the proof of concept, time management was an important factor of the process. It was crucial to prioritise the amount of work but to also ensure I had enough time for a thorough discovery stage. I started by benchmarking competitors and outlining the product strengths to scope out the work, following which I built the experience and design foundations required to rebuild every screen. Having a clear approach to UI elements and interactions from the beginning allowed me to quickly apply those principles to all screens for the proof of concept.

 

Building the foundations


Research & explorations

Despite challenging timelines, it was important for us to ensure there was time for an exploratory stage. This included a thorough review of competitors, identifying the core strengths of the product and sketching out possible solutions.

Even though the existing web experience of Agentdrive was outdated, the product still packed a set of powerful features, which simply needed to be provided to the user in a different way. We restructured the whole experience and introduced a Kanban approach to managing deals, allowing users to establish pipelines for better visibility. Every screen of the web app was redesigned and revisited, including the introduction of a new navigation. A set of new UI components and guidelines was also created along the way to ensure consistency and to lay the foundations for ongoing iterations of the product.

 
Agentdrive explorations - Domingo Widen

Agentdrive explorations - Domingo Widen

 

UI components, Iconography & brand

Following the exploration stage, the next crucial step was to document each design element and create the foundations for the project. This allowed us to establish core elements like colour, iconography, navigation and branding from the very beginning, ensuring the design process was both consistent and agile. Designing and crafting the components from scratch also allowed us to apply atomic design methodology and scale those components to build new ones easily and efficiently.

 
Component library - Agentdrive

Component library - Agentdrive

 

Results & features


Managing client deals

Managing client deals was recognised as the most important feature of Agentdrive. Estate agents need to be able to quickly find key information like names, deal values, dates and people involved in the project. By introducing a Kanban approach and allowing agents to manage each deal as a card, this provided users with full visibility of the end to end process, with the ability to quickly understand the stages required to complete a new deal.

The deals page was designed not only to be aesthetically pleasing, but ultimately easy to understand and use. By surfacing key elements like filtering, adding new deals and pipelines, we allowed estate agents using the product to be more efficient in finding exactly what they needed. Agents can add as many steps in the pipeline as required as well as switch between list and card view, while each step of the pipeline projects the monetary value of the deal to support sales, planning and reporting.

 
Deals dashboard - Domingo Widen

Deals dashboard - Domingo Widen

Deal view - Domingo Widen

Deal view - Domingo Widen

Deal view 2 - Domingo Widen

Deal view 2 - Domingo Widen

 

Single deal view

Opening a deal allows agents to see and manage all the relevant information of the deal in question. The single deal view was designed using a system of modules that display relevant information and allow users to add more information if needed. On the left hand side, agents can find modules for deal details, properties, contacts or agents involved. On the right hand side, agents can easily input information related to the deal, create tasks, send emails or instant messages as well as being able to review past activities within the timeline. The module systems not only allow us to display information easily and consistently but to also customise information depending on the specific agent or company needs.

 
View deal - Domingo Widen

View deal - Domingo Widen

Deal detail view - Domingo WIden

Deal detail view - Domingo WIden

 

Messaging client

One of the core features of the product is the ability to connect to third-party messaging apps, allowing users to read and answer messages within the platform. This is especially useful for estate agents that need to communicate with a wide range of stakeholders in order to close a deal. It was therefore essential for us to design a messaging client that was streamlined and easy to understand. The tabs along the left hand side column allow users to jump between different providers while the tabs along the top show specific pages or chats along with the ability to filter, search and start new conversations. The outcome was not only a messaging client optimised to be easy to understand but flexible enough to provide more functionality if required.

 
Inbox page - Domingo Widen

Inbox page - Domingo Widen

 

Landing pages

When designing the landing page, we prioritised functionality over illustrations or imagery. It was paramount for us to show prospective users the most important features of the product and to showcase the advantages of using the platform to connect directly with users and their needs. The landing pages are ultimately about showcasing the brand with a clean, modern design as well as powerful platform features to drive conversion along the way.

 
Agentdrive landing page - Domingo Widen

Agentdrive landing page - Domingo Widen

Pricing and contact page - Domingo Widen

Pricing and contact page - Domingo Widen

 

Next steps


After 30 days I was able to deliver a proof of concept for Agentdrive to support them with their ICO. All screens, components and assets created helped the engineering team kickstart the development process for the redesign ensuring agile and regular delivery.

Old vs new - Domingo Widen

Old vs new - Domingo Widen

logo.png