UX Case Study | Minha Vitória platform | Marcos Rezende | Senior UX Designer @ Microsoft

CASE STUDY

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

Minha Vitória is a collaborative platform designed to enable the collective review and regulation of a Brazilian city with its dwellers for the next ten years.

UX DESIGN

WEB APP

B2C

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 development of the city amongst all residents of voting age. The platform would be used to review and regulate the urban aspects of the city for the next ten years, ensuring that, when sending contributions to the city, the population's interest as a whole prevailed over individual or group interests. They hoped to generate essential insights into the improvements of the city.

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 touch-points 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 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 form a bias in 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 to a product. The cards help end-users report 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 providing new points of view and generating simple, transformative ideas. We believed that inspiration could arise with collaborative participation.

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 down our general goals for the platform 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 being encouraged to participate in public decisions because they introduced competing political biases into the process. The topic was broad, technical, and lacked knowledge of the general population. 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 giving suggestions but were happy to raise their hands when they agreed or disagreed.

So, in a meeting with the entire project team, we looked for ideas to make online contribution dynamic.

Navigation flows

For the development of the platform, I created an organization chart with all our needs, highlighting comments related to external actions (which depended on technology or the City of Vitória 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 that users could see friends’ publications and their own, and an interactive map, which 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 be tested in the wireframe, like the dropdown menu and text box for choosing a topic.

We considered things like a minimum number of characters 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 working. But this was a useful lesson to learn and something I'd be sure to consider in future.

Building a Prototype

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

Calls to action like "Contribute" and "Send your suggestion" clarified to the user that their participation was meaningful.

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

On the “Suggest” screen, the user chose the topic of interest then sent 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 technically beyond the general knowledge of the average user, we also incorporated frequently asked questions.

Users’ public identification including support and sharing options were 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, which used the city as a 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 customized for viewing on desktops and mobile devices 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 work on older devices, created an email confirmation to track the user journey from registration to suggestion submission, included more questions in the FAQ to help the user understand the platform, and revised 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 outstanding 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 had reduced the project timeline by almost half in the middle of 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 case study's photo 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). Delft University of Technology.

Qlik Application Automation: improving how users can create and monitor connections

COMING SOON ↗

Feel free to hit me up. I'm looking forward to hearing from you.

hello@marcosrezende.com