Корпоративный мерч с человеческим UI

Меня зовут Александр и я работаю бывшим разработчиком под Windows Phone в 2ГИС. Однажды я подошел к Кириллу, руководителю сервиса мобильных приложений, и спросил: «Скажи мне, Кирилл, руководитель сервиса мобильных приложений, что нужно сделать, чтобы от лица компании 2ГИС своим коллегам корпоративный мерч подарить?» Кирилл ответил, что 2ГИС — бирюзовая компания, а значит нужно проявить инициативу. Под катом — продуктовая история, корпоративные футболки, дух стартапа, проявление инициативы, много картинок и ни одного микросервиса.

Кирилл пообещал, что если я придумаю годную идею для мерча, то он сможет выбить под неё бюджет. Тем, кто хоть немного знаком с Кириллом, не приходится сомневаться, что бюджет действительно найдется, потому что слово «выбить» звучит из его уст довольно органично. Оставалось только идею придумать. Мой примитивный мозг, работающий в рамках корпоративной культуры, размышлял по следующему алгоритму.

То есть вариантов особо не было. Однако не любая футболка может гордо именоваться корпоративной. Что же делает её таковой? Маленький продакт внутри меня застенчиво намекал, что просто бахнуть на футболку логотип 2ГИС — такая себе идея. Поэтому я придумал печатать на футболках наших корпоративных зайцев. Посмотрите, какие няшечки. Их много разных, поэтому каждый сотрудник мог бы выбрать себе понравившегося.

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

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

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

Я крепко задумался и на листочке А4 набросал макет приложения. Вот такой.

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

Мы сделали два клиента под обе мобильные платформы: iOS и Android. Дальше в статье будет много скриншотов. У меня айфон, и я легко мог бы показать вам скриншоты приложения под iOS. С другой стороны, у Android больше пользователей, и многие из них знают, где я живу… Короче, чтобы никому не было обидно, все скриншоты в этой статье сделаны под Windows Phone.

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

Незаметная кнопка «не понял», на которую мало кто нажимал, переводит нас на страницу с подробным описанием происходящего. Эта страница была сделана специально для таких людей, которые читают мелкий текст под звездочкой в кредитных договорах. Там мы рассказываем, что футболку можно заказать только одну, только ограниченному кругу лиц, предложение не является публичной офертой и всё в таком духе.

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

Мы гордо заявляем, что это самая незащищённая процедура идентификации в мире. Например, ничто не мешает выбрать чужую команду, выбрать понравившегося (или непонравившегося) сотрудника и заказать ему крутую футболку. Или не очень крутую. Но мы подумали, что в нашем уютном офисе в Академгородке, где все друг друга знают и могут дойти друг до друга ногами, не стоит заморачиваться в секурность, а возможные инциденты будут разрешены естественным, скажем так, образом. В итоге все оказались честными няшами и делали заказы только для себя, уии!

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

Для сотрудников, которые нечасто покупают себе одежду и поэтому плохо представляют свой размер, мы завезли в офис тестовую партию базовых футболок и в день «релиза» оставили их на ресепшене, о чём услужливо сообщили в приложении при нажатии на незаметную кнопку «я не знаю размер». Персонажа выбираем из 48 доступных вариантов с помощью свайпов влево или вправо.

Далее выбираем подпись, которая будет на футболке.

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

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

Каждая подпись состоит из двух частей. Первая — это всегда глагол. Например: дожал, затащил, спас, прокачал. Мы придумали 26 таких вариантов.

Вторая часть, как правило, существительное. Это название фичей, над которыми мы работали, или просто что-то абстрактное из IT-тематики. Для второй части мы придумали 118 вариантов. Так как первая и вторая части фразочки изменяются независимо друг от друга, мы получаем 3068 вариантов подписей — есть, из чего выбрать.

Спешу сообщить, что мы за гендерное равенство, поэтому на экране выбора подписи спрягаем глаголы по родам: сотрудники увидят в приложении «закодил», «протестировал», а сотрудницы — «закодила», «протестировала».

В конце мы рисуем превью, близкое к реальности, просим выбрать цвет футболки и подтвердить заказ.

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

Этот экран скролится. Какое-то время на нём можно позалипать, рассматривая заказы коллег.

После того, как все желающие разместили свои заказы, мы сделали выгрузку данных, которая включала в себя ФИО сотрудника, цвет и размер футболки, её модель (мужская или женская), ID зайца, которого будем печатать на футболке, и текст подписи. Обладая этими ценными знаниями, можно было приступать к подготовке макетов для печати.

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

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

Как видите, люди самовыражались, как могли: кто-то описывал ежедневную рутину, кто-то выдавал желаемое за действительное, а кто-то откровенно фантазировал.

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

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

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

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

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

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

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

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

Как видно по фотографии, белый цвет, присутствующий в макете, отсутствует на серой футболке.

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

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

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

Автор: volokhin

Источник