Marcos Rezende | Minha Vitória Web Platform

Overview

WEB APP

BACKGROUND

Vitória, Brazil has been ranked in the Top 5 ‘Connected Smart Cities’ in Brazil. Its City Hall wanted to build Minha Vitória, a collaborative platform to share suggestions for Urban Master Planning. This would encourage interactive participation in the city's development among all residents of voting age. The platform would be used to review and regulate the city's urban aspects over the next ten years, ensuring that, when submitting contributions to the city, the population's overall interests prevailed over individual or group interests. They hoped to generate essential insights into the city's improvements.

MY ROLE

I worked collaboratively with professionals in Brazil and Portugal as a Project Manager. I led the project as an end-to-end process with daily remote touchpoints and also contributed as a UX Designer. Being able to occupy close-up and managerial positions at once really enhanced my ideas and made me a great fit for the project.

ACHIEVEMENTS

✔ 1,340 volunteered suggestions/supports for the city's planning in 53 days.

✔ 48 proposal regulations created under the shared management model.

✔ UX case study published in OPSI, a global reference for public innovation initiatives.

Understanding Users’ Emotions

Positive Emotional Granularity Map - Results

Since we had a very heterogeneous target audience of more than 300,000 people, creating discrete personas could introduce bias into our research. Instead, we identified people’s feelings about their contributions to the city. We conducted interviews using the Positive Emotional Granularity Cards, which delineate 25 positive emotions a user can have toward a product. The cards help end users report their emotional experiences with a high degree of specificity.

Browsing the cards, we discussed which positive emotions would be desirable to evoke on the platform. We settled on three:

1. DESIRE

Every resident wants to live in a better city. Activities on the platform would need to pique that desire for change.

2. INSPIRATION

This was about offering new perspectives and generating simple, transformative ideas. We believed that inspiration could arise through collaboration.

3. RELIANCE

To make a suggestion requires energy: energy the user won’t expend if they lose confidence in the project.

We needed to inspire and maintain residents’ faith in the platform by making the process completely transparent. On this basis, ease of use and conscious thinking would be our top priorities in UX design.

Stakeholder Meetings

With stakeholders responsible for different areas of the city, we whittled our general platform goals into specific topics.

Environment and landscape;
Economic development and tourism;
Use, land occupation, and urban infrastructure;
Housing and mobility;
Democratic management.

We also identified two key pain points. Inhabitants of the city weren’t encouraged to participate in public decision-making because their involvement introduced competing political biases into the process. The topic was broad and technical, and it lacked general knowledge. We learned that the engaged population and community leaders were the most frequent participants in face-to-face meetings about the Urban Master Plan. Others tended to refrain from offering suggestions but were happy to raise their hands to indicate agreement or disagreement.

So, during a meeting with the entire project team, we brainstormed ways to make online contributions more dynamic.

Navigation flows

For the platform's development, I created an organization chart outlining all our needs, highlighting comments related to external actions (which depended on technology or the City of Vitória's official website).

By simply selecting their city of residence, the user was activated in the system. After selecting their neighbourhood, they were allowed to share their ideas. The user had two ways to contribute: sending a suggestion or supporting one or more opinions posted on the platform.

We decided to implement a social media login so users could see friends’ publications and their own, and an interactive map that allowed them to browse suggestions by topic and upvote any they supported.

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

We then turned all these requirements into low-fidelity sketches.

Sketches & Requirements

UX Case Study - Minha Vitória - Sketches

At this point, we noted some technical questions and features to test in the wireframe, such as the dropdown menu and text box for choosing a topic.

We considered factors such as a minimum character count for a suggestion (10) and forwarding suggestions for approval before publication.

Our goal was to create a friendly layout that met all our prerequisites. Unfortunately, Facebook took longer than expected to approve the API and get it up and running. But this was a useful lesson to learn and something I'd be sure to consider in future.

Building a Prototype

Next, we are developing a medium-fidelity, navigable wireframe using Axure RP to test the functionality with users.

Calls to action such as "Contribute" and "Send your suggestion" made it clear to the user that their participation was meaningful.

In developing an admin dashboard, we decided to include KPIs such as the topics most covered by a region, the subjects most commented on, and the primary needs in the official report.

On the “Suggest” screen, the user selected the topic of interest and submitted their suggestion, pending administrator approval. Meanwhile, they could browse other ideas using the timeline or map.

BROWSABLE WIREFRAME

On the home page, we defined the social and email login buttons and a menu. Since the subject matter was beyond the average user's general knowledge, we also included frequently asked questions.

Users’ public identification, including support and sharing options, was also included in the wireframe.

Design & Final Preparations

Distinct colors differentiated each of the five central topics of the project, allowing the user to identify areas of interest visually in the interactive map. We planned to integrate with Google Maps to show pins around the city, coded by neighbourhood and topic. We developed the platform’s layout, using the city as the background, with this in mind.

INTERACTIVE MAP

Due to the delivery deadline, the team decided to simplify the dashboard so as not to jeopardize the release schedule set by the client. The platform was fully responsive and optimized for desktop and mobile viewing, in time for the official launch.

DASHBOARD

Product Improvements

UX Case Study - Minha Vitória - Usability Testing using Pictorial Fraction Chart

After completing the high-fidelity mockup, we submitted the platform for testing with 7 users and uncovered four general pain points. These were amended in version 2.0 of the prototype.

We revised the responsive design to support older devices, added an email confirmation to track the user journey from registration to suggestion submission, expanded the FAQ with more questions to help users understand the platform, and updated the Google Maps API to reduce loading time.

Since so many problems were related to the internet connection, we suggested that the city offer free public WiFi in squares and at landmarks.

Outcomes & Lessons learned

In the first stage of the Urban Master Plan review process, the residents of Vitória made 1,340 suggestions/supports in just 53 days. This was a really wonderful outcome for the city.

Data was collected from the suggestions, analyzed, and compiled into a report. From this, we identified people’s expectations for the next 10 years. It truly was an invaluable insight. After that, 48 proposal regulations were created within the shared management model.

The UX case study has been published in the Observatory of Public Sector Innovation (OPSI), a European forum based in Paris. OPSI shares public-sector innovation initiatives and works with governments to understand and encourage new approaches to solving complex societal problems, helping them explore new possibilities.

The client reduced the project timeline by almost half midway through development. As is so often the case, the whole project could have been even more successful with more time. Nonetheless, we stripped everything back to the essential requirements and maintained an agile approach to attain success.

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 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). Delft University of Technology.

NEXT UP

Qlik Application Automation: enabling users to automate, and improve workflows

VIEW CASE STUDY

Minha Vitória platform: gauging residents’ expectations for the future of the city

hello@marcosrezende.com