T- Mobilitat
UI REDESIGN | FICTIONAL STUDY CASE
For this new fictional project, the idea was to focus on redesigning an app that was already in operation, but one where we were aware of some design flaws or errors and where the visual aspect could be improved to practice our UI skills.
SO WHERE DO WE START?
The project began with a group discussion, and this time I worked with Ana, which I found great as we both live in Barcelona and have common interests, making it much easier to choose potential options to work on.
Once the group was formed, we needed to find an app that we could redesign within 2 weeks. Given the time constraints for each stage, we decided to allocate tasks and responsibilities among the team members, as the project did not permit a division of responsibilities. We chose to analyze the T-Mobilitat app, created for public transport in Barcelona, the city where we both currently reside.
T-Mobilitat was developed by TMB (Transportes Metropolitanos de Barcelona) with the idea of implementing a system with reusable cards under each user’s name. The card can also be used virtually on the phone, allowing for easy recharging.
However, when attempting to use the service, we found several deficiencies, not only in terms of UX/UI, which we will analyze in more detail later, but also inconsistencies, such as the virtual card not being usable with an iOS operating system. Therefore, users always need to carry the physical card. This also means that when recharging, you must always scan your physical card, which should be linked to your user. We discovered these and other deficiencies by reading online reviews.
EARLY INSIGHTS
To begin our process, we conducted secondary research, which led us to first define our users:
USERS: people who use public transport in Barcelona (metro, train, buses).
CONTEXT: The app allows users to have their card virtually loaded on their phone, facilitating the purchase of tickets and access to different means of transport.
CONTENT:
- Contactless technology to access public transportation
- Refillable and reusable cards.
- Improvements in the use and management of public transport tickets.
- Digital and online self-management.
- Improvements in transportation network information.
DEEPER INSIGHTS
We defined the CURRENT USER FLOW:
- The user creates their account and registers their username, with which they obtain their new card
- Buy ticket: from the app you can load your card with the title you need according to the distance and number of trips to be made.
- By opening the app you can obtain the necessary information to get to any place, with the means of transport that best suits you and purchasing the ticket if you need.
- You use the virtual card to access the means of transport / validate the departure you have access to previously taken trips
- You can have favourite directions, transports, etc
And created the SITE MAP:
Once our secondary research was completed and the app’s functioning was clearer, we conducted a Heuristics Analysis to obtain clearer information on the issues:
- Error Prevention: Messages are unclear and lack color support for error communication.
- Consistency and Standards: We found inconsistencies in the navigation process and design between screens, especially with the location of the back button and differences between Android and iOS versions.
- Aesthetic and Minimalistic Design: The style is minimalistic, but there’s insufficient information, and it’s not clear.
The next step was to analyze the market, for which we conducted a Visual Competitive Analysis:
- Metro Valencia: Focused on the importance of public transport to reduce environmental impact.
- Renfe: Inspired by the diversity of destinations and experiences.
- Trainline: Idea of sustainable, “Smarter Journeys”
RESUME
We found that they had more or less the same ideas but represented by different concepts, so we analyzed to understand the look and feel of our page.
To conclude this stage, we finished by creating a moodboard that would reflect the brand attributes we wanted to convey in our proposal:
We wanted to express sustainability, movement to connect nature with the urban energy and also modern and digital.
PROPOSING DIFFERENT SOLUTIONS
Once our current app, market, and existing communication were analyzed, we began our design process. We brainstormed ideas through sketches, which ended up being the foundation not only for redesigning the app’s UI but also for improving and simplifying some overly complicated and unintuitive processes.
Once the ideation process was defined, we started to visualize our ideas in mid-fidelity wireframes, changing the font family, icons, colors, and creating all components from scratch, always considering readability, spacing, and, most importantly, focusing on our previous process that provided the design solutions we wanted to reflect.
Below, you can see the new Style Tile we created to reflect the applied changes:
For our redesign, we maintained the primary color to preserve the brand identity but changed the secondary color for one with more contrast to emphasize communication when necessary.
We fixed consistency by simplifying communication through a single color, moving away from a gradient of shades that causes visual confusion, opting for a simple and clearer aesthetic. The user does not need to think too much about what the color means; they can act spontaneously.
We applied a more minimalistic aesthetic but with the necessary information for actions, simplifying the flow to make it easier for the user to understand each step.
We also replaced old components with common components to enhance understanding.
FLOW CHANGES
The new flow begins from the moment you download the app; you have to log in or create a new user:
Once inside, you access the home page, where you always find real-time information about possible incidents, upcoming application updates, or important news to keep you informed.
If you are about to use the card for a trip, you can access it from the nav-bar, where you can see the number of tickets remaining.
If you need to recharge, you access the recharge process from that screen, choose the ticket, zones, and quantity. Once selected, you move to a screen that shows the selected data clearly, and from there, you can start the payment process or cancel if there’s an error. After completing the payment process, you return to the screen with your card and can see your recharge complete, ready to use.
To simplify the navigation process, we created a top navigation bar that shows the screen you are on, featuring a back arrow icon to facilitate screen changes and a burger menu where you can find access to possible titles, help center, and more.
In the bottom navigation bar, we have shortcuts to the home page, a route planner, your virtual card where you can directly view your tickets, and your profile. In this bar, you’ll notice that both the icon and typography darken when you are in one of these sections, allowing the user to always know where they are.
NEXT STEPS
To conclude, our next steps would be:
- Redesign the profile section, where we also found many inconsistencies in navigation,
- Improve the route planning section to provide live notifications about the state of the lines, incidents, and more information,
- and create a style guide and design kit so that designers who have to continue making improvements and updating the app can maintain design and communication consistency.
I wish you a safe journey, and thanks for reading! Hugs!
