UX Case Study: Urban Master Planning collaboration platform


Minha Vitoria: a collaborative platform to share suggestions for Urban Master Planning intended to review and regulate the urban aspects of Vitoria city — Brazil, for the next ten years.

Target: All residents of voting age.

Client: Vitoria City Hall (ES. Brazil. (Top 5 ‘Connected Smart Cities’).

Tools: Pen & Paper, Post-it Notes, Axure, Mind Meister, Skype, Photoshop and Illustrator.

Timeline: 9 weeks


How to stimulate the interest of city dwellers in sending suggestions online, if in person the number of participants involved is just people more engaged in the community? 🤔


  1. Review and regulate the urban aspects of the city for the next ten years.
  2. Ensure that, when sending contributions to the city, the population's interest as a whole prevails over individual or group interests.
  3. Encourage participation interactively.
  4. Generate essential insights into the improvements of the city.

Roles and Responsabilities

Professionals involved in this collaboration platform:

  • UX Designer Manager (My role)
  • UX Researcher (My role)
  • User Interface Designer
  • Project Manager
  • Account Manager
  • Web Developer
  • Copywriter

We work collaboratively with professionals in Brazil 🇧🇷 and Portugal 🇵🇹, with daily remote touchpoints.

As a User Experience Designer Manager, I led the project from end to end with a Project Manager, who formed the bridge between the creative and technical teams.

The UX case study has been published on Observatory of Public Sector Innovation — OPSI, a European forum based in Paris, France. 🇫🇷

OPSI is a global reference, sharing the most outstanding public sector innovation initiatives, working with governments to understand and encourage new approaches to solving complex societal problems, helping them explore new possibilities.

Design Process

We decided to follow IDEO’s human-centred Design and Lean UX Design Thinking Process to make sure that design decisions are supported by feedback.

  1. Empathize
  2. Define
  3. Ideate
  4. Prototype
  5. Validate (Repeat 4)


Understanding users’ emotions: an exercise in empathy

Considering the audience is very heterogeneous (after all, we’re talking about more than 300 thousand people), we understood that creating many personas could create a bias in research. Looking from another perspective, we decided to identify people’s feelings about their contributions to the city.

What does the population expect from the city?

Before starting the platform, several informational interviews aimed to understand the different points of view and the reality of each community in the city, divided into nine administrative areas.

Urban Master Planning: Regional meetings — Vitória, Brazil

It’s necessary to occupy spaces rationally, in order to preserve the quality of life and services offered in the neighborhoods, as the streets are narrow.


Thus, we looked for the Positive Emotional Granularity Cards* methodology to understand the residents' emotions since the common point was the city's improvement and the same usability context.

Positive Emotional Granularity Cards. Delft Institute of Positive Design

Concerning the chosen key activities and involved goals, we discussed what kind of positive emotions would be desirable to evoke and how they can support users’ activities by browsing through the cards.

Through the research, we identified that within the Aspiration, Interest and Guarantee clusters, users had three value propositions to interact with the platform.

Positive Emotional Granularity Map: ‘Desire,’ ‘Inspiration,’ and ‘Trust’ were the emotions identified.
User value propositions to interact with the platform
  1. Desire: The incentive to live in a better city is what every resident wants. With that in mind, our role was to encourage the activity to generate interest in the real desire for change and contribution.
  2. Inspiration: Looking from another point of view or having a simple idea that could transform a community. Working with inspiration was an interesting point identified, as we believe that inspiration could arise with collaborative participation.
  3. Reliance: Sending a suggestion involves putting energy into something the user believes in it. Our role then was to make the process transparent so that the city dweller would not lose confidence in contributing to his idea.

Therefore, we consider that ease of use and conscious thinking would be the first items for the project's good result.

Stakeholders Interview

In a meeting with the stakeholders responsible for different areas of the City of Vitória, we updated the general into specific topics and easy assimilation to facilitate the theme's choice and, consequently, the suggestion's sending.

After several meetings, we defined 5 central topics for the platform:

  1. Environment and Landscape.
  2. Economic Development and Tourism.
  3. Use, land occupation and urban infrastructure.
  4. Housing and mobility.
  5. Democratic management.

From now on, the challenge was to consider the research trying to answer the users’ desires.


Problem statement

Pain point 1: Dwellers aren’t encouraged to participate in public decisions because they are annoying and politically biased issues (in general, all over the country);

Pain point 2: The theme is broad, technical and lacks knowledge of the general population.

Feedback from face-to-face meetings: what have we learned?

The engaged population and community leaders are the most frequent participants in the Urban Master Plan when we consider face-to-face meetings.
Thus, listening to this audience's feedback, we identified that many give suggestions, but others only support raising their hands when they agree or disagree.

After this, we identified an opportunity to work on pain point 1: disinterest in the 'public issue'.


In a meeting with the entire project team, we looked for ideas to reduce the delay and make the online contribution dynamic.

After some ideas and possible ways, we thought to use login with social media to see their publications and that of their friends. Besides, we consider creating an interactive visual map and contributing to the city's development by browsing the timeline with suggestions by themes. Also, the dweller who does not feel able to send a tip could support one already submitted.

This would be an opportunity for the city dweller to explore the proposals and choose the most related to their expectations.


Site Map

For the development of the platform, I created an organization chart with all the needs, highlighting in yellow some comments related to external actions (which depended on technology or the official website of the city of Vitória).

Site map: details of all stages of the platform

Task flow

We considered two registration options for the platform's launch: log in with Facebook (since it is the social network with the most significant number of users in the city) and log in with email.

Task flow: User registration

Login with Facebook
By checking the city of residence, the user was activated in the system.

Login with email
After checking the city of Vitória and the neighbourhood, the user was allowed to share their ideas. The user had two ways to contribute: by sending a suggestion or supporting one or more opinions posted on the platform.

Suggestion submission
When developing the task flow, we consider the login, the minimum number of characters (10) and the forwarding of the suggestion for approval before being published on the platform.

Task flow: User submitting a suggestion

Support sending
The user can support a shared idea or suggestion, giving it more relevance.

Task flow: User supporting a suggestion

Lo-Fi Sketches

After requirements gathering, we’ve turned those requirements into sketches.

We also noted some technical questions about requirements and feasibilities during the development of the low fidelity sketches.

Minha Vitória: Low-fidelity sketches (Task “Send a suggestion”)

We decided to highlight the suggestion button to put Wireframe to test the applicability for choosing the theme, testing the dropdown menu and checkbox.

Minha Vitória: Low-fidelity sketch (Google Maps API Integration)

Our goal was to create a friendly layout that would meet all the project’s prerequisites. Therefore, in the draft stage, we discussed the platform's various functionalities before prototyping low-fidelity wireframes.


Lo-fi Wireframes

After designed the navigation flows, we continued with the project developing wireframes.

Using a call to action like “Contribute” and “Send your suggestion” clarifies to the city dweller that his participation was meaningful. On the home page, we defined the social and email login buttons and the menu and frequently asked questions since the topic was technical and issues could arise for users, a pain point identified in the project.

Home screen wireframe

In the Dashboard development, we thought about including key performance indicators in the official report after participation, such as topics most covered by a region, most commented subjects and primary needs.

Wireframe of the administrative screen “Dashboard.”

The highlight section of the site was the Suggestion section: we discussed that it was important not only to send the suggestion but also to show which local neighbourhood it referred to and the related topic.

Besides, the user’s public identification and support and sharing options have been included.

Wireframe of the “Suggestions” screen

To validate the platform, we initially made a navigable wireframe to test the functionality with users.

Browsable Wireframe (Axure)

Browsable Low-fidelity Wireframe using Axure

Style guide

We defined distinct colours to differentiate each of the five central topics of the project, allowing the user to identify the areas of interest visually in the interactive map.

Vitória, one of the top 5 Brazilian cities, encourages innovation for the entire population.

When we integrate with Google Maps, the intention of showing pins around the city, according to the neighbourhood and the theme that the user sent the suggestion.

With this information in mind, we developed the platform's layout, which used the city's background.

User Interface (Hi-fi mockups)

Home Screen: “Minha Vitória” Platform


Working with dashboards was key to uncovering data-driven insights and effectively communicating that knowledge for decision-making for future actions.

'Suggest' Screen

In the 'Suggest' screen, the user chose the topic of interest and then sent his suggestion, pending until the platform administrator approved it. Meanwhile, the user could browse among the other ideas using the timeline or navigating the map.

According to the neighbourhood and the topic, Pins around the city sent the suggestion, allowing to identify the areas of interest visually in the interactive map.

“Suggestion” screen: Users could submit suggestions based on city themes

Admin Area

Through administrative access, we follow up on suggestions, monitoring content and content adequacy before it is published, in addition to other resources, which were used posteriorly.

Due to the delivery deadline, the team decided to simplify the dashboard (admin area) so as not to jeopardize the release schedule set by the client.

Dashboard: Administrative access to the preliminary results of online collaborations


Product improvements

We submitted the platform for testing with seven users after completing the high-fidelity mockup, and we received four general pain points.

Here’s an overview of the results of my design changes.

Pain Points: Iterative process for revalidating the platform before launch

Success Rate: User succeded without struggle

What did we do to resolve the pain points?

  • Responsive Design problem on older mobile devices: We reviewed the CSS codes and optimized the images, testing again on different devices. Even so, some browsers and older devices could still have visualization problems, considering the platform’s programming technology. Therefore, another available suggestion was to make totems available in the city hall's public buildings to offer all residents access, even those who did not have a computer or mobile device.
  • Registration without confirmation by email: We created an email confirmation flow, which was not foreseen in the project due to the execution time and has now been developed and tested.;
  • Some important questions don’t found in the FAQ section: We send the questions to the stakeholders and make the answer available by updating the website's information.
  • Slow interaction map loading: We changed the hosting server to an international cloud service version, as the site was still in the testing phase and hosted locally. Also, we hide the interactive version of mobile as we believe it would be an impediment for mobile devices with a low mobile data connection. However, the change did not limit the user’s participation since he could filter by themes and neighbourhoods and access the timeline with all the suggestions.

After conducting validation tests and iterating designs, we obtained satisfactory results. Many of the problems were related to the internet connection.

We consider that the City of Vitória offers free public Wi-Fi in squares and the sights to encourage users to use the platform without worrying about mobile data.

At that time, we created version 2.0 of the prototype and then the official launch.

The platform was fully responsive and customized for viewing on desktops and mobile devices.

Minha Vitória: Mobile Version
Minha Vitória: Desktop Version

The purpose is that any resident can contribute with suggestions for the city through the channels, in face-to-face assemblies or through the “Minha Vitória” platform.

Minha Vitória: Platform’s Promotional Video — by Agência Danza / Mirartes Filmes


The timeline between the platform's development and the deadline for data collection was a limiting factor. During the platform's development, the schedule of face-to-face meetings was anticipated, which impacted the time limit for tests, which instead of a week, reduced to two days.

Therefore, the biggest challenge for this project was the timeline. With the schedule reduced by almost half in the middle of development, we had to work initially with what was essential. On the one hand, the project was delivered with agility. We identified some points that could be improved:

  • Return of Facebook API authorization (social login);
  • Extended user testing period;
  • Expansion of the awareness and participation campaign.

All of these improvement points were an excellent learning opportunity for future projects. I think that dealing with a challenging situation is the best way to gain experience from improvements.


The residents of Vitória made 1,340 suggestions for the next ten years of the capital in 53 days of popular participation in the first stage of the Urban Master Plan review process.

The collected data from suggestions were analyzed and compiled. From a report, we identified the expectations of dwellers.

Dashboard: Heat map by administrative area

We transform suggestions by neighbourhoods into administrative areas to adapt to the project and understand the data correctly. According to the volume of suggestions on the platform, the darker regions made it possible to understand the most significant needs identified.

Dashboard: Suggestions sent by administrative area

Dashboard: Most recurring topics

The chart by topic made it possible to identify the most recurring necessities and the city’s areas corresponding to them, allowing the city of Vitória to set priorities.

Dashboard: Participation volume by topic

Dashboard: What did the population support the most?

Requests that dwellers agreed most were highlighted by theme and subject, allowing an overview of the most supported suggestions.

Dashboard: suggestions most supported by dwellers on the platform

Minha Vitória platform generated essential insights into the city's primary needs, stimulating residents' participation in an interactive way while ensuring that the population's interest prevailed, meeting the proposed objectives when sending contributions to the city.

What happened next?

Urban Master Planning Review — Thematic Seminars

On the shared management model, the society helped draft this accountability, the result of wide discussion. We expect that the meetings will have an expressive audience to build the city we want.
- Lenise Loureiro, City Development Secretary

To complete the Urban Master Planning, representatives of the government, the productive sector, and communities gathered to vote on the new law's 48 proposals created within the shared management model.

This debate was made through seminars promoted by the City Development Secretariat.

As a result, it was possible to propose ways to follow to improve the urban aspects of the city of Vitória for the next ten years.

The launch event of the reviewed Urban Master Planning — Vitória, ES / Brazil

Thanks for reading!

If you would like to discuss more, share feedback or ask any questions, drop me a line here or connect with me on LinkedIn.

Disclaimer: All data disclosed in this case study are publicly accessible and don’t necessarily reflect the views of the company I worked for. The photo for the case study's composition was taken by Claudia Regina and used only for this purpose.

*Positive Emotional Granularity Cards: Yoon, J., Pohlmeyer, A.E., & Desmet, P.M.A. (2015). Positive Emotional Granularity. Cards. Delft, Delft University of Technology. ISBN: 978–94–6186–440–6.