UX Case Study: Urban Master Planning Collaboration platform

Marcos Rezende
12 min readMay 27, 2020

--

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

Overview

Minha Vitoria: a collaborative platform to share suggestions for Urban Master Planning intended to review and regulate Vitoria city — Brazil's urban aspects 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

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?

Goals

  1. Review and regulate the urban aspects of the city for the next ten years.
  2. Ensure that the population's interest prevails over individual or group interests when sending contributions to the city.
  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.

Observatory of Public Sector Innovation — UX Case Study — Canada

The UX case study has been published by the 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, and 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)

Empathize

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

Dweller

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 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 users had three value propositions to interact with the platform within the Aspiration, Interest and Guarantee clusters.

Positive Emotional Granularity — Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
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 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 maintain confidence in contributing to his idea.

Therefore, 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.

Define

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, and technical and lacks general population knowledge.

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 considering 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 contributing to the city's development by browsing the timeline with suggestions by themes. Also, the dweller who cannot send a tip could support one already submitted.

This would allow the city dweller to explore the proposals and choose the most related to their expectations.

Ideate

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 city's official website of Vitória).

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

Task flow

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

Task flow: User registration

Login with Facebook
The user was activated in the system by checking the city of residence.

Login with email
After checking the city of Vitória and the neighbourhood, users were 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.

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

We also noted some technical questions about requirements and feasibilities while developing the low-fidelity sketches.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
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 and testing the dropdown menu and checkbox.

UX Case Study — UX Designer — Ottawa, Ontario. Canada
Minha Vitória: Low-fidelity sketch (Google Maps API Integration)

We aimed 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.

Prototype

Lo-fi Wireframes

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

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.

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

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

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
Wireframe of the “Suggestions” screen

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

Browsable Wireframe using Axure RP

Browsable 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 in the interactive map visually.

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.

Considering this information, we developed the platform's layout using the city's background.

User Interface (Hi-fi mockups)

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

'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 us to identify the areas of interest in the interactive map visually.

Minha Vitória Platform: Users could navigate through the interactive map or timeline
Minha Vitória Platform: Users could navigate through the interactive map or timeline
Minha Vitória Platform: Users could submit suggestions based on city topics
Minha Vitória Platform: Users could submit suggestions based on city topics
Minha Vitória Platform: Users could submit suggestions based on city topics
Minha Vitória Platform: Users could submit suggestions based on city topics

Dashboards

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

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: Choropleth Map by administrative area

We transform neighbourhood suggestions 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.

Minha Vitória Dashboard — UX Case Study
Dashboard: Suggestions sent by administrative area using geospatial Choropleth Map

Dashboard: Most recurring topics

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

Dashboard: Participation volume by topic using Bar Chart (vertical)
Dashboard: Participation volume by topic using Bar Chart (vertical)

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.

Minha Vitória Dashboard — UX Case Study
Dashboard: Most supported suggestions using Bar Chart (horizontal)

Validate

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

Product improvements

After completing the high-fidelity mockup, we submitted the platform for testing with seven users and 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 the launch

Success Rate: The user succeeded 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 desktop and mobile device viewing.

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: Desktop Version

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 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 excellent learning opportunities for future projects. Dealing with a challenging situation is the best way to gain experience from improvements.

Outcomes

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. Then, from a report, we identified the expectations of dwellers.

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

What happened next?

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

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.

--

--