Conecta Recife
CONECTA RECIFE
A city's public service portal and app.
All files were redacted due to NDA
Here you can read a more detailed version
Context
Recife is Brazil's 9th largest city, with 1.6 million people. It's a top tech and innovation hub. Conecta Recife is a website for public service requests and city facility information.
Problem
The old website was outdated and limited, providing only static information. It lacked online service access and only provided phone numbers and addresses. A modernization effort was required to improve the website's capabilities, enabling users to make online service requests.
Solution
We rebuilt the website and developed an app to enhance user experience and demonstrate the city's dedication to improving public services through technology. Citizens can now easily request services online and access public facilities’ information, enjoying a seamless experience across all channels.
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
Design System Documentation
RESEARCH
Getting to know the old solution
The old Conecta Recife website was solely an information hub for public services, lacking any direct service request functionality. Its outdated and confusing interface prompted us, in collaboration with the city government team, to completely disregard the previous design and begin anew.
The product
Before discarding the old website, we conducted an analysis of usability metrics using Google Analytics. The main problems identified were related to visual interface, information architecture, and navigation.
Website analytics
Users repeatedly left and returned to the homepage within a short period, 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
We analyzed multiple public service web portals, focusing on four. They varied in their approach, some acting as department hubs while others offered immediate services. E-Portugal stood out with its personalized dashboard for tracking services.
Competitive Analysis
Our client performed a survey with hundreds of respondents. It helped us to create interview scripts. Due to diverse backgrounds, 14 interviews were conducted, including specific service needs.
Interviews
Main Users’ Pain Points
Users, particularly those with limited tech experience, may feel frustrated or helpless when unable to find the necessary information or support on the website.
Limited Support Options
Users may experience frustration or overwhelm due to the numerous steps involved in completing a task or request.
Complex Process
Insufficient feedback leave users feeling neglected or ignored, causing anxiety and uncertainty about the progress of their requests.
Lack of Feedback
Personas
After analyzing user data, we created two personas that represent citizens with a higher demand for city public services.
Paulo, a busy father of two, recognizes the importance of accessing city services to meet 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.
IDEATION
Design Thinking Workshops
In the workshops, we worked closely with the city government's innovation team to map out public services and identify responsible departments. We focused on understanding user needs and interests across different departments and services.
We realized the portal's complexity and concluded that a shallow redesign wouldn't suffice. Thus, we built the new portal from scratch. We collaborated with the city government team, focusing on minimalist and lightweight design elements. We held biweekly meetings with the client to present findings and design solutions, followed by a generative co-creation process.
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. The sitemap had 96 ending points for information and service requests. Down below, we have a partial slice of the tree structure.
Recife's public services structure - cropped detail
Task Flows
Once we built the website's basic structure, We developed the desired “request a service” task flow and compared it with the older flows. The old flow consists of using the portal, a phone, and wait, the new one is automated on the website. This flow is the most important regarding users and stakeholders.
Old ‘Request a Service’ Task Flows
New ‘Request a Service’ Task Flows
Wireframes
Low-Fidelity
We emphasized the search bar in the low-fidelity wireframes and identified key sections: Highlights (Destaques), Themes (Temas), and Tracks (Trilhas). Highlights showcased special campaigns, while Themes and Tracks organized services thematically and by user type.
Homepage - Desktop
Homepage - Mobile
High-Fidelity
In the Hi-fi, the structure is clearer, 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 detail
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
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.
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 performed three tasks:
Request a public service on the city's website.
Manage favorite services on the dashboard.
Locate an event place on the city's map.
Issues Identified
During the usability test, some issues were identified:
Seven participants struggled with map shortcuts.
Five participants found ‘favorite service’ management unclear.
Users disliked returning to the homepage for the search bar.
Users prefer to look for services by theme rather than 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 them clearer and easier 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's mobile version and in the app, the Favorites button is on the NavBar for logged users.
Favorites on the NavBar
Now the categories come 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 on the homepage. Although, there is still an internal map page that consists of 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
The portal provides event information, a location map, and an external link to the proper event’s webpage.
Events Info
The search bar is always present. On the events page, it's between the Event Info and More Events, since it doesn't need to be highlighted in this flow.
Present Search Bar
On 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 can manage their Favorite Services.
The user dashboard provides access to all the user's documentation related to their links with the municipality, including residential and company documents and the current status of any requested service.
User Docs and Requested Services
REFLECTION
In conclusion, working on this project has been a rewarding experience. Our team has demonstrated exceptional collaboration and communication skills throughout the process, 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 and inconsistent and failed to provide users with online access to services. Aiming to tackle the challenge of providing 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.