2024-2025

TIB

Services

Benchmark,Visual Design, Deployments, Responsive, Accessibility

COMPANY

Plexus Tech

Team

Design, Development and Accessibility

An overhead, slightly aerial view of a red and yellow TIB bus navigating a winding mountain road along a stunning coastline. The road curves sharply, and lush green hills covered in trees slope down towards the deep blue sea. The sky is bright with some scattered white clouds. The bus is clearly visible with its distinctive yellow and red livery.
An overhead, slightly aerial view of a red and yellow TIB bus navigating a winding mountain road along a stunning coastline. The road curves sharply, and lush green hills covered in trees slope down towards the deep blue sea. The sky is bright with some scattered white clouds. The bus is clearly visible with its distinctive yellow and red livery.

Connecting people and places in the Balearic Islands

Mobile Application

B2G

Transport

Figma

MaaS

Overview

TIB, the public transport system of the Balearic Islands, promotes more sustainable and efficient mobility. With an integrated network of buses, trains and metro, it offers residents and visitors a comfortable travel experience. As part of its evolution, it is taking a step forward with the launch of a mobile app, designed from scratch to respond to the new needs of users.

Challenges

Innovating in digital mobility and ensuring an agile process from the first iteration

The main challenge was to orchestrate an agile design process that incorporated weekly priority changes without falling into analysis paralysis. To do this we implemented a Kanban board and a schedule of deliverables and revisions that allowed us to maintain focus and transparency between client, PO and development team. In addition, we had to ensure that each screen complied with WCAG AA/AAA standards, so we established fortnightly accessibility reviews and daily technical feasibility validations with the PO and head of development.

A TIB bus, half red and half yellow, is parked at a bus stop with a red shelter on the right. In the center, superimposed, is a mobile app interface for "tib" (Transporte de las Islas Baleares). The app's welcome screen features an illustration of a bus with two people, and text in Spanish reading "Bienvenido a tib" (Welcome to tib) and bullet points listing features like "Recarga tu tarjeta" (Recharge your card), "Consulta tus movimientos" (Check your movements), and "Recibe alertas y avisos de tus líneas favoritas" (Receive alerts and notifications for your favorite lines). A "Iniciar sesión" (Log in) button and a "Regístrate" (Register) link are also present. The background shows part of the bus, the bus stop, and distant mountains under a blue sky.
A TIB bus, half red and half yellow, is parked at a bus stop with a red shelter on the right. In the center, superimposed, is a mobile app interface for "tib" (Transporte de las Islas Baleares). The app's welcome screen features an illustration of a bus with two people, and text in Spanish reading "Bienvenido a tib" (Welcome to tib) and bullet points listing features like "Recarga tu tarjeta" (Recharge your card), "Consulta tus movimientos" (Check your movements), and "Recibe alertas y avisos de tus líneas favoritas" (Receive alerts and notifications for your favorite lines). A "Iniciar sesión" (Log in) button and a "Regístrate" (Register) link are also present. The background shows part of the bus, the bus stop, and distant mountains under a blue sky.

Involvement

Organising, connecting, growing

Based on a user's past interactions, the homepage dynamically surfaces content likely to interest them. For instance, if a user frequently engages with articles on productivity, they’re shown similar content, keeping their experience relevant and encouraging them to explore further.

A mobile app interface for "tib" is superimposed over a picturesque outdoor scene featuring a bus stop bench next to a body of water (likely the sea or a large lake) under a clear blue sky. The app screen displays "Paradas y líneas favoritas" (Favorite stops and lines), with tabs for "Paradas (2)" (Stops (2)) and "Líneas (0)" (Lines (0)). An illustration of a person walking towards a bus stop sign pointing to "PALMA," "MANACOR," and "CAPDEPERA" is featured. Text below the illustration reads "¡Aún no tienes líneas favoritas!" (You don't have favorite lines yet!) with an "Añadir líneas favoritas" (Add favorite lines) button. The bottom navigation bar is also visible.
A mobile app interface for "tib" is superimposed over a picturesque outdoor scene featuring a bus stop bench next to a body of water (likely the sea or a large lake) under a clear blue sky. The app screen displays "Paradas y líneas favoritas" (Favorite stops and lines), with tabs for "Paradas (2)" (Stops (2)) and "Líneas (0)" (Lines (0)). An illustration of a person walking towards a bus stop sign pointing to "PALMA," "MANACOR," and "CAPDEPERA" is featured. Text below the illustration reads "¡Aún no tienes líneas favoritas!" (You don't have favorite lines yet!) with an "Añadir líneas favoritas" (Add favorite lines) button. The bottom navigation bar is also visible.

METHODOLOGY

Fast track to smart, accessible and scalable design

We adopted a lightweight Scrum with weekly sprints to maintain short delivery and review cycles. We used Figma as a single source of truth, structuring components in a UI Kit of variables and atomic styles. For task and feedback management, we set up a Kanban board in Jira with ‘To Do’, ‘In Progress’, “Review” and ‘Done’ columns.

Inside a TIB bus, showing yellow handrails and dark grey seats. Superimposed in the center is a mobile app interface for "tib" showing the "Mi Tarjeta" (My Card) section. The screen displays "Saldo disponible: 15,00€" (Available balance: €15.00) and "10 puntos," along with a card number. An illustration of a TIB card is visible, with text "Acerca tu móvil para poder pagar" (Tap your mobile to pay). Options for "Mis movimientos" (My movements) and "Recargar otra tarjeta" (Recharge another card) are also visible. A bottom navigation bar includes "Inicio," "Favoritos," "Mi tarjeta," "Alertas," and "Más."
Inside a TIB bus, showing yellow handrails and dark grey seats. Superimposed in the center is a mobile app interface for "tib" showing the "Mi Tarjeta" (My Card) section. The screen displays "Saldo disponible: 15,00€" (Available balance: €15.00) and "10 puntos," along with a card number. An illustration of a TIB card is visible, with text "Acerca tu móvil para poder pagar" (Tap your mobile to pay). Options for "Mis movimientos" (My movements) and "Recargar otra tarjeta" (Recharge another card) are also visible. A bottom navigation bar includes "Inicio," "Favoritos," "Mi tarjeta," "Alertas," and "Más."

Results

Success on wheels and accelerating into the future

The project transformed the review and delivery processes, significantly accelerating validation cycles and enabling a large volume of screens to be launched in record time. Thanks to the UI Kit, we achieved agile and cohesive production; all interfaces now meet the highest accessibility standards, and the client noted the clarity and organisation of the process. This success has prompted a third phase, in which we will add new functionalities and further improve the user experience.

+100

SCREENS DELIVERED

Designed across three phases—discovery, UI design and iteration—aligning weekly with the client and dev team.

100%

Accessibility compliance

All screens verified as WCAG AA/AAA compliant before deployment.

1

WEEK VALIDATION CYCLE

Average per-screen review from demo to approval.

85%

Design System

Interfaces assembled from reusable components and variables.

Inside a bus, looking out the window at a sunny street scene. Superimposed in the center is a interface for the app TIB mixed between dark and light mode displaying a map view. The map shows streets and locations, with an option to "Buscar por nombre, código de parada o población" (Search by name, stop code or town). Filters for "Todos," "Bus," "Tren," and "Metro" are present above the map.
Inside a bus, looking out the window at a sunny street scene. Superimposed in the center is a interface for the app TIB mixed between dark and light mode displaying a map view. The map shows streets and locations, with an option to "Buscar por nombre, código de parada o población" (Search by name, stop code or town). Filters for "Todos," "Bus," "Tren," and "Metro" are present above the map.

DARK MODE/LIGHT MODE

Heartfelt opinion

Being one of my latest projects, it gave me valuable lessons about accessibility. Weekly presentations to the client helped me grow in confidence, and collaborating closely with the dev team taught me how to evaluate what features were realistically implementable.

more projects

You might also like

2023-2024

UNIR

Evolving a global student experience

A low-angle portrait of a young woman with curly brown hair, wearing a black graduation cap and gown, smiling brightly at the camera against a clear blue sky. She has large hoop earrings.

2023-2024

UNIR

A low-angle portrait of a young woman with curly brown hair, wearing a black graduation cap and gown, smiling brightly at the camera against a clear blue sky. She has large hoop earrings.

2023-2024

UNIR

A low-angle portrait of a young woman with curly brown hair, wearing a black graduation cap and gown, smiling brightly at the camera against a clear blue sky. She has large hoop earrings.

2022-2023

COFARES

Developing complementary products

A close-up, eye-level shot of a bright green, illuminated cross sign, characteristic of a pharmacy, mounted on the exterior of a building against a dramatic twilight sky with hues of purple and blue. The building itself is dark and partially visible, with hints of windows.

2022-2023

COFARES

A close-up, eye-level shot of a bright green, illuminated cross sign, characteristic of a pharmacy, mounted on the exterior of a building against a dramatic twilight sky with hues of purple and blue. The building itself is dark and partially visible, with hints of windows.

2022-2023

COFARES

A close-up, eye-level shot of a bright green, illuminated cross sign, characteristic of a pharmacy, mounted on the exterior of a building against a dramatic twilight sky with hues of purple and blue. The building itself is dark and partially visible, with hints of windows.

2022-2025

THE STACK

A playground of ideas, tests, and visual experiments.

An abstract image of several stylized, translucent file folders, floating and overlapping in a diagonal pattern. The folders have a sheen in various shades.

2022-2025

THE STACK

An abstract image of several stylized, translucent file folders, floating and overlapping in a diagonal pattern. The folders have a sheen in various shades.

2022-2025

THE STACK

An abstract image of several stylized, translucent file folders, floating and overlapping in a diagonal pattern. The folders have a sheen in various shades.