/ Field: UX-UI design / Platform: iOS, Android / Industry: smart cities / Tools: Figma, XD, Illustrator, Photoshop /
Project overview
The regional government of Lanzarote (Cabildo de Lanzarote) launched a comprehensive project to modernize and digitalize the island’s public transport system and improve the user experience of the users. The scope of the project included digital bus stops with real time information, branding, an integral signage design language overhaul, and a user oriented mobile app.
Branding and signage design was also part of the project.
The app: Requirements & Objectives
The mobile app is the core of the project, integrating and showcasing all aspects of the new Lanzarote Mobility system. At its most basic, it had to include real-time information of bus arrivals, a map view of bus stops, and information about fares, lines, and schedules. Any other relevant functionality allowed by the public transport fleet management system would be welcome as long as it was useful for the passengers. The features and information should be presented in a modern and intuitive interface following the new visual design language of the island’s transport system which was designed in parallel.
Analysis & ideas.
The app should provide users with a renewed sense of confidence and pride in their public transport. Lanzarote aims to become a smart island, and the digitalization of public transport is a key element of this objective. Since this is only the first step, the UI of the app should allow for the integration of more services as the digitalization process advances. A modular user interface based on “components”, each of which contains a specific type of information or functionality would be a perfect way of allowing clutter-free feature growth down the line. Similar apps from major cities around the world were studied to understand how they tackled common problems, particularly when it came to information architecture.
Testing & iterating.
Surveys, interviews and card sorting exercises were conducted to understand the users needs and establish the hierarchy of features and sections within the app. The research showed that the most valuable information for the users are the real-time bus arrivals, so the UI design should reflect that. Low, mid and high fidelity prototypes were created and tested using contextual inquiry. The first ideas based on a tabbed interface were discarded in favor of what showed to be a more intuitive concept free of menus that significantly reduced the necessary taps to reach any part of the app. The focus on modularity resulted in the concept of self contained "Stop Cards" with all relevant information about a specific bus stop within, and in a coherent, versatile visual language that not only looks fresh, but can also be easily be expanded to integrate new services in the future.
The final UI design. Home screen (left) and Bus line route view (Right).
Design.
The final interface is light and clean, with an “airy” feel to it. It emphasizes ease of use without feeling dull or sterile. The use of color is reserved for key elements such as the color coded bus lines or important signage icons that the users will become familiar with as they use the app. The home screen contains every important feature of the app, as well as the branding for Lanzarote Mobility and relevant institutions which are important stakeholders that should be recognized.
Each section is clearly identifiable by a unique icon, and no functionality is more than 3 taps away, with the most important features being just 1 tap away from the home screen. The menu under a “burger” button is avoided in favor of a more intuitive and usable hierarchy of buttons based on color and size on the home screen.
Both UX and UI remain consistent across platforms. All important interactions are designed to be intuitive and platform agnostic, so users can enjoy the same ease of use regardless of if they use Android or iOS.
List view of bus stops. Left to right: bus arrivals, stop information, new user onboarding.
Map view of bus stops. Left to right: Map overview, "Stop Card" pop-up.
The "Stop Card" feature.
The most distinguishing feature on the app are the Stop Cards. Each card contains all the information about a specific bus stop, including real-time bus arrivals, location, bus lines and characteristics of the bus stop. The cards are the main focal element of the UI, appearing everywhere from the map view to each specific line routes, and maintaining consistent interaction patterns throughout the whole system. Users quickly understand and become familiar with the cards and their behavior regardless of whether they find them as part of a list, or as pop-ups on a map.
The "Stop Card" component in different states of visualization. Users interact with the card using the CTAs on the top left.
"How to Go" feature (or how to avoid the Google Transit API).
It became clear during the research exercises that the users would really appreciate having a “how to go” functionality based on their location to help them plan their commute. This kind of advanced functionality wasn’t contemplated in the initial project briefing, and it is usually implemented using third party APIs such as Google Transit. This was a big challenge, primarily because it wasn’t in the interest of the public administration to rely on private third parties with opaque pricing/business strategies for such an important feature of the app. A lot of research and ideation went into how to implement this functionality using only the data we had available, from the app itself and the databases of the public transport fleet management system. The result is a simple to use, streamlined feature that helps users plan routes quickly and easily. It has all the information that users need while maintaining the administration’s control over such important public service.
"How to Go" feature flow. From left to right: start, query results, bus stop details pop-up.
Bottom line.
Lanzarote Mobility was a very big and complex project with a lot of moving parts. Working in a user centered design system with so many diverse stakeholders such as public entities, private bus companies, and IT service providers is never easy. But with a lot of thinking, dialogue, teamwork, and specially when everyone’s interest is the public benefit, something special can happen. The result is a beautiful, expandable and easy to use platform that will serve as a great base to the smart island mobility objectives. User reception of the app has been great among locals and tourists alike, and the public image of public transport has skyrocketed, with up to 50% increase in usage in just a few weeks after launch. Lanzarote may not have one of the biggest transport systems in the world, but now it certainly has one of the best public transport apps.