Public transport, trains, buses, VTC, bicycles, taxis, scooters, car-sharing, car-pooling, … Users are currently overwhelmed by a large number of mobility services. Forced to switch from one application to another, MaaS was born out of this observation. The objective: To bring together a multitude of mobility services within a single platform. But “unifying several services” necessarily implies “different experiences and interfaces”.
The question that arises is how to optimize in the best way possible a MaaS application in terms of UX and UI design. Our Lead Designer, Igor Tcherepoff, has addressed this question by preparing an explanatory guide. Divided into 3 articles, the first part aims at clarifying the concepts of MaaS but also UX and UI design applied to mobility applications. Then, in a second part, we will apply theory to practice. And finally, we will end by presenting you our MaaS application prototype.
On the road to MaaS applications
The mobility experience revolution
Much more focused on the user experience, this concept, coming straight from the Nordic countries, extols mobility as a service. Hence the acronym “Mobility as a Service”. The goal: Simplify and make the user journey more fluid. A real “travel assistant”, the user will be able to plan and book his or her journey door-to-door. All this on the same mobile platform, regardless of the type of intermodal or multimodal journey. To find out more, please read our article devoted exclusively to MaaS.
The four levels of MaaS applications
Coveted by users, cities and the tourism industry at the same time, it is important to remember that there are different levels of MaaS platforms. These different levels have been defined by Joël Hazan, Nikolaus Lang and Hind El Abassi Chraibi of the Boston Consulting Group. There are four levels, each level is incremented with an additional functionality.
- Level 1: “planning”, application with the sole purpose of finding out about your route. This is notably the case with Google Maps, the new version of Apple Plans, Mappy or Moovit.
- Level 2: “planning + ticket sales”, characterised by platforms aggregating different mobility services. The user has the possibility of reserving them and commissions are generated on each sale. This is especially the case with the Trainline travel agency or with the future Île-de-France Mobilités application by the end of 2020.
- Level 3: “planning + ticket sales + fares setting”, distinguished from level 2 with the possibility of establishing a real customer acquisition strategy via operator pricing. This is notably the case with Whim, the reference application of the MaaS, nicknamed the “Netflix of Mobility”. Or the Pass Citymapper. These two players have set up a monthly subscription allowing the user to use the different modes of transport available to them.
- Finally, Level 4: “planning + ticket sales + fares setting + incentives”, the last step, it also have the process of implementing strategies to encourage users to opt for the use of their MaaS application or to change the use of their usual modes of transport.
As we can see with this pyramid, a complete MaaS application must combine different essential features. From planning, to booking, to payment or incentive, it is essential to look at the UI/UX design aspect in order to deploy the most functional and fluid platform possible. As a result, it will be possible to present an application entirely at the service of the user.
UI and UX Design, determining factors in the mobility experience
Only one letter changes and yet IU and UX Design are two complementary but different notions. Still too often confused, these two concepts approach product design, but from different angles. There is nothing better than illustrating it with a daily-use object. Namely, the Heinz ketchup bottle.
As illustrated, we are dealing with two bottles of ketchup, yet the way of using it differs. Indeed, with the first bottle of ketchup, it is more difficult to come and collect the rest of the product when the bottle is almost finished. This can make using the product unpleasant. However, from an aesthetic point of view, the first bottle can be considered more attractive.
Although the design may seem less attractive, with the second bottle of ketchup, it is easier for the user to use the product, even at the end of its life. This is where UX Design was born. UX Design is the acronym for User Experience Design, which means designing a product or service with a focus on the user experience.
Two different entities…
The UX designer therefore focuses on how the user interacts with the product, in our case, an application. This means anticipating the user’s emotional reactions to your product. In short, the UX designer is responsible for determining how the application works. This mainly involves: user research, definition of personas, information architecture, tree structure, interactions, prototyping and user tests. As pointed out by Travis Carter and Tom Gilovich in “Journal of Personality and Social Psychology”, “for the same price, humans favour the purchase of a pleasurable experience to which they have made a sentimental connection rather than a material purchase without emotion.” This is the Holy Grail of UX designer.
But what about UI Design? UI stands for User Interface Design, so UI is all about interface thinking. Indeed, it means making the product as attractive as possible. The application must be visually stimulating, and the user must want to interact with the application. This includes graphic design, illustrations, typography, screen composition, colors, animations, and the design of buttons and navigation elements.
Therefore, as you will have understood, UX and UI are two indivisible entities. And this also applies in the design of a MaaS application. Indeed, the appearance of the interface of your MaaS platform plays an important role in the user experience. The user must feel confident. He will be more inclined to book and pay for his different modes of transport directly from your mobility application. It is this experience that will bring an image of trust to your application and thus build loyalty. It is therefore essential to establish a real strategy upstream around the user journey. Creating a synergy between UI and UX Design means making sure you offer your customer an ergonomic MaaS application with maximum comfort, efficiency and practicality.
To summarize in a few words, in order to have a successful user experience, your application must be visually appealing (UI) with intuitive use (UX).
Decomposition of the thinking process and production
When designing a mobile MaaS application, a whole team is mobilized. From the UX Designer to the UI Developer via the Full-Stack Developer, the creation of the MaaS solution generally goes through 3 main key steps. Namely, “R&D”, “Creation” and “Production”.
1) Research and development of a MaaS application
Let’s start with R&D, the premise of the project. It mainly involves the UX Designer. The UX Designer’s first mission is to establish the user strategy by defining the following 4 criteria:
- The strategy: to understand and highlight the expectations of users regarding the ideal MaaS application but also how we will meet those expectations.
- The environment: define the context and the functionalities that our product should have. This is also the right time to think about the constraints and issues that may arise from MaaS. Such as, for example, the booking processes that differ between a VTC and scooter service.
- The skeleton: with the design of the zonings (the structure of the key pages) and the wireframes (animations, how the page works and the type of content that makes up each large zone).
- And finally, the surface, with the creation of a mock-up, including the different screens of the MaaS mobile application.
2) The creation of the MaaS application
Next comes the so-called “creation” stage. This second phase mainly involves the Graphic Designer. His mission is to establish the graphic environment, linked to the values of the brand. It is important to immerse the user in a universe that is specific to your identity. It is therefore in this sense that the Graphic Designer will try to determine :
- The corporate identity and style guide, with the definition of colours, typography, shapes, textures, …
- Visuals, through photos, illustrations, videos, iconography, logotype,
- The composition of the pages, with the design of the interface elements such as buttons, burger menu, …
- Animations: with motion design, animations, page transitions,…
3) The production of the mobile application MaaS
This is where the Graphic Designer and the UI Developer come together in the project. Indeed, the UI Developer’s mission is to deploy the mock-ups and animations designed by the Design team. This is when we enter the production stage. The interface will then be able to see the day with the “Front development”. Once finished, it’s the Full-Stack Developer’s turn to come into play. He will mainly work on the Back Office, the invisible part on the user side. He’s usually in charge of setting up, configuring and maintaining the server and the database.
To conclude this article, you will find below a summary of the production process of a MaaS solution.
Discover now the second part of this article.
Contents: Comparison of five mobility applications in UX/UI Design followed by the design of our prototype MaaS application.
You may also like
January 11, 2021