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

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.

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.