🤠 Кейс: решение проблем русской турфирмы. От UX до UI. Топовые фишечки проектирования

Эта статья даст вам подробное описание того, как делается комплексная работа по созданию сайтов, учитывая UX-исследования, построение гипотез, проектирование интерфейсов и отрисовку UI части для конечного увеличения конверсии или выполнения другой цели поставленной заказчиком.

Увеличить количество заявок на туры, показав что путешествие по России это не только захватывающе, но и комфортно для всей семьи.

Специфика работы

Отдельно отмечу, что данная турфирма-агрегатор специализируется на упаковке различных российских туров, с маркетинговой стороны, занимаясь их продвижением и усовершенствованием программы.

И задача стоит более глубокая, чем кажется на первый взгляд, а именно - изменение мнения у россиян о российском сервисе в турах, который многих разочаровывает.

1. Анкетирование заказчика и выявление главных целей, а тажке сборка мудборда.

2. Поиск и анкетирование респондентов + формирование гипотез.

3. Отрисовка ИА и выделение основных core-сценариев.

4. Прототипирование и согласование получившихся экранов.

5. Финальный UI (фишки по использованию колористики и правильных образов, для создания доверия к продукту).

Та цель которую заказчик называет в самом начале - чаще всего самая поверхностная. А правильные вопросы, словно терапия - помогают достучаться до того, чего же на самом деле хочет клиент.

Поэтому после составления персонального брифа, заказчик дал меткие ответы на вопросы из брифа и я выделил для вас ключевые точки, на которые делал упор:

• Заказчик хочет стать уникальным игроком на рынке внутреннего туризма, предложив продукт, аналогов которому нет.

• Для клиента является важным показать Россию ее жителям и сделать это с комфортом и хорошим сервисом.

• Маркетинг и пиар являются слабым звеном в продукте. Нужно улучшить их и поднять количество поступающих заявок на туры.

Мудборд

Референсы были собраны с учетом нескольких параметров: типографика, цвета, композиция (интересные варианты) и визуальны образы (предметы)

В итоге мы согласовали вот эти параметры:

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

- Типографика. Здесь мы выбрали "твердые" шрифты, без лишних изгибов и завитушек. Так как эти шрифты надежные, словно скала (укрепляют доверие пользователя).

- В образах было решено использовать больше живых фото, чтобы показать красоту нашей страны.

Из своего 4 летнего опыта на фрилансе и более 80 консультаций которые я провел с клиентами и такими же фрилансерами, я выделил одно из главных правил старта работы:

Я собрал все данные по респондентам и определил их ключевые потребности используя Jobs-As-Progress в качестве основы.

Получилась примерно такое разграничение по полам, на основе данных клиента и анализа конкурентов:

60% - мужчины

40% - женщины

Хочу сразу отметить, что клиенты "MyRussiaTravel" в основном делятся на две большие группы:

- Уставшие от повседневных дел мужчины, любящие экстрим.

- Духовные люди, ищущие интересные вызовы (йоги, эзотерики и т.д.)

Это большие кластеры аудитории, которые оставляют за собой большую возможность лавировать внутри них и более детально вычленять отдельные, более узкие сегменты аудитории.

Но что же им нужно?

То есть если смотреть по той же лестнице Бенджамина Ханта, то наши потенциальные клиенты и опрошенные респонденты находятся на 3 и 4 ступени. Либо они знают о свое проблеме и о множестве способах ее решения, между которыми выбирают, либо уже знают и точное решение - что им нужно куда-то насыщенно уехать отдохнуть, но не знают куда именно.

Шаг 2 - были спарсены сообщества конкурентов и опубликован пост-анкета для аудитории около 2000 человек (самозанятых фрилансеров и эзотериков).

Сначала я выделил несколько разных сценариев, а потом выделил 3 ключевых, которые представлены ниже.

Напомню, основная цель сайта - оставить заявку на тур.

1. Пользователь ищет нужный ему тур.

Потребность - нужен определенный тур, я уже знаю куда поеду и мне нужно найти тур на сайте.

Контекст - давно уже хотел поехать в тур по определенной стране и из поиска по тур-кампаниям, вышел на этот сайт.

2. Пользователь не знает какой ему тур выбрать.

Потребность - давно хотел поехать в туры, но не знаю куда именно. Вариантов очень много. Но есть особые пожелания.

Контекст - знакомые подсказали эту турфирму и теперь я думаю куда можно поехать на зимние каникулы. Интересуют туры, которые считаются топовыми. Мне нужно отдохнуть, а где - уже особо не важно. Там уж выберу что мне больше всего подходит.

3. Пользователь ищет что подешевле

Потребность - мне особо нет разницы куда я поеду. Важны мои субъективные критерии и самое главное - цена.

Контекст - вбивал везде запрос “горящие туры”, чтобы найти интересное и недорогое решение у нас в стране.

Вот основные экраны, которые были представлены для заказчика. От 2 экранов решено было отказаться, так как они были не особо актуальны (речь идет о внутренних блоках личного кабинета)

После согласования этих экранов и уборки ненужных, я приступил к проектированию.

В нем я придерживался 2 главных принципов:

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

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

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

Начну я пожалуй с колористики и потом мягко перейду к заключительной части проекта.

Для того чтобы подчеркнуть нашу концепцию путешествий, я использовал два основных цвета в дизайне:

Синий - идеальный цвет для того чтобы умиротворить и успокоить человека, мягко показав что с нами безопасно.

Давайте я приведу слова Мишеля Пастуро - французского историка-медиевиста. Который С 1983 года руководит кафедрой истории западной символики в Практической школе высших исследований в Париже и написал уже несколько книг про историю разных цветов.

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

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

Главный экран и увлекательный подбор картинки.

Клиенту важно было показаться российский простор и красоту в сочных фотографиях.

Поэтому я начал поиски фотографий, по следующим критериям:

- Подходящие и контрастирующие с текстом. Чтобы текст не сливался с фотографией.

- Чтобы на фотографии был синий или близкий к нему цвет, который будет в дальнейшем использоваться в оформлении.

И еще одна штука, для которой я придумал простую мысленную технику.

Телепорт

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

Как вам оно? Нравится? Осмотритесь вокруг. Хотели бы туда отправиться по-настоящему?

Я проделывал эту технику на себе и еще нескольких человек из тех респондентов, которых опрашивал.

В результате, около нескольких часов ушло на поиски 5 вариантов картинок, из которых впоследствии была выбрана только одна.

Ниже вы можете увидеть 3 главных экрана сайта (поиск, горящие предложения и уникальные отличия нашей компании).

3 экран нацелен на закрытие самых частых возражений, которые случаются у наших клиентов.

Вот они:

- В других турфирмах делали все очень медленно. В итоге пришлось собираться в спешке.

- Мне часто предоставляли ужасный сервис. Не хочу больше так попадаться.

- А что если вы не сдержите обещания в отношении ключевых вещей в туре?

Эти возражения были успешно закрыты в данном экране.

Мобилка

Частая проблема бизнесов, которые хотят презентовать свои команды (обычно до этого вообще не доходит) - в картонности фото. Нет привязки к теме. В фото просто нет жизни.

Поэтому я взял фотографии, которые напрямую связаны с тем, чем занимаются люди.

На картинке ниже расположены два экрана. Экран выбора туров и экран самого тура.

В самом туре важно было по-максимуму описать что туда входит. Сколько дней, что включено и что с собой брать.

Все эти вопросы были подробно и эстетически закрыты.

Вот как выглядит весь проект сверху:

И да, как я уже упоминал выше, сайт был выполнен мною в рамках учебного проекта с реальным заказчиком. Я обучался под руководством основателя студии топ 10 в России "Everest" - Владимира Белоусова.

И это также не первый мой проект за 4 года работы на фрилансе, только вот настолько глубоко, я прорабатываю проект впервые.

Поэтому сейчас я очень глубоко ушел в UX, используя в нем свои знания из сферы маркетинга и психологии.

Ну и конечно я буду рад конструктивной обратной связи от коллег. Поэтому велком в комменты).