CLIENT
São Paulo Metro.
STORY
The São Paulo Metro – also known as Metrô de São Paulo (Portuguese) – is one of the urban railways that serves the city of São Paulo, alongside the São Paulo Metropolitan Trains Company (CPTM), which serves other municipalities around São Paulo, forming the largest metropolitan rail transport network of Latin America.
The metro system carries about 5,300,000 passengers in a regular business day and, combined with the CPTM, form a 374 km (232 mi) long network.
The Metro App was released in 2013 and haven’t had a significant update since then.
ROLES
UX/UI Designer.
DURATION
Two weeks.
GOALS
Redesign and update the Metro SP app UI with a new value proposition.
CHALLENGE
- Being a one-man band (aka by myself).
- Develop a minimum viable product (MVP) in a two-week sprint.
- Testing and evaluate the current app in a jiffy.
RESEARCH
Before starting to research, it was important to understand how a modern service on rapid transit systems are provided, how its infrastructure works and how it is maintained.
I needed a specialist, so I found someone: a former 66 y/o Red Line Traffic Supervisor, retired in 2018.
With over 40 years of experience, from Maneuvering Auxiliary to Station Traffic Manager, Mr.R. clarified doubts about procedures and the relationship of the São Paulo Metro with its users.
Ready to go!
Usability Testing
After checking the App Store and Google Play ratings and reviews, a usability test was administered to identify problems, uncover opportunities and learn about target users.
Using Maze platform, it was possible to analyze answers and heat maps when users were given the following tasks:
Plan a route to V Madalena Station:
Where can you find the subway map?
Check the lines’ status:
How do you feel about the network map?
“I didn’t like it. Same difficulty with wall maps. I have to manually search”
“If the person has no idea where each line is, it’s pretty confusing.”
What do you think the METRÔ CONECTA option does / shows?
Metro Conecta is an application launched in 2017 and São Paulo Metro used the Metro SP app to display a call to action button that prompts the user to download it, if desired. Well, none of the testers got it right.
As a result, it was possible to conclude that the current app UI was misleading users, meaning that the usability heuristics had to be reviewed – one more clue in the redesign case.
Surveys & Interviews
In addition to the tests, a survey was carried out to understand transportation preferences and the current metro app knowledge – using random respondents from São Paulo metropolitan region.
Here are some insight-charts:
While analyzing these charts, it became obvious how important São Paulo Metro is as a mean of transportation and how much value the current app was not delivering.
From the survey respondents, it was possible to select and interview five metro heavy users.
As a result, I could clearly imagine a metro commuter and the old app in action in a disturbed scenario:
The COVID-19 Pandemic
In March 2020, at the beginning of the Covid-19 pandemic the passenger traffic on São Paulo’s public transportation dropped by 60% due to the quarantine’s side effects.
However, as we can see in the Moovit chart below, the use of public transport has been unstable since then, growing exponentially until December and falling again with the virus second wave.
SYNTHESIS
Converging the data collected to Affinity Diagrams, an Empathy Map, a Persona and a User Journey was a Herculean task, but not harder than framing the problem.
Affinity Diagrams
Empathy Map
Persona
Motivations
- Learning professional skills.
- Career development.
- Cultural knowledge.
Needs
- Being pontual in the workplace.
- Information about the metro stations and line operations.
- Time for housework and leisure-time activities.
Frustrations
- Crowded subways.
- Busy subway stations.
- Time spent on her comute daily.
Fernanda’s Journey
Fernanda’s Problem Statement
Fernanda needs a tool to optimize her time using the metro, because she feels uncomfortable with busy subway stations, crowded wagons and commuting time to work.
Metro SP’s Needs
Being able to declare Fernanda’s problem was still not enough, since the project had a main goal: redesign the Metro SP app.
As observed, the Metro SP App was originally designed to be a service bulletin, an ally in the user’s journey within metro transport. In spite of this, the current app is failing for that purpose as well as its features:
- Routes: unnecessary elements distract users from the information they really need.
- Network Map: weak flexibility and efficiency of use (e.g.: missing accelerators).
- Lines and Stations: content and visual design are basically the same since 2013.
- Operation Status: lacks consistency, making it hard to find the information.
- Institutional Communication: people need to recall information in the interface, rather than recognizing it.
IDEATION & REDESIGN
Before designing the UI, it was necessary to structure the app’s Information architecture – collecting already existed information from the app with a Content Audit, understanding Fernanda’s Use Cases, blueprinting the App Map and mapping main User Flows were all part of this.
Content Audit
Use Cases
App Map
User Flows
User Stories & Red Route Analysis
Applying the Red Routes methodology before start redesigning the Metro SP app was essential to figure out and prioritize which critical and frequent user stories would compose the minimum viable product (MVP) to be delivered.
PROTOTYPE
After prototyping the Mi-Fi Metro SP app, a new Usability Test was easily created with Maze (as you can check HERE) – the result was as follows:
For more details you may test the high-fidelity prototype on Figma.
TECH AND TOOLS
- Miro.
- Figma.
- Maze.
LESSONS LEARNED
- How retired employees can pass along their expertise to younger generations.
- How technology can improve ones commuting time.
- Seeing pandemic as an opportunity moment to update products and services once it has change the world’s perspective.
WHAT IF THERE WAS A NEXT SPRINT?
- Work on the network map, the routes and configuration paths also need to be redrawn.
- Apply accessible features such as dark mode and remove transparency.
- Conduct new usability tests and keep iterating.
Victor’s Portifolio 