Urban Master Planning collaboration platform — a UX case study

Minha Vitória / UX Case Study. Ottawa, Ontario —  Canada
Minha Vitória / UX Case Study. Ottawa, Ontario —  Canada

Overview

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

Urban Master Planning is a municipal law that establishes rules for the growth and functioning of the city. For the first time in the State of Espirito Santo — Brazil, the dwellers were also able to make suggestions over the internet through a democratic and participatory process. This theme is very technical, and our challenge was to make the platform accessible and easy to assimilate for the general population.

Target: City dwellers (old enough to vote — 16 years old)

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

My role: UX Manager.

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

Timeline: 2 months

Goals

  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 interest of the population as a whole prevails over individual or group interests.
  3. Encourage participation interactively.
  4. Generate essential insights into the improvements of the city.

Roles

Professionals involved in this collaboration platform:

  • User Experience Manager;
  • User Interface Designer;
  • Information Architect;
  • Project Manager;
  • Account Manager;
  • Copywriter;
  • Web Developer.

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

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

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.

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

Empathize

Image for post
Image for post

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.

Image for post
Image for post
What does the population expect from the city?

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.

Dweller

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

Image for post
Image for post
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 — Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Positive Emotional Granularity — Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Positive Emotional Granularity Map: ‘Desire,’ ‘Inspiration,’ and ‘Trust’ were the emotions identified.
  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. Trust: 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 sending of the suggestion.

Image for post
Image for post

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

  • Environment and Landscape;
  • Economic Development and Tourism;
  • Use, land occupation and urban infrastructure;
  • Housing and mobility;
  • Democratic management.

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

Image for post
Image for post

Define

Image for post
Image for post

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.

The challenge

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? 🤔

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.’

Brainstorm

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 the opportunity to contribute to the city's development by browsing the timeline with the 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.

Image for post
Image for post

Ideate

Image for post
Image for post

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).

Minha Vitória — Case UX — Sitemap
Minha Vitória — Case UX — Sitemap
Site map: details of all stages of the platform

Task flow

For the platform's launch, we considered two registration options: 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.

Image for post
Image for post
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 ideas 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.

Image for post
Image for post
Task flow: User submitting a suggestion

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

Image for post
Image for post
Task flow: User supporting a suggestion

Lo-Fi Sketches

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

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada

During the development of the low fidelity sketches, we also noted some technical doubts that could compromise or limit the function project.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
Minha Vitória: Low-fidelity sketches (Task “Send a suggestion”)

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

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
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.

Image for post
Image for post

Prototype

Image for post
Image for post

Lo-fi Wireframes

With the navigation flows defined, we continued with the project developing wireframes.

Using call to actions like “Contribute” and “Send your suggestion” clarifies 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.

Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Home screen wireframe

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

Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
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.

Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Wireframe of the “Suggestions” screen

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

Navigable Wireframe

Colours and Topics

We defined that each theme would have a colour, to facilitate the identification of each one of them in the interactive map:

  • Environment and Landscape;
  • Economic Development and Tourism;
  • Use, land occupation and urban infrastructure;
  • Housing and mobility;
  • Democratic management.
Image for post
Image for post
Vitória, one of the top 5 Brazilian cities, encourages innovation for the entire population.
Image for post
Image for post

When we make integration with Google Maps, the intention of showing pins around the city, according to the Neighborhood and the Theme that the user sent the suggestion for the improvement in the city.

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

Design (Hi-fi mockups)

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
Home Screen: “Minha Vitória” Platform

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.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
“Suggestion” screen: Users could submit suggestions based on city themes

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.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
Dashboard: Administrative access to the preliminary results of online collaborations
Image for post
Image for post

Validate

Image for post
Image for post
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada

Product improvements

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

Image for post
Image for post
Pain Points: Iterative process for revalidating the platform before launch

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 the fact 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.

Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória: Mobile Version
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
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.

Takeaways

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 is time. 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. On the other hand, we identified some points that could be improved:

  • Return of Facebook API authorization;
  • 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.

Outcomes

In general, 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 suggestions were received and analyzed. The collected data were compiled, and 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.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
Dashboard: Suggestions sent by administrative area

Dashboard: Most recurring topics

In the chart by themes, it was possible to identify the most recurring topic and the city's areas corresponding to them.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
UX Case Study — UX Designer — Ottawa, Ontario. Canada
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.

Image for post
Image for post
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, when sending contributions to the city, the interest of the population as a whole prevailed, meeting the proposed objectives.

What happened next?

Image for post
Image for post
Urban Master Planning Review — Thematic Seminars

In the shared management model, the society helped to draft this bill, the result of wide discussion. Our expectation is that the meetings will have an expressive audience so that we can 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.

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

The full report is available on the City Hall website (in Portuguese): https://www.vitoria.es.gov.br/minhavitoriapdu.php.

Image for post
Image for post

Thanks for reading!

If you want to chat, drop me a line here or connect with me on LinkedIn.

Disclaimer: All data disclosed in this case study are publicly accessible and doesn’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.

Written by

User Experience Designer based in Ottawa, Canada 🇨🇦 marcosrezende.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store