Редизайн интернет–магазина туров Travelata.ru

Содержание

Слайд 2

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

Цель
Сделать редизайн интернет-магазина туров travelata.ru , больше адаптировать
под

человека, его интересы и цели.
Слайд 3

Интернет-магазин travelata.ru Плюсы: Есть отзывы с фотографиями из инстаграм, такие отзывы

Интернет-магазин travelata.ru
Плюсы:
Есть отзывы с фотографиями из инстаграм, такие отзывы убеждают больше

, чем просто текстовые
Предложения с горящими путевками можно выбрать уже в поле ввода для поиска
Календарь низких цен
Сортировка разделена на блоки, это визуально упрощает ее
Есть общий рейтинг по отелям, основанный на отзывах
Минусы:
Цвет кнопок грязный, формы слишком разные
На баннере слишком много текста ,картинка тусклая
Нет никаких информационных блоков, статей
На внутренних страницах слишком много цветов для иконок, выделения текстов . Все в разнобой , нет единого стиля
Внутри карточки нет статистики цен
Нет дополнительных скидок, не заметен лидмагнит
Слайд 4

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

Задача

Упростить календарь цен , сделать через него возможным переход на конкретные

предложения по турам. Добавить больше предложений на главной странице, интерактивные блоки. Упорядочить отзывы. Сделать описание внутри карточки кратким
и информативным. Сделать наглядной карточку перелета. Вытащить лидмагнит и блог .
Слайд 5

Исследование

Исследование

Слайд 6

Плюсы Хорошая строка ввода для поиска. Все разделено. Яркий , хорошо

Плюсы
Хорошая строка ввода для поиска. Все разделено.
Яркий , хорошо читаемый

текст на банере, картинка не отвлекает.
Показана команда , есть небольшой рассказ о компании, вызывает доверие
Яркие и красивые карточки с читаемым текстом , привлекают внимание
Лидмагнит заметен
Минусы
Неяркие отзывы, нет доверия к их тексту
Нет меню, сложная навигация по сайту
Преимущества компании теряются в потоке карточек с предложениями
Первая страница не очень информативна
Важные блоки спрятаны, вряд-ли их можно заметить с первого взгляда
Слайд 7

Плюсы Есть меню с разделами и подразделами Акции , нестандартные предложения,

Плюсы
Есть меню с разделами и подразделами
Акции , нестандартные предложения, возможность

собрать тур по частям
Новостные блоки
Информация о необходимых документах,
о визах
Памятки для туристов
Минусы
Нет структуры, беспорядок на сайте
Слишком яркая фоновая картинка, отвлекает
Лишние поля для ввода
Мелкий , плохо читаемый текст
Сложно ориентироваться на сайте, так как нет навигации, нет акцентов. Нужно долго разбираться
Слайд 8

Плюсы Приятная цветовая гамма, картинки и фон не берут на себя

Плюсы
Приятная цветовая гамма, картинки и
фон не берут на себя больше внимания

, чем
текст и смыслы
Есть рекомендации, подборы туров по
направлениям
Удобные блоки с выгодными турами ( есть
кнопка, небольшая информация, акцент ,
привлекающий внимание человека)
Собственный блог
Есть график низких цен
Минусы
Непонятный выбор количества пассажиров в поле ввода данных
Кнопки плоские и текст на них мелковат
На некоторых страницах меню переходит в бок, это выглядит странно
Мало акцентов
Слайд 9

Плюсы Аккуратный текст ( шрифт) , есть структура Большие информативные отзывы

Плюсы
Аккуратный текст ( шрифт) , есть
структура
Большие информативные отзывы
Минусы
Скучный дизайн. Тусклые

цвета
Бледный текст
На первых этапах сценария вообще нет
акцентов. Даже кнопки не выделены ( только
в самих карточках товаров)
Мало информации
Нет акций, интересных предложений
Маленькие картинки
Слайд 10

Плюсы Хорошая визуализация на первых страницах Крупный текст , яркие кнопки

Плюсы
Хорошая визуализация на первых
страницах
Крупный текст , яркие кнопки
Понятны след. действия
Простая

форма для поиска
Есть отображение статуса путевки
Минусы
Плохие фотографии внутри карточек
Карточки с акциями маленькие, с плохой
визуализацией и плохо читаемым текстом
Лидмагнит не заметный и спрятан внизу
Преимущества не видно на странице
Нет отзывов
Слайд 11

Плюсы Действия разделены на шаги Хорошая идея с кнопкой подбора тура

Плюсы
Действия разделены на шаги
Хорошая идея с кнопкой подбора
тура в

меню
Есть акценты
Калькулятор с расчетом стоимости
В предложениях написана выгода
Минусы
Слишком много иконок
Из за 3 больших рядов страница
выглядит нагружено
Нет баннера, мало картинок
Много мелкого текста
Блоки и тексты расположены слишком близко друг к другу
Слайд 12

Плюсы Хорошо подобраны иконки Приятные цвета, ничего не выбивается Все в

Плюсы
Хорошо подобраны иконки
Приятные цвета, ничего не выбивается
Все в одном стиле
Хорошая идея

с большими карточками
(пример с Китаем)
Минусы
Так и не нашла кнопку о бронировании
или добавлении в корзину(хотя иконка
есть)
Кнопки разной формы, путает
После ухода с гл.страницы, интерфейс
становится бледным
На внутренних страницах нет кнопок
целевых действий
Очень мелкий текст
Слайд 13

Плюсы Каждое направление обозначено категориями Сразу показаны предложения с горящими турами

Плюсы
Каждое направление обозначено категориями
Сразу показаны предложения с горящими турами ( небольшая

информация и цена)
Функция персонального подбора с выгодными предложениями
Внутри направления есть описание курортов и рекомендации
Есть календарь туров внутри каждого направления
Минусы
Все на странице смещено вправо (как на 1 скриншоте)
Кнопки выбиваются из общей картины
Фон вообще не понятен
Если не всмотреться и не пройти следующие шаги, может показаться , что сайт очень плохой, хотя по функционалу намного лучше предыдущих
Слайд 14

Плюсы Яркий по дизайну Хорошая идея с видео, которое включается автоматически

Плюсы
Яркий по дизайну
Хорошая идея с видео, которое включается
автоматически
Статьи
Много видео отзывов
Сайт кажется

живым , не скучный
Минусы
Следующие действия отбрасывают на другие сайты
Не понятные переходы
Дальнейшие действия не понятны
Видео плохого качества
Текст в меню вообще не видно, сложно
читать
Слайд 15

Плюсы Ненавязчивое меню с иконками выглядит наглядно и понятно Есть календарь

Плюсы
Ненавязчивое меню с иконками выглядит
наглядно и понятно
Есть календарь цен по

направлениям
Выгодные предложения каждую неделю
Отзыва оформлены иконками, фото
Много фильтров внутри направления
Минусы
Рассказ о компании написан большим
текстом на весь экран, вряд ли кто-то будет
читать
Поле ввода на банере смотрится 1 строкой
разделения не видно , все слиплось
Статьи показаны серым блоком, опять же
большой текст, нет визуализации
В карточке товара очень большая кнопка ,
которая почему то наверху , выглядит это
нагружено и неудобно после просмотра
подниматься вверх, чтобы нажать кнопку.
Слайд 16

Плюсы Есть рекомендации Информация о визах, доплатах и сборах, памятка для

Плюсы
Есть рекомендации
Информация о визах, доплатах и сборах,
памятка для туристов
Показана динамика

цен
Минусы
На первой странице мало блоков, информации
Красные кнопки слишком выделяются,
из за этого нет других акцентов
Нет выгоды, скидок или горящих туров
Нет отзывов
Каждое действие открывается в новой вкладке
На внутренних страницах каждый заголовок выделен красой плашкой ,
что отвлекает внимание
Слайд 17

Плюсы Большие картинки без лишних рамок На карточках есть минимальная и

Плюсы
Большие картинки без лишних рамок
На карточках есть минимальная и
максимальная

цена
Сортировка имеет структуру, удобно
отмечать нужное
На карточках товара небольшое описание,
что сокращает количество кликов
Разделение на категории и виды отдыха
(в блоке «подходит для» )
Минусы
Сайт не всегда прогружает все блоки
На некоторых карточках текст сложно
читать
Карточки не разделены между собой , все
сливается в 1 картинку
Постоянно выходит «ошибка», приходится
обновлять страницу
Слайд 18

Очень нравится блог у aviasales. Много интересной информации, путеводители, советы. Приятные карточка статьи

Очень нравится блог у aviasales. Много
интересной информации, путеводители,
советы. Приятные карточка

статьи
Слайд 19

Вывод: 1. Почти на всех баннерах присутствуют поля ввода для поиска

Вывод:
1. Почти на всех баннерах присутствуют поля ввода для

поиска тура
2. Популярно графическое отображения динамики цен в виде графиков
3. Мало сайтов, на которых есть скидки и бонусы.
4. На большинстве есть информативные отзывы.
5. Часто используются иконки.
6. Цветовая гамма : голубой, желтый, оранжевый.
7. Только в 1 магазине есть статус путевки .
8. Карты есть не везде, хотя это очень важный пункт.
Слайд 20

Карточка персонажа

Карточка персонажа

Слайд 21

Эрнст, 28 лет аналитик Жизненные цели: Увидеть самые красивые места на

Эрнст, 28 лет
аналитик
Жизненные цели:
Увидеть самые красивые места на планете, побывать
в разных

странах , узнать о культуре народов мира
Цели взаимодействия:
Легкий поиск , быстрый выбор билетов, интересные предложения, простая навигация по сайту и покупка
в один клик
Цели конечные:
Быстрая и легкая покупка путевки, без лишних переходов
Слайд 22

Сценарий Заходит на сайт Заполняет поля для ввода, наживает кнопку «найти

Сценарий

Заходит на сайт

Заполняет поля для ввода,
наживает кнопку «найти тур»

Отмечает нужное

в поле сортировки

Просматривает карточки
с предложениями

Нажимает на 1 из карточек,
читает информацию о туре

Оформляет заказ

Переходит на страницу
рекомендованных статей

Слайд 23

Скетч

Скетч

Слайд 24

Главная страница 1. Меню 2. Баннер 3. Поля ввода для поиска

Главная страница
1. Меню
2. Баннер
3. Поля ввода для поиска тура
4. Рекомендации
5.

Лидмагнит со скидкой
6. Календарь цен
7. Видео нарезки с курортов
Слайд 25

8. Предложения с горящими турами 9. Отзывы из инстаграма

8. Предложения с горящими турами
9. Отзывы из инстаграма

Слайд 26

Страница категории 1. Баннер 2. Строка поиска 3. Календарь цен 4.

Страница категории
1. Баннер
2. Строка поиска
3. Календарь цен
4. Карточки с турами (справа)


5. Блоки сортировки (слева)
Слайд 27

Карточка товара 1. Блок с фотографиями 2. Небольшое описание отеля ,

Карточка товара
1. Блок с фотографиями
2. Небольшое описание отеля , с средней

оценкой
рейтинга
3. Блок с датами, городом вылета и прилета , видом
отеля . Справа цена и кнопка с целевым действием
4. Обобщенный отзыв ( слева) , отзывы текстовые
(справа)
5. Полная информация о туре
Слайд 28

Страница оформления заказа 1. Карточка заказа (отель, услуги ,даты) 2. Блок

Страница оформления заказа
1. Карточка заказа (отель, услуги ,даты)
2. Блок с авиабилетами
3.

Блок с ценой и функциями рассрочки
4. Заявка на оформление
5. Преимущества компании
6. После отправки заявки персонаж попадает на
страницу со статьями-советами по его направлению
Слайд 29

https://marvelapp.com/7j7f30h Интерактивный прототип: Скринкаст: https://youtu.be/huAWk6FkQns

https://marvelapp.com/7j7f30h

Интерактивный прототип:

Скринкаст: https://youtu.be/huAWk6FkQns

Слайд 30

Дизайн

Дизайн

Слайд 31

Основные цвета Акцидентный цвет Прозрачные цвета #00ADA9 #FFC636 #FF6444 #008CCF

Основные цвета

Акцидентный цвет

Прозрачные цвета

#00ADA9

#FFC636

#FF6444

#008CCF

Слайд 32

Шрифтовая пара

Шрифтовая пара

Слайд 33

Процесс создания

Процесс создания

Слайд 34

Слайд 35

Слайд 36

Сетка : 1440 (20/12)

Сетка : 1440 (20/12)

Слайд 37

Интерактивный дизайн-макет: https://marvelapp.com/4g9j499 Скринкаст: https://youtu.be/pY3eh6d0P7I

Интерактивный дизайн-макет: https://marvelapp.com/4g9j499

Скринкаст: https://youtu.be/pY3eh6d0P7I

Слайд 38

Детали Простая и понятная визуализация перелета. Не нужно долго разбираться в

Детали

Простая и понятная визуализация
перелета. Не нужно долго разбираться
в подробностях рейса,

сразу видно ,
что есть пересадка, через какие аэропорты
проходит перелет и сколько времени
на него уйдет.
Слайд 39

Календарь не нагружен, в него не нужно всматриваться. Самая низкая цена

Календарь не нагружен, в него не нужно всматриваться.
Самая низкая цена сразу

выделена , при нажатии можно
Попасть на страницу тура по этой цене.
Слайд 40

Можно сразу, не читая отзывы, увидеть статистику, и общую оценку по каждому критерию

Можно сразу, не читая отзывы, увидеть статистику,
и общую оценку по

каждому критерию
Слайд 41

Сайт в жизни

Сайт в жизни

Слайд 42

Слайд 43

Источники информации Infogra.ru behance.net Школа веб-дизайна Максима Солдаткина (YouTube)

Источники информации

Infogra.ru
behance.net
Школа веб-дизайна Максима Солдаткина (YouTube)

Слайд 44

Интерактивный дизайн-макет: https://marvelapp.com/81j4d74 Скринкаст: https://youtu.be/H-AFBIU-zKk

Интерактивный дизайн-макет: https://marvelapp.com/81j4d74

Скринкаст: https://youtu.be/H-AFBIU-zKk

Слайд 45

Арт-дирекшн

Арт-дирекшн

Слайд 46

Идеи для рекламы. Представьте как было бы классно, менять времена года

Идеи для рекламы.

Представьте как было бы классно, менять времена года по

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

1.

2.

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

3.

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

Слайд 47

4. Каждый день мы видим фотографии завораживающих пейзажев. Они окружают нас

4.

Каждый день мы видим фотографии завораживающих пейзажев. Они окружают нас дома

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

5.

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

Слайд 48

Представьте как было бы классно, менять времена года по щелчку пальцев.

Представьте как было бы классно, менять времена года по щелчку пальцев.


Многие люди испытывают дискомфорт, месяцами живя в том или ином времени года.
Мы можем дать вам возможность оказаться в желаемом климате в минимальные сроки, а не ждать перемены погоды долгое время.

МЕНЯЙ ВРЕМЯ!

Слайд 49

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

Оффер

Изменить время года в один клик, с помощью нашего сайта
с

самыми выгодными предложениями туров.
Слайд 50

Реклама в жизни

Реклама в жизни

Слайд 51

Слайд 52

Слайд 53

Слайд 54

Финальный скринкаст: https://youtu.be/DeteXKSOrJQ

Финальный скринкаст: https://youtu.be/DeteXKSOrJQ

Слайд 55

Контакты VK : https://vk.com/ksh_313 Почта: kss_313@mail.ru ksh5673095@gmail.com Ксения Behance: https://www.behance.net/ksh56730951456

Контакты

VK : https://vk.com/ksh_313

Почта: kss_313@mail.ru
ksh5673095@gmail.com

Ксения

Behance:
https://www.behance.net/ksh56730951456