Саша Бизиков

Концепт главной страницы сервиса Туту.ру

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

На этой неделе закончил работать над тестовым заданием для Туту.ру. В этой заметке расскажу о задаче, что сделал для её решения и покажу результат.

ЗадачаЗа две недели разобраться, как устроена главная страница Туту.ру и представить свою улучшенную версию.

Процесс

Как выглядела главная страница:

Текущая версия главной страницы Туту.ру

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

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

Результат

Основные тезисы новой главной:

Макет кликабельный, подходит для экранов с шириной 1280 пикселей.

Концепт главной страницы Туту.ру

°°°

За время работы над тестовым заданием было проведено две итерации показа макета. Огромное спасибо дизайнерам из Туту.ру Никите Иванову и Льву Пикалёву за ценные советы и возможность выполнить задание!

Это был полезный для меня опыт. Почитайте моё описание дизайн-процесса для тестового задания в школу Яндекса и редизайн главной страницы моего блога.

Буду рад, если оставите комментарий с критикой работы или ценный совет как можно сделать лучше.

°°°

Результат: не прошёл. От дизайнера ожидался несколько иной набор «свойств», не вызвал чувства «а чё, так можно было?».

Поделиться
Отправить
Отправить

11 комментариев

  1. Sergey Korol 15 октября 2016

    https://uploads.disquscdn.com/images/5e1d8c1019036dc6244c4eed9382fa0b672eb77569c29ac42f1136a2727d6a7d.png

    Я не дизайнер, но это место мне кажется странным.

    — Очень разряжено. Селектор выбора типа транспорта куда-то улетел.
    — Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю». Мне кажется, что поездки всегда чётко ассоциируются с датами.
    — Под полями — нумерованный порядок действий. Но сейчас он словно привязывается к полям, и это раздражает.
    — Непонятно, зачем нужна кнопка «Найти билеты».

  2. Константин 15 октября 2016

    Если сложно определиться с тем, как сделать лучше — делай проще. Как я понял, целевой действие — заказ билета, так что на главной странице можно оставить только форму заказа и ссылки на всё остальное, для навигации. Из стандартного —убрать все сомнительные утверждения, вроде «самый популярный»; убрать дублирующие элемент, вроде «Туту.ру», которое и в Лого и рядом в тексте; прочее.

  3. Саша Бизиков 15 октября 2016

    Сергей, спасибо за замечания!

    > Очень разряжено. Селектор выбора типа транспорта куда-то улетел.
    Во время показа работы дизайнерам из Туту, как раз поговорили об этом. Первый раз попробовал применить сетку в дизайне сайта, выбрал 4 колонки, этого оказалось недостаточно. Как ты правильно заметил, вышло очень разряжено. В следующей работе попробую применить другой подход: сначала составлю структуру, а только потом буду выравнивать по сетке и не с 4 колонками, а 12 или 24.

    > Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю». Мне кажется, что поездки всегда чётко ассоциируются с датами.

    Писать «Через неделю» не надо. В поле указывается дата через окно выбора даты (дата пикер). Подпись «через неделю» для того, чтобы легче читалось, во всяком случае на мой взгляд читается легче, но я могу и ошибаться, раз тебя это смутило.

    > Под полями — нумерованный порядок действий. Но сейчас он словно привязывается к полям, и это раздражает.
    А говоришь не дизайнер! Да, об этом тоже сказали во время демонстрации макета. Если бы не выравнивал по сетке, было бы интересно, это я уже уяснил.

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

  4. Саша Бизиков 15 октября 2016

    > убрать все сомнительные утверждения, вроде «самый популярный»; убрать дублирующие элемент, вроде «Туту.ру», которое и в Лого и рядом в тексте; прочее.

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

    > Если сложно определиться с тем, как сделать лучше — делай проще.
    Согласен, это отличный подход, но мне кажется что он хорошо подходит когда начинаешь делать продукт. В редизайнах его сложно использовать, т.к убранные лишние элементы могут сильно повлиять на отношения аудитории к продукту. Поэтому тут нужно действовать аккуратно, «рубить с плеча» — опасно, можно потерять аудиторию.

  5. Grawl 15 октября 2016

    Уровень работы как раз такой, что я бы тебя нанял, не боясь учить дальше и развиваться вместе. Придраться есть к чему, но страница точно стала лучше. Только вот одно но: жёлтый цвет неприятен в таких количествах.

  6. Саша Сушко 15 октября 2016

    >> Не верю, что человек будет писать в поле ввода «Когда» — «Через неделю».
    > Писать «Через неделю» не надо.

    Меня это тоже смутило. Привычно под полями видеть пояснения к полям, либо пример подстановки. А тут, получает, просто «очеловечивается» вводимая информация: ввел «Оренбург», подписалось «Из Оренбурга». А нужно?

    А то, что получилось убрать дубль меню: одно строкой, второе вкладками формы — это круто. Хотя, уверен, в ТуТу не согласятся.

  7. Саша Бизиков 16 октября 2016

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

  8. Саша Бизиков 16 октября 2016

    > А нужно?
    Возможно не нужно, это же концепт. На тот момент, это показалось интересной идеей, которую отобразил.

    В Туту ничего против такого меню не сказали, спросили только как пользователи смогут перейти на раздел.
    При прокрутке меню фиксируется. На видео можно посмотреть как это примерно могло бы выглядеть:
    http://share.bizikov.ru/tutu_v02.05_0810_fixedmenu.mov

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

  9. Igor Dyakov 27 октября 2016

    https://uploads.disquscdn.com/images/95c3b120229c1c2fac594cef678e8a34ebe14ed2716c799680e5a21bb7fe14b0.png

    Стоит обратить внимание насколько снизилась информационная плотность

  10. Alexandr Schetinin 16 марта 2017

    Подскажи как делать длинные скриншоты с тенюшкой на маке:)
    Понравился твой блог. Много полезной инфы!

  11. Саша Бизиков 16 марта 2017

    Сначала делаю скриншот всего сайта через плагин для Хрома — https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl.

    Если это экран сайта из Скетча, то просто сохраняю файл. Потом добавляю браузер с тенью (можно и без тени) через сервис http://getcover.ru

Ваш комментарий

Ещё заметки

Как поставить обучение на поток при небольшом количестве времени

Отвечаю на вопрос читательницы о том, как у меня устроен процесс обучения.

Лайфлист дизайнера

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

План

Третья часть из серии заметок про составление плана развития на год. Описываю как составить план развития дизайнера.

Инструмент

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

Цель

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

100 книг для дизайнера

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

Первые 90 дней в компании

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

Тестовое задание для RedMadRobot

Выполнил тестовое задание на вакансию дизайнера-стажёра для RedMadRobot. Попробовал Фреймер в деле, получил отказ и поставил новую цель. В конце расскажу, зачем публикую описания дизайн-процессов.

Сайт для Сергея Сичкар

Задизайнил и сверстал блог для Сергея Сичкара. В заметке описываю процесс работы.

Опыт покупки MacBook Pro

В апреле купил MacBook Pro, середины 2012 года. Не новый, а с рук. В заметке кратко поделюсь основными наблюдениями и полезными ссылками.

Процесс обновления главной страницы

Задизайнил и сверстал главную страницу своего сайта, ниже опишу процесс. Главный вопрос, который задал себе: зачем это делать? Точно необходимо? Бизиков.ру — личный блог, куда пишу заметки о прочитанных книгах, советы по разработке и наблюдения. Стараюсь постоянно развиваться, и сейчас самое время завести главную страницу, которая сможет рассказать обо мне посетителю: что умею делать и как со мной

Школа мобильного дизайна: результат поступления

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

Лайфлист дизайнера

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