UX Case Study: Urban Master Planning collaboration platform

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

Overview

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

  • UX Designer Manager (My role)
  • UX Researcher (My role)
  • User Interface Designer
  • Project Manager
  • Account Manager
  • Web Developer
  • Copywriter
Observatory of Public Sector Innovation — UX Case Study — Canada

Design Process

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

Empathize

Understanding users’ emotions: an exercise in empathy

What does the population expect from the city?

Urban Master Planning: Regional meetings — Vitória, Brazil
Urban Master Planning: Regional meetings — Vitória, Brazil
Positive Emotional Granularity Cards. Delft Institute of Positive Design
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 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.

Stakeholders Interview

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

Define

Problem statement

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

Brainstorm

Ideate

Site Map

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

Task flow

Task flow: User registration
Task flow: User submitting a suggestion
Task flow: User supporting a suggestion

Lo-Fi Sketches

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”)
UX Case Study — UX Designer — Ottawa, Ontario. Canada
Minha Vitória: Low-fidelity sketch (Google Maps API Integration)

Prototype

Lo-fi Wireframes

Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Home screen wireframe
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Wireframe of the administrative screen “Dashboard.”
Minha Vitória / UX Case Study. Ottawa, Ontario — Canada
Wireframe of the “Suggestions” screen
Browsable Low-fidelity Wireframe using Axure

Style guide

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

User Interface (Hi-fi mockups)

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

Dashboards

Dashboards — UX Case Study — Ottawa, Canada

'Suggest' Screen

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

Admin Area

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

Validate

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

Product improvements

Pain Points: Iterative process for revalidating the platform before launch
  • 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.
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
Minha Vitória: Platform’s Promotional Video — by Agência Danza / Mirartes Filmes

Takeaways

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

Outcomes

Dashboard: Heat map by administrative area

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

Dashboard: Most recurring topics

UX Case Study — UX Designer — Ottawa, Ontario. Canada
Dashboard: Participation volume by topic

Dashboard: What did the population support the most?

Dashboard: suggestions most supported by dwellers on the platform

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

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

Thanks for reading!

--

--

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