Тестовое задание для 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 пикселей.

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

°°°

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

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

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

°°°

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

СохранитьСохранить

Мобилизация, итог обучения

На каждый день лекций в Школе мобильного дизайна писал заметки. Кроме лекций каждый ученик работал над личным проектом. 10 августа презентовал проект организаторам Школы. В начале недели стали известны результаты.

Презентую проект

Фото с презентации личного проекта, автор Станислав Сабиров

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

°°°

В феврале поставил перед собой цель: стать дизайнером. До этого с дизайном никак не был связан, даже не верстал из ПСД-файлов. Впервые открыл Скетч, когда выполнял тестовое задание для поступления в проект «Мобилизация».

С 4 июля по 15 августа мне повезло учиться в Яндексе: слушал лекции, проходил тренинги, семинары и занимался личным проектом. Всё это дало мне отличную базу для входа в новую профессию.

Раз всё так хорошо, то возникает логичный вопрос: «почему не прошёл?». Основная причина — это недостаточный опыт в отрисовке интерфейсов. Как следствие, сложно визуализировать решение проблемы в виде живого интерфейса. Для начала рисовал экран в блокноте, а уже после этого открывал Скетч. Такой подход отнимает много времени.

Пример бумажного прототипа

Пример бумажного прототипа

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

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

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

Σ

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

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

СохранитьСохранить

Мобилизация, первый день

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

Люди

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

Мобилизация, первый день

Итоги

  1. Относись критически к своей работе
    Как бы мы с вами себя не любили, надо строго относиться к результату своей работы. Если у квадрата кривые стороны и его углы не равны по 90 градусов каждый —это не квадрат. Даже если процесс рисования такой фигуры доставил вам невероятное удовольствие.
  2. Освободи инбокс для новых идей
    Когда изучаешь что-то, необходимо быть открытым для новой информации. Легко кивнуть, в знак согласия с этим фактом, но сложно следовать ему. Ранее накопленный нами опыт влияет на принятие новых идей и мнений. Не нужно бояться их пробовать.
  3. Будь ответственным за свою жизнь, поступки и ошибки
    Никто не виноват в твоих ошибках, только ты сам. Если жалуешься, будь добр предложить решение или сам исправить проблему. Если облажался — признай это, вынеси урок и двигайся дальше.
  4. Рефлексируй
    Полезно время от времени оглядываться назад и анализировать то, что ты сделал. С пользой провёл выходные? За эту неделю ты стал лучше? Что стоит исправить в своей жизни, чтобы она стала лучше?

°°°

Все дни: первый, второй, третий, четвёртый, пятый и шестой, седьмой, с восьмого по тринадцатый, четырнадцатый.

СохранитьСохранить