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

дизайн

Интерфейс мотивации операторов

30 июля 2016, 22:47

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

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

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

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

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

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

Интерфейс оператора колл-центра

30 июля 2016, 22:01

Рассказ о некоторых интересных и сложных проектах не укладывается в формат страницы в портфолио, поэтому я решил рассказать о них подробнее в блоге.

Первый такой проект — интерфейс оператора колл-центра для компании «Любимая работа». Я пришел на проект, когда его первая версия уже была сделана арт-директором Андреем Ревиным.

После запуска в продакшен первой версии стали очевидны ее недостатки:

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

Вторую версию интерфейса дизайнил уже я. Взяв за основу в большинстве удачную первую версию, я избавился от табов, увеличил контрастность интерфейса в целом и поменял композицию, переместив данные о клиенте и скрипт разговора влево, одновременно сделав его меньше. Такое решение не случайно — операторы в «Любимой работе» используют скрипт первые 2-3 недели, а потом разговаривают с клиентами свободно, чтобы не было ощущения общения с роботом.

Вторая версия оказалось удачнее, как мы и предполагали. Главная метрика интерфейса — время полезного общения оператора увеличилось на 25%: с 4 часов 30 минут, до 5 часов 40 минут в среднем на оператора.

Приятным бонусом стала новость от директора:

Мне сегодня звонили представители Октелла, предлагали купить нашу морду оператора, а я отказался :-)

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

Концепция приложения MakeBaby

10 июля 2016, 12:49

Предыстория

Недавно в своей ленте Фейсбука я увидел тестовое задание на позицию дизайнера-проектировщика. Задание показалось мне интересным и я решил посвятить ему выходные, к тому же я раньше не делал мобильных приложений.

Собственно, задание

Необходимо разработать эскизную проектировку мобильного интерфейса подбора характеристик будущего ребенка.

Понимание задачи

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

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

Сконфигурируй малыша

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

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

Эксперименты с геномом

Наверное самая рациональная идея, которая может найти практическое применение. Лет через 20.

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

Идея хороша всем, кроме применимости сейчас. А так как я дизайнер, а не футуролог — идея отметается.

Нейросетевой фотошоп

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

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

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

MakeBaby: узнайте, каким будет ваш малыш

Остановив своё внимание на третьей идее я стал думать, как приложение должно работать, какие сценарии в него закладывать. В таком случае полезно смотреть, что там у конкурентов. А у конкурентов — пусто. Есть несколько приложений для айОС и Андроида, но результат работы приложений отлично описан в комментариях: «Не качайте. Ваш ребенок похож на осла — это ответ приложения.»

Единственный сносно работающий онлайн сервис: makemebabies.com

Основная движущая сила такого приложения — алгоритм, находящийся под капотом. Я решил немного углубиться в эту тему и почитать про нейросети, рассмотреть Призму под микроскопом и подумать, как должна работать нейросеть MakeBaby.

Прекрасные лекции от ВШЭ по введению в нейросети.

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

Результат

Интерактивный прототип в инвижне. Одна из картинок честно перерисована
у Эндрю МакКея.

дизайн   прокачка

Формы: поля ввода и кнопки

3 июля 2016, 21:48

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

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

Форма — базовый комплект интерфейса

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

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

Мой главный совет начинающим дизайнерам: не придумывайте велосипед. Изучайте опыт ведущих продуктовых компаний, их интерфейсы и гайдлайны. Для начала предлагаю ознакомиться с рассказом Данилы Ковчего о графических интерфейсах, особое внимание обратите на раздел «система». А оценить большую систему и гайдлайн можно на примере материал дизайна.

Инпуты

Я выделяю 3 типа полей ввода: стандарт, компакт и тинькофф.

Стандартные поля ввода — самый распространенный и привычный для пользователей тип интерфейса ввода. Модуль поля состоит из трех составляющих: подпись, само поле и плейсхолдер. Целесообразно и удобно применять такие поля в больших формах, анкетах и сложных интерфейсах с разнородными входными данными от пользователя.

Компактные поля — урезанный формат стандартного поля ввода, в котором подпись к полю объединена с плейсходером. Так как самый большой недостаток такого поля отсутствие подписей в заполненном состоянии, применение такие поля имеют в коротких формах регистрации, авторизации и подписки.

Поля, которые используются в интерфейсах сервисов тинькофф банка. Они объединяют достоинства первых двух типов полей — они компактны и одновременно информативны в заполненном состоянии.

Кнопки

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

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

Вместо заключения

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

Прямо сейчас набирают силу дизайнерские концепции Zero UI и No UI. А математики и разработчики улучшают методы анализа и использования больших данных и нейросетей.

дизайн   команда   обучение

Обучаю дизайнеров

11 мая 2016, 14:58

Почему я занимаюсь обучением

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

Кому подойдет

Моя помощь подойдет для новичков и дизайнеров с опытом до 2-3 лет. Новички получат билет в профессию, карту развития на ближайшие годы, индивидуальное общение и помощь в проектах. Дизайнеры с небольшим опытом смогут открыть для себя новые возможности для роста, возможность участия в интересных проектах и стартапах.

Требования

Я возьму не всех, так как индивидуальное обучение требует особого подхода, времени и подготовки. Поэтому вот мои несколько требований:

  1. Изучить теорминимум Бюро Горбунова;
  2. Выполнить тестовое задание;
  3. Пообщаться в скайпе.

Отзывы

«Этот год был годом старта в профессии и серьезного, почти взрывного роста. Всем тем, что я сейчас знаю и умею я обязан Паше и Школе Стажёров. Паша ставит новичков на правильные рельсы, доступно объясняет сложные вещи, даёт возможность ошибиться, никогда не повышает голос и всегда получает результат.

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

Юрий Кетов

«Раньше я работал программистом в ИТ-компании. У нас не было штатного дизайнера, а так как я немного рисовал в фотошопе, то мне поручали разрабатывать рекламные плакаты, визитки и презентации. Я ничего не знал о дизайне, получалось неаккуратно и плохо.

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

Мы начали совместную работу над проектом с фиксированным сроком сдачи. В первые дни я обращался к Павлу за советом по 20 раз в день. Он спокойно объяснял, как исправить сделанные ошибки. Сайт мы сдали в срок. Заказчик остался доволен, мы получили достойную зарплату и нам дали следующий проект.

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

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

Дмитрий Беляков, флорист.ру

«Написать Павлу было одним из самых важных решений за 2015 год.

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

Павел — внимательный и терпеливый наставник. Спокойно объяснял что здесь не так, и как можно улучшить. Но чаще, предлагал мне самому найти решение — так сложнее и интереснее.

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

Григорий Машковцев, студия Артклён

Как попробовать

Напишите мне на почту (pavelkuligin1993@yandex.ru), получите тестовое задание и сделайте его.

Построение дизайн-команды в компании

10 мая 2016, 13:49

Тенденции последних лет в продуктовом и сервисном дизайне привели к тому, что многие компании отказываются от услуг студий дизайна и создают собственные внутренние команды. Примеры таких команд у всех на виду: Яндекс, Лаборатория Альфа-Банка, Сбербанк Технологии.

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

Но что делать небольшим компаниям, у которых есть пара постоянно обновляемых сайтов или небольшой сервис? Я считаю, что есть несколько критериев, чтобы определить нужен ли вам дизайн-отдел:

  1. Необходимость постоянного обновления сайта-сервиса. Например, запуск нового раздела раз в месяц;
  2. Желание и возможности выделить ресурсы для менеджмента и управления собственным отделом разработки и дизайна;
  3. Желание сэкономить ресурсы, оставив качество на высоком уровне. Это достигается за счет экономии на услугах агентства. Минимум 25%.

Мой опыт

В трех компаниях я выполнял функции дизайнера, арт-директора и руководителя дизайн-команды.

2ТБанк
В банке я работал дизайнером, а затем ведущим дизайнером, так как количество и объем задач значительно возросли. Чтобы набрать команду помощников, мне пришлось взять новичков и обучить их основам дизайнам, проектирования сайтов и интерфейсов.

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

Любимая работа
В Любимую работу я пришел в качестве дизайнера сайта и интерфейсов. Под руководством Андрея Ревина я разрабатывал внутренние страницы сервиса, страницы рассылки и другие работы. Позднее я взял на себя все задачи по дизайну и развитию сайта.

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

Студия Станислава Орехова
В октябре 2015 года мне написал Станислав Орехов, руководитель собственной студии дизайна интерьеров. Ему требовался арт-директор для собственных внутренних проектов, сервиса АрхТуторс и сайта Дизайн-конференции.

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

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

Как начать работу со мной

Напишите мне (pavelkuligin1993@yandex.ru) или позвоните в скайпе (kuliginpavel1993) и мы поймем, нужна ли вам своя дизайн-команда или мы сможем обойтись несколькими проектными работами.

О себе

10 мая 2016, 12:04

Кто я такой

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

В дизайне сайтов и интерфейсов я с 2013 года. За это время сделал около ста различных проектов: от писем рассылки и техдизайна до интерфейсов сложных ЦРМ и ЕРП систем. Придумал свои принципы и шаблоны для проектирования и разработки посадочных страниц.

C марта 2016 работаю в Арткриме дизайнером интерфейса в проекте внутреннего стартапа «Облачная типография».

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

Планы на будущее

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

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

Есть интересный проект?

Чтобы связаться со мной достаточно написать на почту (pavelkuligin1993@yandex.ru), в скайп (kuliginpavel1993) или позвонить по телефону (+7 921 447-98-18).

дизайн   жизнь   планы