The creation of a customized CRM to compile previous works.
Project overview
The client, a company specializing in diagnosing and solving humidity-related issues in various properties, has successfully completed hundreds of projects over the past 20 years. However, they lack a centralized program to compile and showcase these projects effectively.
Without a cohesive system to organize and visualize their past work, the company struggles to present their expertise to potential clients, limiting their ability to attract new business and showcase their extensive experience.
The goal is creating a CRM with a map to show all completed projects that let them filter by location, type of humidity, and client type. This map will help them keep track of their work and serve as a useful tool to impress potential clients.
USER STORY
«As a project manager, I want to have a CRM that displays all completed projects on a geographical map, so that I can easily visualize our past work, and showcase our expertise to potential clients. This will help me attract new business and demonstrate our extensive experience in solving humidity issues.»
Understanding the needs and defining the content
The project has two distinct parts: one is the project portfolio: a map with pins that indicate the location of the projects and access to the files with further details of each project; and the other one is the internal management, access to the database to add, modify and delete projects.
Map of proyects (visible URL):
- Map with pins (floating windows when hover)
- Humidity pathology filters
- Humidity location filters
- Province filters
- Client type filters
Internal management (access with passwords):
- List of records
- Filters
- Search
- Add record
- Edit record
- Delete record
- Add images
INFORMATION ARQUITECTURE
I started by creating the Information Architecture (IA) that structured the platform’s content. The IA was divided in the two sections
SCKETCHES
My college and I created these sketches to quickly capture the layout and map interactions. These sketches helped to visualize the user flow for both the map feature and the internal management system before start designing.
MID FIDELITY WIREFRAMES
I create wireframes and then wireflows to show how users would navigate through different tasks, ensuring a seamless user journey. These helped me focus on layout, navigation flow, and content placement..
VISUAL REFERENCES
With the wireframes and flows approved, I moved to the design phase, ensuring that the user interface was both functional and in line with the brand. The focus was on simplicity, easy navigation, and providing clear visual feedback for users.
I took inspiration from Mobbin and Dribbble, focusing on clean, modern interfaces.
Creating the user interface
The map displays all project locations across Spain. When users hover over a pin, a floating window appears, showing an image of the project, its name, and the type of moisture problem. Clicking this window leads to a detailed project page (read only permissions).
PROYECTS PORFOLIO
INTERNAL MANAGEMENT
The internal management interface allows the company to register new projects. User (workers from the company) can input text information and add project images which will appears as new pins on the map.
UI KIT
The UI kit used the brand’s colors to maintain consistency, and Poppins font was chosen for its clean and modern appearance. Key components like buttons, form fields, and map pins were custom-made to fit the client’s requirements and the CRM’s functionality.
Using the prototype to learn and improve
After the prototype was developed, we ran usability tests with the stakeholders and their team. Feedback was positive, but we made adjustments.
These are some thing I had to iterate after the hand off
- During the developing, projects had to be fully registered before images could be added, so I adjusted this by splitting the process into two steps and created a new screen for adding images.
- I didn´t design feedback notification for the user so I was asked to do it by the developers
Conclusions
Overall, this project was a great learning experience, helping me improve my communication with developers and the client was very pleased with the final product.