Conecta Recife
*All files were redacted due to NDA
CONECTA RECIFE
A city's public service portal and app.
Context
Recife is the 9th largest city in Brazil, with a population of 1.6 million citizens. It is renowned for being one of the leading tech and innovation hubs in the country. Several years ago, they launched Conecta Recife, a website that provides information about how to request public services and access details on public facilities within the city.
Problem
The previous website was outdated and inconsistent and only served as an online repository, providing users with information about public services and facilities, while limiting their ability to access services online by only providing phone numbers and physical addresses of service centers. Therefore, a modernization effort was needed to enhance the website's capabilities and allow users to make service requests online.
Solution
To improve the user experience and promote the city's commitment to using technology to improve public services, we rebuilt the website from scratch, built an app. This allowed citizens to easily request services online and provided them with a seamless experience across all digital channels, promoting a strong and unified visual identity for the city.
Tools
Zoom
Survey Monkey
Miro
Figma
My Responsibilities
UX Research
UX Design
UI Design
Process
Design Thinking workshops facilitation
System data retrieval
User research
Information Architecture
User Interface Design
Usability Testing
RESEARCH
Getting to know the old solution
The previous Conecta Recife's website was merely a hub of information about public services. There was no possibility of using it as a direct channel to request a service whatsoever. Its interface was confusing and old. We, along with the city government team, decided to ignore the previous design and start from scratch.
The product
Before we completely forget about the old website, we analyzed the usability metrics of the users on Google Analytics. The primary issues with the website were related to visual interface, information architecture, and navigability.
Website analytics
Users repeatedly left and return to the homepage within a short span of time, indicating difficulty in initiating interactions from the homepage.
Confusing Homepage
Users abandoned the service-finding flow (after going back and forth), indicating growing frustration in locating information.
Puzzling Find a Service Flow
Important pages were not being accessed by end users, possibly due to unawareness or difficulty in reaching them.
Bad Overall Architechture
To begin inspiring ourselves for this project, we analyzed a comprehensive list of web portals offering public services, delving deeper into four of them. These portals varied in their approach; some acted as hubs for other city departments, while others offered a wide range of services on the spot. One noteworthy example is E-Portugal, which allows users to log in and track their services on a personalized dashboard.
Competitive Analysis
Before the start of the process, our client conducted a survey with several hundred respondents, which we used to help us build the interview scripts. Given that the city hall serves a wide range of people from different social classes and educational backgrounds, a large number of interviewees was necessary for this project - in this case, 14 people - since some of them required very specific services.
Interviews
Main Users’ Pain Points
Personas
After analyzing user data, we created two personas that represent citizens with a higher demand for city public services.
Paulo is a hardworking parent who juggles the responsibilities of raising two children and working in a low-paying job. Despite his busy schedule, he recognizes the importance of accessing city services to provide for his family's needs. Therefore, he requires convenient and efficient access to these services.
Cleide, as a retired citizen, relies on the medical services provided by the city to maintain her health. However, she often encounters difficulties when attempting to find clear and concise information about the available services. This lack of clarity can lead to confusion and frustration, making it difficult for her to access the appropriate care she needs.
IDEATION
Design Thinking Workshops
During the workshops and ideation process for the new web portal, we collaborated closely with the innovation team of the city government. Our goal was to map out all public services in an institutional manner and identify the specific departments responsible for each service. By taking the user's perspective into account, we aimed to understand their needs and interests across different departments and services.
After this process, we realized that a shallow redesign would not be enough to address the complexity of the portal. Together with the city government team, we embarked on building the solution, aiming to use minimalist and lightweight design elements. In addition, we had biweekly meetings with the client to deliver our findings and design solutions, followed by a generative round of cocreation.
Tree of services - Sitemap
After an audit of the services provided by the municipality, we created a Service Tree representing the relationship between the city's departments, secretariats, and services. Then, we used it to build the website structure upon. The sitemap had 96 ending points for information and service request. Down below we have a partial slice of this structure.
Task Flows
Once we built the basic structure of the website, I developed the desired ”request a service” task flows for the users of the new website and compared them with the flows that users were accustomed to on the old one. This flow is the most important one regarding users and stakeholders.
Old ‘Request a Service’ Task Flows
New ‘Request a Service’ Task Flows
Wireframes
1st Round - Low-Fidelity
In the first low-fidelity wireframes, we began to establish the visual hierarchy of the project. For example, we placed a prominent focus on the search bar, which appears in front of the hero image on the desktop version and in the center of the navigation bar on the mobile version. Additionally, we identified the main sections of the homepage, including Highlights (Destaques), Themes (Temas), and Tracks (Trilhas).
Highlights feature seasonal or special campaigns and services provided by the city. Themes group services thematically, In tracks, services are grouped by user type.
Homepage - Desktop
Homepage - Mobile
2nd Round - High-Fidelity
In the second round the structure is more clear and we start using real copy.
We've followed the first draft and included two extra sections at the page's end. Events and Find in the Map.
Homepage - Desktop first sections
Homepage - Desktop last sections
The internal pages have become clearer, and now we have a section of the user's dashboard where they can track the status of their requested services.
User Dashboard - Cropped
The mobile homepage features the search bar in the first section. Additionally, we have included other internal pages, such as an information page and a map of the city.
Homepage - Mobile
Information page - Mobile
Map of the city - Mobile
USER INTERFACE
1st User Interface
In this first UI draft, we have maintained the prominent placement of the search bar.
Search Bar
In this second detail, we have two different ways of organizing services. In the first section with a green background, services are divided by user type, while in the section below with a white background, services are grouped by categories.
Services Sorting and Grouping
Finally, we have included a section for events with cards featuring an image, description, and a label indicating the theme of the event. Below that, there are shortcuts to locate public facilities on the city map.
Events and Map
USABILITY TESTING
Purpose
The main goal of the usability test was to assess the city's website's ease of use and user-friendliness, particularly for finding and requesting public services. The secondary tasks included adding and removing favorite services to the user dashboard and locating a particular event place on the city's map.
Participant Profile
Given the diverse range of citizens the usability test involved 12 participants from diverse backgrounds, income levels, and educational qualifications.
Tasks
The participants were asked to complete three tasks during the usability test:
Find and request a public service on the city's website.
Add and remove a favorite service to the user dashboard.
Locate a specific event place on the city's map.
Issues Identified
During the usability test, several issues were identified:
Seven participants had difficulty using the map shortcut buttons.
Five participants found the management of favorite services unclear.
Users complained about having to return to the homepage to access the search bar.
Users tend to look for services by theme rather than by user type.
Suggested Changes
To address the issues identified in the usability test, the following steps will be taken:
Seven participants had difficulty using the map shortcut buttons.
Re-designing the map interaction to make it more user-friendly and intuitive.
Improving the management of favorite services to make it more clear and easy to use.
Adding a search bar to all pages on the website.
Adjusting the website's organization to allow users to find services by theme rather than by user type.
UI Reviews - Final Interface
Homepage
We added a Favorite services section for logged users. Moreover, we added a picture of the city in the hero image background.
Favorites Section
In the website mobile version and in the app the Favorites button is on the NavBar for logged users.
Favorites on the NavBar
Now the categories comes before the type of user. Although looking for services by type of users is very helpful, the search bar at the top tackled this situation more often during the tests.
Inverted Sections Order
Instead of having links to an external map page, we've decided to add the map as a section in the homepage. Although, there is still a internal map page that consists on the map section only.
Map as a Homepage Section
For smaller screens, the events are presented in a carousel slider on the Homepage.
Events Carousel
Events page
Here the portal provides event information, a location map, and an external link to the proper events webpage.
Events Info
The search bar is always present. In the events page, it's between the Event Info and More Events, since it doesn't need to be highlighted in at this flow.
Present Search Bar
In the events page the last section is dedicated to more events there are happening at the moment.
More Events Carousel
User Dashboard
User Info and Favorite Services
On the dashboard users are able to manage Favorite Services.
The user dashboard provides access to all of the user's documentation related to their links with the municipality, including residential and company documents, as well as the current status of any requested service.
User Docs and Requested Services
REFLECTION
In conclusion, working on this project has been a rewarding experience. Throughout the process, our team has demonstrated exceptional collaboration and communication skills, which have been essential in achieving our objectives.
Conecta Recife is an essential tool for the city of Recife, Brazil. The previous website was outdated, inconsistent, and failed to provide users with online access to services.
Aiming to tackle the challenge of providing a better communication between citizens and the city government we've created a new website and app with enhanced capabilities, allowing citizens to make service requests online easily.