Ciudapolis: Real Estate management mobile app redesign
Increased task effectiveness by 30% and reduced task completion time by 40%
Role
UX/UI Designer
Industry
Real Estate
Duration
2 months
What is Ciudapolis?
Ciudapolis is a leading real estate franchise group in Peru, known for developing themed residential megaprojects with strong commercial results. With 16+ years of experience, 5 major real estate developments, and 32+ franchise locations across Peru and internationally, Ciudapolis has helped over 4,000 families find housing through its growing ecosystem.
My role
I joined the project as a UX/UI Designer during a key transition phase where Ciudapolis was looking to modernize their mobile platform. The team provided an old version of the app as a reference, but there was no clear UX structure behind it.
Over the course of two months (August – September 2023), I led the redesign of the experience with a strong focus on mobile usability. My main responsibilities included:
Expert evaluation of the current experience
Mapping end-to-end user flows for four distinct roles: agents, CEOs, project managers, and admins
Creating low- and mid-fidelity wireframes to define layout and structure
Designing high-fidelity prototypes in Figma, optimized for mobile
Running usability tests with Ciudapolis’ internal consultants to validate early decisions
Understanding the problem
Kick-off meeting
Everything started with a kick-off meeting where the Ciudapolis team shared an outdated prototype they had been using internally. While the screens existed, the app lacked a clear experience strategy: there were no defined user flows, inconsistent navigation patterns, and several key features buried under confusing layouts.
The team asked me to begin with an expert evaluation of the existing interface to identify usability issues and pain points. Based on that analysis, my role was to propose a new UX structure by mapping user flows per role, followed by wireframes and high-fidelity tested prototypes that would lay the foundation for a clean, scalable redesign.
Pain points
To kick off the redesign, I conducted a heuristic evaluation based on Nielsen’s 10 usability heuristics. This allowed me to quickly identify and prioritize usability problems across the existing screens, especially given the time constraints and the absence of recent user research.
The evaluation revealed multiple critical issues:
1. Overwhelming screens with poor visual hierarchy
Heuristic violated: Aesthetic and minimalist design, Consistency and standards
Most screens were packed with dense data and interface elements, but lacked hierarchy. Everything had the same visual weight, same font size, same color, same positioning, which made it hard for users to quickly scan or know where to focus.
2. Unclear icons and excessive color usage
Heuristic violated: Match between system and real world
Each row in the UI showed 4–5 small action icons with no labels or tooltips. Many icons weren’t intuitive, and the meaning behind each one was unclear, especially for new users. Every icon had a different color, creating visual noise instead of helping guide attention.
3. Cramped buttons and touch targets
Heuristic violated: Error prevention
Action buttons were placed too close together, making it easy to tap the wrong one by mistake, especially on mobile. There was no safe spacing between interactive elements, which violates basic touch design principles and leads to user errors.
4. Hidden listing navigation
Heuristic violated: User control and freedom
The app used basic pagination for navigating long lists, showing only “1 2 3” with no arrows, no “next” or “previous” buttons, and no indication of how many pages or items were available. This made it hard to understand where users were within the list or how far they had to go.
5. Lack of feedback and error prevention
Heuristic violated: Error prevention, Visibility of system status
There was no feedback after key actions like submitting a form or saving a client, leaving users unsure if anything had worked. More critically, there were no confirmation modals before irreversible actions, increasing the risk of accidental errors, especially on mobile.
Designing the solution
Defining the information architecture
Before jumping into screens or flows, I started by building a sitemap for each user role. Each role had access to a different set of features based on their goals and responsibilities. These sitemaps helped me clarify navigation logic and served as the foundation for the entire redesign.
CEO sitemap
Consultant sitemap
Administrator sitemap
Project manager sitemap
General manager sitemap
After organizing the platform into role-specific sitemaps, I moved on to mapping user flows for each core persona.
Each user type had distinct goals and workflows. For example, while a Consultant needed quick access to leads and visit coordination, a CEO was focused on high-level performance tracking and team oversight. Designing flows per role helped ensure that each screen was tailored to each user's needs.
CEO user flows
Consultant user flows
Administrator user flows
Project manager user flows
General manager user flow
Wireframes
Once I had mapped the user flows for each role, I moved into the wireframing phase. Instead of jumping to a single solution, I first explored multiple layout options for key screens, especially the dashboard and the client listing view, which had been pain points in the original app.
I presented several versions of each screen to the Ciudapolis team to gather early feedback and marked the preferred features with a star.
Once we aligned on the direction through early wireframe explorations, I created a set of annotated wireframes for the most critical screens. Each one included detailed notes explaining the rationale behind key design decisions, always grounded in the usability issues identified earlier.
These annotations allowed stakeholders to clearly understand what had changed, why it mattered, and how each improvement addressed real problems such as poor navigation, unclear actions, lack of visual hierarchy, or missing feedback.
Low-fidelity prototype and user testing
After completing the annotated wireframes, I created a low-fidelity clickable prototype in Figma that connected the main screens for the Consultant role. The goal was to test early usability before investing in high-fidelity visuals.
We ran usability tests with 8 real estate consultants who represented the app’s primary user group. Each session followed a guided task scenario, covering common flows.
During testing, I observed task success and task completion time to measure effectiveness and efficiency.
Usability dimension
Metric
Result
Effectiveness
Task success rate
62% of users completed the "Add Client" flow without assistance
Efficiency
Task completion time
1m 40s (above the target benchmark of < 1m)
User testing revealed several friction points that helped refine the design before moving into high-fidelity. One of the most notable issues was the visibility and usability of the "+" button used to add new clients or schedule visits.
While the button was technically present, several users didn’t notice it or found it too small to comfortably tap, especially on mobile. Some even asked, “Where do I go to add someone?” despite it being on-screen.
What is Ciudapolis?
Ciudapolis is a leading real estate franchise group in Peru, known for developing themed residential megaprojects with strong commercial results. With 16+ years of experience, 5 major real estate developments, and 32+ franchise locations across Peru and internationally, Ciudapolis has helped over 4,000 families find housing through its growing ecosystem.
My role
I joined the project as a UX/UI Designer during a key transition phase where Ciudapolis was looking to modernize their mobile platform. The team provided an old version of the app as a reference, but there was no clear UX structure behind it.
Over the course of two months (August – September 2023), I led the redesign of the experience with a strong focus on mobile usability. My main responsibilities included:
Expert evaluation of the current experience
Mapping end-to-end user flows for four distinct roles: agents, CEOs, project managers, and admins
Creating low- and mid-fidelity wireframes to define layout and structure
Designing high-fidelity prototypes in Figma, optimized for mobile
Running usability tests with Ciudapolis’ internal consultants to validate early decisions
Understanding the problem
Kick-off meeting
Everything started with a kick-off meeting where the Ciudapolis team shared an outdated prototype they had been using internally. While the screens existed, the app lacked a clear experience strategy: there were no defined user flows, inconsistent navigation patterns, and several key features buried under confusing layouts.
The team asked me to begin with an expert evaluation of the existing interface to identify usability issues and pain points. Based on that analysis, my role was to propose a new UX structure by mapping user flows per role, followed by wireframes and high-fidelity tested prototypes that would lay the foundation for a clean, scalable redesign.
Pain points
To kick off the redesign, I conducted a heuristic evaluation based on Nielsen’s 10 usability heuristics. This allowed me to quickly identify and prioritize usability problems across the existing screens, especially given the time constraints and the absence of recent user research.
The evaluation revealed multiple critical issues:
1. Overwhelming screens with poor visual hierarchy
Heuristic violated: Aesthetic and minimalist design, Consistency and standards
Most screens were packed with dense data and interface elements, but lacked hierarchy. Everything had the same visual weight, same font size, same color, same positioning, which made it hard for users to quickly scan or know where to focus.
2. Unclear icons and excessive color usage
Heuristic violated: Match between system and real world
Each row in the UI showed 4–5 small action icons with no labels or tooltips. Many icons weren’t intuitive, and the meaning behind each one was unclear, especially for new users. Every icon had a different color, creating visual noise instead of helping guide attention.
3. Cramped buttons and touch targets
Heuristic violated: Error prevention
Action buttons were placed too close together, making it easy to tap the wrong one by mistake, especially on mobile. There was no safe spacing between interactive elements, which violates basic touch design principles and leads to user errors.
4. Hidden listing navigation
Heuristic violated: User control and freedom
The app used basic pagination for navigating long lists, showing only “1 2 3” with no arrows, no “next” or “previous” buttons, and no indication of how many pages or items were available. This made it hard to understand where users were within the list or how far they had to go.
5. Lack of feedback and error prevention
Heuristic violated: Error prevention, Visibility of system status
There was no feedback after key actions like submitting a form or saving a client, leaving users unsure if anything had worked. More critically, there were no confirmation modals before irreversible actions, increasing the risk of accidental errors, especially on mobile.
Designing the solution
Defining the information architecture
Before jumping into screens or flows, I started by building a sitemap for each user role. Each role had access to a different set of features based on their goals and responsibilities. These sitemaps helped me clarify navigation logic and served as the foundation for the entire redesign.
CEO sitemap
Consultant sitemap
Administrator sitemap
Project manager sitemap
General manager sitemap
After organizing the platform into role-specific sitemaps, I moved on to mapping user flows for each core persona.
Each user type had distinct goals and workflows. For example, while a Consultant needed quick access to leads and visit coordination, a CEO was focused on high-level performance tracking and team oversight. Designing flows per role helped ensure that each screen was tailored to each user's needs.
CEO user flows
Consultant user flows
Administrator user flows
Project manager user flows
General manager user flow
Wireframes
Once I had mapped the user flows for each role, I moved into the wireframing phase. Instead of jumping to a single solution, I first explored multiple layout options for key screens, especially the dashboard and the client listing view, which had been pain points in the original app.
I presented several versions of each screen to the Ciudapolis team to gather early feedback and marked the preferred features with a star.
Once we aligned on the direction through early wireframe explorations, I created a set of annotated wireframes for the most critical screens. Each one included detailed notes explaining the rationale behind key design decisions, always grounded in the usability issues identified earlier.
These annotations allowed stakeholders to clearly understand what had changed, why it mattered, and how each improvement addressed real problems such as poor navigation, unclear actions, lack of visual hierarchy, or missing feedback.
Low-fidelity prototype and user testing
After completing the annotated wireframes, I created a low-fidelity clickable prototype in Figma that connected the main screens for the Consultant role. The goal was to test early usability before investing in high-fidelity visuals.
We ran usability tests with 8 real estate consultants who represented the app’s primary user group. Each session followed a guided task scenario, covering common flows.
During testing, I observed task success and task completion time to measure effectiveness and efficiency.
Usability dimension
Metric
Result
Effectiveness
Task success rate
62% of users completed the "Add Client" flow without assistance
Efficiency
Task completion time
1m 40s (above the target benchmark of < 1m)
User testing revealed several friction points that helped refine the design before moving into high-fidelity. One of the most notable issues was the visibility and usability of the "+" button used to add new clients or schedule visits.
While the button was technically present, several users didn’t notice it or found it too small to comfortably tap, especially on mobile. Some even asked, “Where do I go to add someone?” despite it being on-screen.
High-fidelity mockups
With the structure validated through wireframes and user testing, I moved on to the high-fidelity design phase. This step focused on bringing clarity, visual hierarchy, and consistency to the interface, while integrating the improvements identified during testing and user research.
Final UI Overview
Here’s a high-level look at the redesigned Ciudapolis app for consultant's flows. The interface reflects all the improvements driven by research, testing, and stakeholder feedback, from dashboard KPIs to client creation, date filtering, and interaction feedback.
This snapshot showcases:
Visual hierarchy and consistent UI components
Scalable navigation and filters
Improved mobile accessibility and spacing
Clear CTA placement and form readability
Before & After: Client Listing for Consultants
In the original version of the client list (left), several critical issues from the heuristic evaluation and usability testing were clearly visible:
The screen suffered from poor visual hierarchy , all elements had similar visual weight, making it hard to scan.
There were unlabeled icons in multiple colors, violating the match between system and real world principle.
The action buttons were too small and tightly packed, increasing the risk of accidental taps and violating error prevention.
The primary CTA (“+”) lacked visibility and affordance
Pagination was limited to “1 2 3” with no orientation cues, making navigation hard.
In the redesigned version (right), I addressed these issues by:
Applying a cleaner visual hierarchy: user photos, names, and status are visually distinct and aligned for easy scanning
Replacing unclear icons with role-specific labels and icons to improve recognizability
Introducing a prominent, labeled “+ Create Prospect” CTA with sufficient size and contrast
Improving spacing and reducing per-row actions to minimize mis-taps
Redesigning pagination with arrows and item counts
This update directly tackled multiple usability issues while making the interface feel sharp and easier to use.
High-fidelity Prototype
After designing the final screens, I created a high-fidelity prototype for each user role to simulate the full interaction experience and present it to stakeholders. This allowed us to validate the flow logic, transitions, and task completion across different user journeys.
For this case study, I’m showcasing only the Project Manager (PM) flow, which includes key tasks such as navigating projects, editing listings, viewing lots, applying filters, and generating reports.
Other role-based prototypes (e.g. CEO, Consultant, Administrator) are available upon request for private review.
Outcomes
Testing the design
After completing the high-fidelity redesign, I ran a second round of usability testing using Maze with 5 real estate consultants. The goal was to validate improvements made to the most critical user flows, such as viewing the dashboard, adding a new client, and filtering the prospect list.
+30%
User Effectiveness
-40%
Task Completion Time
The results showed clear improvements in both efficiency and success rate:
Task success rate increased from 62% to 92% across main flows
Average task completion time dropped by 40%, with most users completing actions in under 1 minute
All participants found the redesigned version easier to navigate and more intuitive, with comments highlighting clearer labels, better layout, and reduced cognitive effort
These results confirmed that the design changes addressed the original pain points, making the experience smoother, faster, and more aligned with real consultant needs.
Takeaways
Some key lessons I took away:
IA before screens: Starting with sitemaps and flows for each role helped me design a scalable product architecture and guide design decisions
Collaboration drives clarity: Bringing stakeholders into early design decisions (through wireframe comparisons and annotated prototypes) aligned expectations and accelerated iteration.
Small UI details have big UX impact: Elements like button size, icon clarity, and spacing significantly affected user confidence and task performance.
Outcomes
Testing the design
After completing the high-fidelity redesign, I ran a second round of usability testing using Maze with 5 real estate consultants. The goal was to validate improvements made to the most critical user flows, such as viewing the dashboard, adding a new client, and filtering the prospect list.
+30%
User Effectiveness
-40%
Task Completion Time
The results showed clear improvements in both efficiency and success rate:
Task success rate increased from 62% to 92% across main flows
Average task completion time dropped by 40%, with most users completing actions in under 1 minute
All participants found the redesigned version easier to navigate and more intuitive, with comments highlighting clearer labels, better layout, and reduced cognitive effort
These results confirmed that the design changes addressed the original pain points, making the experience smoother, faster, and more aligned with real consultant needs.
Takeaways
Some key lessons I took away:
IA before screens: Starting with sitemaps and flows for each role helped me design a scalable product architecture and guide design decisions
Collaboration drives clarity: Bringing stakeholders into early design decisions (through wireframe comparisons and annotated prototypes) aligned expectations and accelerated iteration.
Small UI details have big UX impact: Elements like button size, icon clarity, and spacing significantly affected user confidence and task performance.
