Travelpayouts: как создать интуитивно понятный интерфейс в аффилиатном приложении

Главное о кейсе

Результат:
Каждый элемент дизайна общепринят и привычен, оправдывает ожидания пользователя, приложение вызывает доверие и чувство удобства.
В режиме единого окна доступна детальная статистика по партнёрским программам, кроме того приложение позволяет:
получать уведомления;
следить за балансом и выплатами;
быстро делиться реферальными ссылками;
искать информацию о работе Travelpayouts;
отправлять сообщения в службу поддержки;

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

Result:
Each design element is generally accepted and familiar, meets the user's expectations, the application inspires confidence and a sense of convenience.
In the single window mode, detailed statistics on partner programs are available, in addition, the application allows you to:
receive notifications;
monitor the balance and payouts;
quickly share referral links;
search for information about the work of Travelpayouts;
send messages to the support service;

The customer was satisfied with the cooperation, there are still not enough opportunities to edit personal information and details, copy links and widget codes, add projects to the full web version of the application. We are ready to implement this in the next releases.

Бизнес-задача и ее решение

Задача:
Сервис партнёрских программ для путешествий существует уже десять лет, мобильное приложение для него появилось в 2016-м году. Предыдущие версии делала не наша компания, это была инхаус разработка. В 2021 году руководство Travelpayouts обратились к нам для создания обновления, которое получило версию 3.0.

Task:
The service of partner programs for travel has been around for ten years, a mobile application appeared in 2016. The previous versions were not made by our company, it was an inhouse development. In 2021, the Travelpayouts management contacted us to create an update that received version 3.0.

В чём удобство:
Пользователь получает очень много данных, таблиц и значений. Это влияет на внешний вид и навигацию: мы хотели создать с одной стороны максимально информативный, с другой стороны – дружелюбный интерфейс. Экран телефона содержит в себе те же показатели, что десктоп, но он сам по себе намного меньше, а ведь на нём надо разместить несколько таблиц, каждую из которых можно изменить, вывести какой-то нужный показатель, сгруппировать по нужному значению, посмотреть клики, показы, доходы.
Такой большой объём информации надо было сделать не только хорошо читаемым, но и с возможностью интуитивного управления, поэтому дизайн получился максимально гибким и простым. При первом открытии возникает ощущение, что ты уже работал в этой программе, что интерфейс знаком. Все элементы, включая три классических таба внизу, спроектированы в соответствии с UX-правилом Якоба Нильсона – привычные паттерны и шаблоны должны соответствовать пользовательскому опыту.

В программе реализован принцип максимальной доступности всей информации:
пользователь получает только те данные, которые ожидает получить, и никогда не увидит лишних всплывающих окон и сложных фильтров. Ничего не должно отвлекать от значений дохода и показов – всё управление сведено к трём движениям пальцев – тап, скролл и свайп.
Главный экран отображает текущий баланс и статистику прибыли. Сведения о важных действующих программах можно закрепить вверху информационной таблицы.
Одним касанием календарь статистики переключается на значения текущего или прошедшего дня, недели, операционного или прошлого месяца и произвольного периода.

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

What is the convenience:
The user receives a lot of data, tables and values. This affects the appearance and navigation: we wanted to create on the one hand the most informative, on the other hand – a friendly interface. The phone screen contains the same indicators as the desktop, but it is much smaller in itself. You need to place several tables on it, each screen can be changed, output some desired indicator, group by the desired value, view clicks, impressions, income.
Such a large amount of information had to be made not only well readable, but also with the possibility of intuitive control, so the design turned out to be as flexible and simple as possible. The first time you open it, you get the feeling that you have already worked in this program, that the interface is familiar. All elements, including the three classic tabs at the bottom, are designed in accordance with Jacob Nilsson's UX rule – familiar patterns and patterns should correspond to the user experience.
The program implements the principle of maximum accessibility of all information:
the user receives only the data that he expects to receive, and will never see unnecessary pop-ups and complex filters. Nothing should distract from the values of revenue and impressions – all control is reduced to three finger movements - tap, scroll and swipe.
The home page displays the current balance and profit statistics. Information about important operating programs can be pinned at the top of the information table.
With one touch, the statistics calendar switches to the values of the current or past day, week, operational or last month and any period.
The program balance screen is divided into two parts - a general summary and a history of actions. Each value of the table is grouped and sorted by all available indicators. If there is too much data, the built-in filter that disappears when scrolling will help, so as not to interfere.
You can switch between programs directly from the balance screen without returning to the home page. Tabs are fixed and do not disappear when scrolling, hidden banners are available in the notification bar.

Прочая информация о кейсе

Travelpayouts – партнёрская сеть для монетизации туристического трафика. Клиенты сервиса зарабатывают на продаже авиабилетов, страховок, бронировании гостиниц, аренде авто и других услуг. Travelpayouts появился в 2011 году как партнёрская программа Aviasales. Aviasales платил веб-мастерам, которые приводили покупателей на сайт через маркированные ссылки и формы поиска. С момента запуска партнёрка обеспечивала до четверти всех бронирований и в дальнейшем стала самостоятельным каналом продаж авиационных и отельных сервисов.

Travelpayouts is a partner network for monetization of tourist traffic. Customers of the service earn money by selling air tickets, insurance, hotel reservations, car rentals and other services.

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

What have we done:
We developed the software package from scratch, without using the old code. In order for users not to lose the application, not to waste time downloading and re-authorizing, the original product was released as an update, not a separate application.
The interface has been worked out very carefully – affiliates should read statistics in a convenient form, understand at a glance what amount will come in the next accrual, which links work and for which programs.

Скриншоты

Комментарий заказчика

Еще в самом начале нашего общения стало понятно, что в CleverPumpkin может обратиться заказчик с любым бэкграундом и задачей и получить в результате отличный продукт. Команда проактивно и с полным погружением в контекст работает на всех этапах разработки: от формирования начальных требований, до тестирования и выпуска приложения в сторах.

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

Благодаря опыту команды CleverPumpkin нам удалось упаковать сложные по структуре и восприятию данные статистики в легко считываемый и интуитивно понятный интерфейс, с которым теперь могут работать наши партнеры.

Я уверен, что мы продолжим сотрудничество с CleverPumpkin по этому и любым другим проектам в мобильной разработке и будем рекомендовать их в качестве надежных партнеров и увлеченных профессионалов своего дела.