Идеальный процесс

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

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

Женя Бондарев рассказал нам о типичной структуре разработки цифрового продукта:

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

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

Usability test
Тестирование всего продукта и финальные изменения — Женя советует писать гипотезы в гугл-доке на протяжении всего исследования, чтобы во время тестирования не упустить что-то важное.
По итогу тестирования выявляются критичные и не очень ошибки, после чего нужно решить, с чем можно выходить на рынок, а что требует обязательной доработки. На этом шаге может всплыть много неожиданностей, на эту тему как-то писал Костя Горский — t.me/desprod/239

Финализация
Финальное утверждение, подготовка к разработке, подготовка к публикации (кейс в медиа, либо конкурс и т.д.), авторский надзор.
Круто выпускать MVP как можно раньше, чтобы начать получать реальный фидбэк.

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

1. Погружение

1. Связаться с заказчиком
Сделать:
- интервью с заказчиком
- запросить метрики
Итог:
- утвержденное направление работу
- утвержденные с заказчиком сроки
Срок: 4.03

2. Поиск референсов/конкурентов
Срок: 04.03

3. Интервью с пользователями
Сделать:
-подготовить вопросы
-найти респондентов
На выходе:
- уточненный портрет
- проблемы пользователей
Срок: 13.03

4. Попробовать
Сделать:
- Сделать заказ (понять процесс, опросить мастера)
- Зарегаться как мастер (понят, процесс, взять заказ)
На выходе:
- проблемы
- полное понимание бизнес-процесса
Срок: 11.03

Анализ полученных инсайтов
Артефакты: понять на каких проблемах фокусируемся, список инсайтов, фичерлист
Показываем заказчику — 12.03
— Ретро —


2. UX — проектирование

1. Информационная архитектура — 20.03
2. Структура — 20.03
3. Карта экранов — 31.03
4. Сценарии
5. Прототип
6. Тестирование прототипа (проверка гипотез) - 7.04

Анализ полученных решений
Артефакты: протестированный прототип, карта экранов, структура, информационная архитектура
Показываем заказчику — 9.04

— Ретро —


3. UI — визуальный язык

1. Существующие гайды продукта
2. Мудборд
3. Дизайн концепт 3-5 экранов — 14.04
4. Масштабирование
5. Анимация

Анализ полученных решений
Артефакты: финальный дизайн продукта, анимация
Показываем заказчику — 30.04

— Ретро —


4. Передача в разработку
5 занятий 10.05-19.05

5. Подготовка портфолио
9 занятий 22.05-09.06

6. Презентация
3 занятия

7. Защита
23 июня


По сути, этот план также может являться оглавлением моего дальнейшего повествования.
Как вы могли заметить, на сегодняшний момент мы заканчиваем стадию «2. UX — проектирование» и переходим к поиску визуальной концепции.
Уже сейчас можно сделать какие-то выводы о том, как мы двигаемся по этому плану: что-то из написанного в плане мы так и не сделали до сих пор, что-то наоборот — сделали с опережением. Так, мы до сих пор не утвердили окончательный набор фич, но, с другой стороны, у нас уже готовы все необходимые артефакты — можно начинать готовить мудборды

Олег Якубенков написал о разнице между Customer Development и Custdev.

Знание термина Customer Development в англоязычном IT очень низкое. Не говорите, что вы кастдевили своих клиентов, вас не поймут. Также это будет звучать странно в контексте изначального значения термина.

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

  1. Обнаружение клиентов;
  2. Подтверждение клиентов;
  3. Создание клиентов;
  4. Построение компании.

На этих этапах используются разные инструменты для проверки гипотез и получения инсайтов: глубинные интервью, опросы, AБ-тесты, тестирование рекламных каналов и всё остальное, что делают в рамках стартапа.

В русскоязычном IT методология сузилась до конкретного метода проверки гипотез — глубинных интервью. То, что мы называем кастдев, англоязычные коллеги называют User Research.

https://gopractice.ru/customer-development-custdev/

Качество кода и счастье

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

Вот, к примеру, качество кодовой базы. По-идее, можно очень долго жить с горами говнокода в продакшене — просто нанимаешь в 2–3 раза больше программистов, игнорируешь высокий churn, пытаясь загасить проблему корпоративами/тимбилдингами/мотивацией, и привычно умножаешь все сроки на 3.

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

Ключевой элемент счастливой команды — качество кодовой базы: архитектура, стандарты кодирования, тесты и автоматизация рутины.

Вчера на сайте бюро вышел первый совет в серии о качестве кода (http://bit.ly/bureau-code-quality), с детальным рассказом о том, зачем это нужно бизнесу. Особенно совет полезен тем, у кого нет времени (или кому не дают времени) на рефакторинг.

Итак, PROFI.RU

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

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

Часть первая. Бизнес модель.

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

Давайте рассмотрим этот процесс подробнее.

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

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

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

Например, я, как исполнитель, вижу подходящую заявку на услугу, оплачиваю стоимость заявки (примерно от 20 до 200 рублей) и жду, когда меня выберут. Если меня выбрали, то сумма заявки возвращается, если нет — деньги сгорают.

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

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

Часть вторая. Зонтичный бренд

Еще одной важной особенностью сервиса, которую мы узнали от заказчика, является большое количество различных направлений — вертикалей бизнеса. Платформа PROFI.RU образовалась путем объединения нескольких уже существующих сервисов по поиску репетиторов, спортивных тренеров, врачей и т.д. — образовав тем самым, так называемый, зонтичный бренд.

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

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

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

Часть третья. Legacy

Из-за особенностей, описанных выше, а именно из-за того, что сервис образовался путем слияния разных бизнесов, вытекает еще одна не самая приятная особенность — большое техническое наследование, или technological legacy. Это означает, что платформа, на которой строится профиру за всю свою историю существования (а это больше 10 лет) обросла огромным количеством костылей и ограничений. БОльшая часть интерфейсных (и не только) проблем сервиса связанна именно с этим — любое изменение дается долго и дорого.
Поэтому бриф, который озвучил Андрей, был про свежий взгляд без привязки к грузу технических ограничений.

Итого

После общения с заказчиком мы выделили три главных особенности профиру:

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

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

Мини-кейс

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

Например, как решить проблему того, что люди часто не заканчивают курс лекарств до конца?

Конечно же ввести геймификацию!
Главная проблема заключается в том, что довольно сложно принимать большое количество одинаковых лекарств постоянно, это просто надоедает. Но можно пойти другим путем и разделить одинаковые лекарства на две группы — 90% оставить как было, а 10% сделать другим цветом и разместить их в самом конце, сказав, что их прием ОБЯЗАТЕЛЕН.

Профит!

Несколько мыслей команде.

Благодарность командам, в которых мы были и радость нового смысла в командах — в которых мы будем собой.

Вы — не центр команды. Это правда жизни. Вы — один из атомов притяжения в общей цели. Центр команды — цель. Классный продукт. Отличный проект. Большие деньги. Уважение на рынке и репутация. Не стесняйтесь формулировать для себя цель, которая для команды и для вас — общая. Без этого дух вянет, руки опускаются. Лучшая мотивация — «Команда делает меня крутым, а я команду». Но это не вы в центре команды — команда в центре вас.

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

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

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

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

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

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

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

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

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

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

HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки

Когда браузер получает HTML-документ, он на его основе создаёт древовидную структуру блоков, вложенных друг в друга. Каждый объект при этом называется узлом.

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

Подробнее в видео: https://youtu.be/TKxR2tNxTcA
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO