UX Case Study: Urban Master Planning Collaboration platform
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
- Review and regulate the urban aspects of the city for the next ten years.
- Ensure that the population's interest prevails over individual or group interests when sending contributions to the city.
- Encourage participation interactively.
- 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.
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.
- Empathize
- Define
- Ideate
- Prototype
- 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.
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.
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.
- 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.
- 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.
- 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:
- 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.
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).
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.
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.
Support sending
The user can support a shared idea or suggestion, giving it more relevance.
Lo-Fi Sketches
After requirements gathering, we’ve turned those requirements into sketches.
We also noted some technical questions about requirements and feasibilities while developing the low-fidelity sketches.
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.
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.
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.
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.
To validate the platform, we initially made a navigable wireframe to test the functionality with users.
Browsable Wireframe using Axure RP
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.
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)
'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.
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.
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: 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.
Validate
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.
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.
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.
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.
