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

Задача
Спроектировать сервис, который позволит абоненту телефонного оператора пожаловаться на качество сотовой связи или интернета в определенной географической точке и получить отклик от оператора

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

Блокнот → Скетч → Фреймер студия

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

note

Для примера выбрал «Мой Билайн». Приложение сделали ребята из RMR. В нём уже есть чат поддержки, который можно улучшить в рамках тестовой задачи.

Сформулировал основные отличия от текущей реализации. Набросал экран в Скетче и перешёл к прототипу.

Результат задачи в виде статичных картинок — не интересно. Будет круто, если покажу живое общение оператора с пользователем. Поэтому основную часть времени провёл во Фреймере.

Студия Фреймер

Фреймер Студия. Слева код, справа — результат

Презентация

Презентацию сделал в Кейноте. Чтобы вам было удобно смотреть, записал видео и опубликовал на Ютубе:

Результат

Отзыв от директора по дизайну RedMadRobot, Павла Горшкова:

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

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

Σ

Согласен с  Павлом, интерфейс выглядит не очень красиво. В лекции «Дизайн + 1» Людвиг говорил про развитие дизайнера. Прокачивать каждый навык по очереди:

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

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

Как развивать UI навык?

  1. Выполнить все задания конкурса «Интерфейс дня»
    В сентябре выполнил только два задания и переключился на тестовые. Время вернуться и закончить дело. До конца года 98 заданий не выполню, но десяток шотов на дрибл выложу.
  2. Участвовать в конкурсах
    Какие дизайнерские конкурсы запускаются в ближайшие месяцы? Напишите в комментарии, буду благодарен.
  3. Смотреть на топовых дизайнеров на бихэнсе и дрибле
    Выявлять, что больше нравится, переосмыслять и искать свой стиль.

°°°

Опубликовал пять заметок с описанием дизайн-процесса:

  1. Тестовое задание для Школы мобильного дизайна
  2. Обновление дизайна домашней страницы
  3. Тестовое задание для Туту.ру
  4. Сайт для Сергея Сичкар
  5. Тестовое задание для RedMadRobot

У меня нет портфолио, но показать что-то надо. Когда пишу письмо на вакансию, отправляю ссылку на страницу: http://bizikov.ru/tag/portfolio/.

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

Основная задача таких описаний — показать подход к решению задач.

Побочная задача, о которой в самом начале не думал: на такие заметки присылают критику и советы. Это помогает понять, что не так (на самом деле всё говно), и в следующей работе стараюсь делать лучше.

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

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

Задача
Сделать домашнюю страницу и блог для Сергея Сичкар

На проекте выполнял роль дизайнера, верстальщика и вордпрес-разработчика. Ниже опишу процесс работы над дизайном, вёрсткой и о том, почему макет не должен «бронзоветь».

Дизайн

Созвонился с Сергеем, узнал требования к будущему сайту и выделил три основные структуры домашней страницы:

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

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

Начал прорабатывать структуру, писать текст. Получилось два варианта главной:

Два варианта домашней страницы

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

Определились, что будем прорабатывать вторую версию. К следующей итерации она сильно изменилась и стала финальной версией дизайна:


Финальная версия дизайна

Вёрстка

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

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

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

В лекции «Дизайн + 1» Людвиг Быстроновский отлично рассказал о том, почему после утверждения дизайн сайта не должен «бронзоветь». Теперь у меня на практике получилось понять этот совет.

Главная задача — не нарисовать картинку, а дать Сергею такой инструмент, через который он сможет делиться со своими читателями опытом и идеями. Картинка в Скетче — это лишь начальный этап реализации задачи. Разработка позволяет понять, работает решение или требует доработки. Поэтому дизайн в макете может, и даже должен, отличаться от конечного результата.

Σ

Результат:
Результат работы

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

Посмотреть в живую: http://sergeysichkar.ru.

°°°

Благодарю Сергея за быстрые ответы на мои вопросы и адекватную критику. Недавно он завёл канал в телеграме: @sergeysichkar. Пишет о бизнесе, идеях и результатах. Если тема интересна — подписывайтесь.

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

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

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

Задача

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

Процесс

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

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

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

Результат

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

  • «Говорящая» на одном языке с пользователем форма поиска. Откуда? Из Оренбурга.
  • На первом экране рассказываем пользователю, что его ждёт после поиска. Простые четыре шага и билет в кармане.
  • У контента появилась структура — рассказываем о преимуществах заказа билета онлайн на Туту.ру.

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

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

°°°

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

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

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

°°°

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