This case study was part of a recruitment process for PicPay's job application in March 2021. Detran/SP is the transit department for the city of São Paulo/ Brazil, similar to the DVLA in the UK. Detran/SP is a real government organization and, although all data provided by the case was given as fictitious, the case instructions stated that they were meant to be treated as real data.
My role: I was the sole designer, from research through end result
Project Goal: Provide a new home page structure for Detran/SP website in order to facilitate flow findability
Timeframe: 3 days
Tools: Figma, Miro
Overview
Context and Data
Detran/SP has the goal to reach 90% of your services to be done online in a self-service manner and has 95% of all accesses made via Web and Desktop.
On a daily basis, around 12 thousand people come to Detran's service stations looking for customer support, of which 85% are looking for services related to:
•Driver's license penalty points consultation.
•Appeals against penalty charge notices.
•Check tax status and registration details for a vehicle for sale (third-party).
More than 60% of customers mentioned that they tried to perform those services via Detran's web portal but faced difficulties locating where to find such services on the website.
Challenge
Provide a new home page structure for Detran/SP website in order to facilitate flow findability.
Methodology
The case was made using the 5 elements of UX methodology also known as the UX Iceberg:
•Strategy
•Scope
•Structure
•Skeleton
•Surface
1. Strategy
1.1 Desk Research
The first step in this case was a desk research to complement the data provided and to expand knowledge around the problem's context. After carrying out the research, the results are as follows:
•The three main services that users are looking for are not in the highlighted services on the home page and the search bar is not on the hero page.
•Finding the desired services can be difficult from the home page unless the user knows the correct keywords to look for in the search bar.
•The website was remodelled in the last few months, increasing the amount of online self-service services available from 43 to 72. In this process, the website interface was changed to improve the visualisation of the most popular services, but the difficulty of finding them remained.
•The cost of online self-service (R$0,35) is around 3% of the cost of in-person customer support (R$8,58).
1.2. Initial Analysis and Project Viability
The Detran/SP is a governmental institution - which means that, unlike other companies, there is no competitor to share the market with and, even with a website that doesn't meet the user's needs, it will not lose customers. In this scenario, the best way to build a business case to sell the idea of a UX rebranding would be to analyse the costs involved.
With the data provided, it is possible to calculate the number of people who use in-person support once they couldn't find the service online and, using data from the desk research customer support cost, it was possible to reach the monthly potential savings. Improving flow findability could lead to a monthly saving of R$1.1m (£175k), meaning that a UX project to solve the main problem would pay itself in around a month.
1.3 Hypothesis
After the initial research, some hypotheses were created.
1. Users get lost in the large volume of information on the home page.
2. When the user can't find the desired service in the search bar, it's assumed that the online service is not available.
3. The existing flow prevents users from navigating more on the website.
1.4 User Research
To refute or not the hypothesis, user research was carried out with an approach of a usability test.
Due to time constraints in this project and the pandemic isolation context, the user research process was carried out with three family members. They were individually asked to locate the three main services and also provide their thoughts on the general experience after navigating the website. Some of the findings were:
•Two of them had difficulties finding the appeals and information of a third-party vehicle, they tried to locate it in the search bar but didn't use the exact keywords and couldn't find it easily.
•One user thought that the website didn't have a service regarding third-party vehicles.
•All of them got confused with redundant flows and several paths to reach the same service.
•Although the website contains 72 services, all users thought that it was limited to the ones that appear on the home page list.
•All users appeared overwhelmed with the amount of information on the home page, they spent some significant time trying to understand the structure while looking for the services.
2. Scope
2.1 Prioritizing
Due to a large number of flows and services, rebuilding the entire Detran/SP website would demand a large and long project.
However, once 85% of support reasons are focused on only three services, by applying Pareto Principles and creating an Impact Effort Matrix, it was decided to focus energy and resources on the three main services in such a way that the project could retrieve most result with less investment.
In this case study the visibility of most accessed flows and redundancy removal in order to simplify the home page will be addressed.
3. Structure
In order to remove all flow redundancy, the existing flow was mapped to better understand the website's architecture.
3.1 Existing Flows
Penalty points consultation
Appeals against penalty charge
Third-party vehicle information
3.2 User Journey
Infraction Points Consultation
Requesting ticket appeal
Checking Outstanding Issues
Main Insights
The main issues encountered were:
•Redundancy of pages.
•Circular reference; flow inconsistency.
•Inconsistency in the naming of services.
•Terms and descriptions are too technical and inaccessible to the general public.
•Alphabetical ordering of services and not in order of relevance.
3.5 Competitors Analysis
Brazil has 27 states and each one has its own department of transit with a different website structure. A competitors analysis with other five States that have a big vehicle fleet in the country was carried out in order to look for good practices and insights for the project. Some features are as follows:
•Colour coding by category.
•Quick Access Guide.
•Process evolution bar.
•Main search bar.
•Accessible language.
•Screen standardization.
4. Skeleton
4.1 Sketches and Wireframe
To obtain the most efficient result with the existing limitations, these were the proposed actions:
•Minimize the amount of information on the home page and remove redundancies.
•Highlight the most sought-after services in order of relevance.
•Standardize services' nomenclature.
•Reduce the number of screens, friction and clicks to perform a service.
5. Surface
The end result is a much simpler and compact website without removing any services or information. The original visual guidelines were kept and all changes made are related to information architecture and visual hierarchy.
Next Steps
Analyzes and studies that must be done if there is continuity in the project:
•Conduct usability tests to validate the final project.
•Study the impact of a search bar.
•Finalize prototypes to enable usability tests.
•Apply usability testing on a basis that brings statistical relevance to the study.
•Study and develop a responsive platform for mobile web access.
Success Metrics
Before deployment:
•Perform usability testing comparing the current platform with the new project.
•Apply SUS form to check if there was a change/improvement in usability indicators.
After deployment:
•Perform A/B tests to compare the results of the two platforms.
•Check for a decrease in the number of in-person visits and an increase in online self-services for the services prioritized in the project.
•Track site abandonment rate metrics during processes (Google Analytics).
•Reduction of operating costs due to the decrease in in-person demand.
As a result of this case study, I was hired as a Junior Product Designer to work at PicPay.
