Ecolines — один из крупнейших операторов автобусных перевозок в Европе

Основная цель проекта - полный редизайн и разработка приложений с нуля для существующего оператора междугородних автобусов. Заказчики обратились с просьбой обновить приложения Ecolines и Autolux. Приложения имели устаревший пользовательский интерфейс по состоянию на 2023 год и содержали много технического долга со стороны мобильной разработки.

Из-за устаревшей технологии пользователи сообщали о большом количестве существующих ошибок. Поэтому перед командой стояла задача обновить современные приложения с работающим функционалом.

We started with the Discovery phase, interviewing the client to determine the website's needs. Using the Lean Model Canvas, we broke down the business idea into key assumptions for deeper analysis. We surveyed with the participation of respondents provided by the client, which allowed us to create prototypes, an empathy map, and a Customer Journey Map.

We analyzed services such as Google Maps and Google Earth to combine their experience with the experience of our website users. We developed several screens for ease of use: viewing airports on a map or in a list, route planning, flight path details, and runway information. The Amenities screen provides information about services and activities such as camping and cycling. Users can generate PDFs, read or leave reviews, add airports to their favorites, and view photos

When we accessed the admin panel, we discovered the absence of a database and quickly informed the customers about the scope of work. The admin panel would be more complex than the website, including the map, runway, and directional integration features. After completing the user part, we started developing the admin panel in the new website style.

Мы использовали готовую дизайн-систему заказчика, адаптировав ее в соответствии с потребностями разработки приложений под 2 системы: iOS и Android.

Вариативность цвета и оттенков системы определяется процентом прозрачности в базовых цветах, что придает гибкости и универсальности дизайн системы. Мы выбрали базовый шрифт Geometric Euclid Circular A от Swiss Typefaces. Шрифт имеет нестандартные формы, но при этом остается хорошо читаемым и понятным. Благодаря этому типографика в продукте является оригинальной и чистой.

Поскольку перед нами стояла задача обновить приложения, для начала нужно было понять весь функционал, с которым мы будем работать. Для этого наш дизайнер разработал Функциональную карту приложения, где изобразил все основные потоки и разделы. Затем эта карта была согласована с заказчиком, и дизайнер смог приступить к работе над UI/UX.

Мы уже работали с существующей частью бэкенда, предоставленной нам клиентами. Поэтому со стороны мобильного разработчика задача заключалась в изучении существующей части бэкенда и составлении документации по API.

Самое интересное в этом случае то, что проектирование и разработка велись одновременно, в двух параллельных процессах. После утверждения одной части экранов, разработчик принимался за работу, а дизайнер приступал к следующей части.

The biggest project challenge was migrating from MsSQL to PostgreSQL. We had to transfer data from the previous database and change the data storage structure. Other technologies used: PHP 8.2, Symfony 6.4, Redis, PostgreSQL, AWS SQS, AWS S3, Kubernetes.

We used Gotenberg for map clippings, adapting time zones by location in the United States. We integrated data from the FAA to create airports, some of which had to be entered manually. The site also supports the generation of PDFs for route building, which allows users to fly on our maps and navigate using the ForeFlight system.

To realize our goals, we used the lightweight Vue 3 framework and the NuxtJs meta-framework, which is based on VueJs and NodeJs. This allowed us to develop the site's server and client components efficiently, ensuring high performance and usability. The challenge was working with the map, as we had to process many coordinates. The backend provided us with these coordinates, which we displayed on the map. In the previous stages, we also had direct routes that included information about landing, takeoff, and compass directions, which required considerable effort. In addition, we had two designs - desktop and mobile. We had to use third-party libraries to display some aspects on the front end.

The variability in color (shades) is determined by the percentage of transparency in the base color! Disregarding this parameter and substituting it with a solid color is not advisable. Our choice of font is the basic Geometric Euclid Circular A from Swiss Typefaces.