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



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



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


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


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


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


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

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

    Маша. Инициативный iOS-разработчик. Любит смузи, дружный коллектив и интересные задачи. Не любит, когда меняются требования.

    Руслан. Квалифицированный бекендер и Android-разработчик. Любит код-ревью. Не любит дизайн-ревью. На Хабре известен как ruslannazarov.

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

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


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



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

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

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


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

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


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

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


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

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


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

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

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

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

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

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

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


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


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


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

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

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


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

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


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


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

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

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

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


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

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


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


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

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

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

    2ГИС 165,15
    Карта города и справочник предприятий
    Поделиться публикацией
    Похожие публикации
    Комментарии 18
      +5
      image
      Да, я бы от такой не отказался :)
        +10
        «Настроил прокси» — это пять!
          +1
          Я тоже хочу футболку с зайцем!
            0
            Крутая сама идея и ее реализация! А по бюджету-то что вышло? интересует:)
              +3
              Спасибо! :) Если вы, как и мы, хотите делать футболки в Новосибирске, то можем поделиться контактами нашего подрядчика. Мы печатали по 650 руб. за цветную футболку и по 800 руб. за черную. Собственно, это и был весь наш бюджет и все наши затраты. Все остальное (дизайн, бэкенд, приложение) делалось своими силами.
                0
                «Все остальное» — и есть самый писк. За контактами обращусь)
              +1
              Любопытно, если компания бирюзовая — значит она прошла все 7 предыдущих витков?
                0
                Совсем нет. Хорошая новость: вовсе не обязательно проходить все стадии развития, чтобы стать бирюзовой организацией.
                  +1
                  Да, понимаю, можно просто решить, что это так. Но если уж следовать теории спиральной динамики — то ты вынужден пройти через все этапы и переход на более высокий уровень обусловлен всегда довольно конкретными предпосылками. Но, да, у нас много компаний считающих себя бирюзовыми потому, что им так хочется =)
                    +1
                    Строго говоря вы правы и 2ГИС совсем не бирюзовая компания. 2ГИС – очень большой, пестрый и разнообразный. У нас много департаментов: продажи, маркетинг, производство и т.д. Не все они стремятся к бирюзовому. А есть RnD, который, на самом деле, похож на ту самую «организацию будущего» из книжек. Но и ему, конечно, есть куда расти.

                    Что касается теории, боюсь, не смогу аргументированно поспорить. Я привык считать, что эти этапы с забавными цветными названиями выделяют в рамках исторического развития человечества и, наверное, личности. Однако, мне кажется неправильным полагать, что любая отдельно взятая организация обязательно должна побыть, условно говоря, волчьей стаей, чтобы когда-нибудь, последовательно пройдя все остальные этапы, эволюционировать в живой организм. Могу ошибаться :)
                –7
                Некоторым здешним редакторам не помешала бы такая футболка

                То что нужно

                  0
                  Приложение на первый взгляд довольно простое. Почему вы написали отдельные клиенты под разные ОС, а не использовали react native, что бы один раз написать и работало на всех платформах сразу?
                    +1
                    Наверное, React Native и правда неплохой выбор для такого приложения. Однако, как человек, глубоко уважающий .NET, я предпочел бы Xamarin. Но у нас не было специалистов по React Native задачи сделать эффективно или дешево, у нас была задача получить удовольствие :) Поэтому ребята писали на тех технологиях, которые любят и знают. Приложение под Android написано на Qt (как и 2GIS под Android), а приложение под iOS (как и 2GIS под iOS) – нативное и написано на Swift.
                    0
                    За выходные появилось, что сказать компании 2Гис, на хабре наткнулся на пост, значит судьба велит высказать своё мнение))) Ездил на выходные в Е-бург (второй раз в жизни), соответственно стояла проблема в ориентировании. В моих предыдущих поездках в разные города (Москву, Питер, Сочи) использовал 2Гис, как самую удобную. Но в этот раз что-то не заладилось. Программа запускается минуты 2, непонятна логика построения маршрутов (понимаешь со временем, немного разобравшись в городе), можно «туда» уехать на троллейбусе, обратно же троллейбуса нет в выдаче, или послать по подземному переходу с крюком в километр, когда можно было пройти напрямую.
                    После просыпания телефона (проверить маршрут) окно программы висит замороженное секунд 30, потом начинает реагировать на тапы, которые были нажаты, приводя к непредсказуемым результатам. В общем, дикие тормоза и фризы, хотя раньше всё летало. Спасибо за работу, но может пора выкладывать оффлайновые версии программ прошлых лет, я бы лучше использовал устаревшую программу, но чтобы она работала быстро. Или пришло время покупать новый телефон с требованием к железу: «чтоб 2 гис не лагал»? )))
                      +1
                      Андрей, видимо, действительно судьба! Спасибо, что делитесь. Пост-фактум сложно разобраться, но если подобные ситуации повторятся, то попробуйте написать нам прямо из приложения. Для этого достаточно зайти в меню, выбрать пункт помощь и в письме описать проблему. К письме автоматически подтянутся логи, так что мы сможем выяснить, что пошло не так. Так и ваш телефон сохраним, и 2ГИС на нём подлечим :)
                        +1
                        Спасибо, попробую, удачи в вашей работе)
                          0
                          Спасибо! Будем стараться :)
                      0
                      Всё круто, но приложение (!) для выбора футболок — это жесть.
                      Когда уже пройдет эта мода — делать приложение на каждый чих?

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

                      Самое читаемое