Flawless App — это macOS инструмент для сравнения дизайна и получившегося мобильного приложения. Сравнение происходит прямо во время разработки в режиме реального времени. Фактически, Flawless App берет желаемый дизайн и накладывает на реальное приложение (прозрачно поверх или разделяя экран).

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

Мы поговорили с одним из создателей приложения Ахмедом Сулейманом.

Расскажите вкратце о себе. Кто чем занимается в команде?

Мы маленькая, но эффективная команда. С момента появления идеи в 2015 году наш продукт сильно изменился, как и изначальный состав коллектива. Сейчас над Flawless App работает 5 человек: 2 сооснователя, 2 парт-тайм разработчика и один Growth Hacker.

Я и Лиза Дзюба – основатели. Мы работаем над продуктом с самого начала и фул-тайм.

Ахмед Сулейман и Лиза Дзюба, основатели Flawless App

До работы над Flawless App я был Software Engineer в Petcube и был одним из первых сотрудников там. Также до этого я работал какое-то время в Wunderlist. Сейчас в компании под моей ответственностью вся разработка, дизайн и управление процессами.

Лиза по образованию инженер, но давно интересуется предпринимательством. Она успела поработать в маркетинговом агентстве Pulse вместе с американским предпринимателем Джонатаном Ромлей, который и привил ей любовь к стартапам. После работы в польском стартапе и украинском маркетинговом агентстве Лиза полностью ушла в Flawless App.

Ахмед Сулейман и Лиза Дзюба, основатели Flawless App

С разработкой нам также помогают украинские разработчики Коля Коваль и Максим Хартанович. А в ноябре 2017 года к команде присоединилась Валя Гаврилюк, которая работает с маркетингом и продажами.

Команда Flawless App

Как появилась идея продукта? Вы сами сталкивались с такой проблемой, анализировали рынок, определяя проблемы юзеров?

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

Визуальные ошибки чаще всего обнаруживали дизайнеры или QA. Они сообщали о необходимых изменениях мне (разработчику), делая скриншоты с «красными стрелочками». Я вносил правки, а через какое-то время дизайнер находил «что-то еще», и мы возвращались в начало бесконечного замкнутого цикла. За годы работы стало понятно, что проблема визуальных ошибок – это повторяющийся паттерн вне зависимости от компании. Мы решили это исправить.

В апреле 2015 года мы посетили эстонский хакатон Garage48, который как раз проходил в Киеве. Собрав команду, разработали концепт продукта для улучшения коллаборации между дизайнерами и разработчиками. Мы выиграли в хакатоне, получили $5 от первого клиента и решили, что будем строить свою компанию.

Первые инвестиции

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

• Подтвердить, что проблема существует.
• Выяснить ее масштабы.
• Узнать, как люди справляются с проблемой сейчас.

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

В 2015 году мы начали работать над первой версией Flawless App. Запуск планировался через 3 месяца с начала разработки. Очень амбициозные планы для сложного продукта, который должен был состоять из Sketch и Xcode плагина, плагина для iOS симулятора и web-версии.

В итоге первая версия была готова не через 3, а 13 месяцев! Когда мы дали продукт нашим первым пользователям, нас ждал неприятный сюрприз. Люди стали указывать на очевидные недостатки, которые мы упустили. За 14 дней мы полностью поменяли продуктовый фокус. Обновленный Flawless App был запущен в июне 2017. Сейчас продукт активно используется мобильными разработчиками по всему миру и приносит стабильный доход.

Первая версия Flawless App

Насколько известно, вы запускали продукт без инвесторов. Планируете ли привлекать инвесткапитал в будущем?

Действительно, мы запустили продукт (даже не один) полностью без внешнего финансирования. Для этого нужно всего лишь:

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

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

Продукт уже на рынке и приносит прибыль. С инвестициями или без них мы будем развивать Flawless App и строить бизнес.

Инвестиции в нашем случае — это ускоритель. Тогда то, что мы планируем сделать за 4 месяца, мы реализуем за месяц.

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

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

На данный момент наша бизнес-модель – это разовый платеж $30 за одну лицензию. Мы также экспериментируем с специальными пакетами для команд, так как часто проджект менеджеры покупают Flawless App сразу на весь коллектив. В скором времени планируем добавить ежемесячную подписку вместе с большим сервисным апгрейдом.

Последние пару лет были чрезвычайно активны на рынке инструментов для дизайнеров-разработчиков. Есть даже такое убеждение: «Каждую неделю появляется новый инструмент для прототипирования». Мобильная разработка как отрасль достаточно молода. Поэтому мобильные команды всё еще ищут решения, как минимизировать усилия и максимизировать результат. Идеальное решение еще не скоро будет найдено. Но уже сейчас я с уверенностью могу сказать, что следующие 5-6 лет будут очень интересные для этой индустрии.

Кто ваша целевая аудитория?

Наша целевая аудитория это прежде всего iOS разработчики. Совершенно не важно с какой они страны, но большая часть наших клиентов всё-таки из США. Мы, в основном, работаем на этот рынок.

• 70% разработчиков из крупных продуктовых компаний. В таких командах есть стабильные процессы и невероятный фокус на продукт. Например, Chime Banking. Это полнофункциональный интернет-банкинг, помещенный в одно мобильное приложение, никаких отделений. Для этих товарищей мобильное приложение и есть core product. Поэтому всё должно быть максимально качественно и на высшем уровне.
• 20% разработчиков из агентств и аутсорс компаний. Тут для них важно сделать быстро и качественно сразу. В таких компаниях мобильные приложения выпускаются, как пирожки.
• 10% это инди-разработчики, которые работают над собственными продуктами. Они сами себе дизайнеры, разработчики, маркетологи и т.д. Они зарабатывают с продаж приложений, которые сами же полностью создали.

Чем первая версия продукта отличается от последней? 2-5 главных изменений, и как к ним пришли.

Если коротко: в первой версии продукта мы хотели сделать всё и сразу, а в новой – сфокусировались на том, что делаем лучше всего.

Провести месяц, общаясь с потенциальными пользователями, было правильным решением. Однако сразу после всех интервью мы допустили ошибку – перестали общаться с ними и ушли в код. Это привело к 13 месяцам разработки вместо запланированных 3-х. В итоге, мы сделали продукт, 80% которого были просто не нужны первоначальным бета-тестерам.

В первой итерации Flawless App состоял из плагина для Xcode (когда их официально еще не существовало), для iOS симулятора и для Sketch, а также web-приложения поверх всего этого счастья.

Идея была следующей: при помощи плагина для Sketch дизайнер мог автоматически сгенерировать спецификацию на свой дизайн (все размеры, цвета, шрифты и т.д.). Далее это всё автоматически отправляется разработчику прямо в среду разработки (плагин для Xcode). Разработчик мог перетащить определенное свойство из дизайна прямо в код. Под капотом мы генерировали правильный блок кода для выбранного свойства и вставляли в поле редактора. После того, как разработчик реализовал дизайн, он мог в реальном времени сравнить, насколько то, что он сделал соответствует тому, что получилось в конечном итоге (плагин для iOS симулятора). Поверх всего была веб-версия для менеджеров, чтобы контролировать весь процесс и комментировать работу.

Это было действительно что-то массивное, но до успеха этому продукту было далеко:

• Где-то в середине процесса разработки активно запустились конкурирующие продукты. У них уже были готовые решения с похожими функциями.
• Генерация кода была встречена со скептицизмом. Самый популярный фидбек по этой фиче был: «Я пишу код совсем иначе» или «У нас уже есть специальная структура для инициализации [свойство дизайна]».
• В iOS разработке ведутся острые дебаты о том, как именно реализовывать интерфейс. Существует несколько лагерей: тех, кто использует Interface Builder, и тех, кто делает это полностью через код. Наше решение было заточено на второй случай. Это стало очередным камнем преткновения, поскольку добавление поддержки Interface Builder заняло бы много времени.
• Продукт был настолько большим, что поддерживать его маленькой команде становилось действительно сложно.

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

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

80% первого продукта были действительно слабыми. Однако мы сумели найти те 20%, которые пользовались спросом. Это и было сравнение дизайна и реализации прямо на iOS симуляторе. За 14 дней мы перестроили продукт, используя ту же технологию. Снова запустили закрытое тестирование, и в этот раз проект засиял.

Исходя из опыта, мы поставили себе следующие цели:

• Выпускать продуктовые обновления каждые 2-3 недели.
• Каждую неделю проводить хотя бы 2 интервью с пользователями.
• Прикладывать минимум усилий для получения максимального результата в продукте.

Сейчас Flawless App позволяет разработчику быстро найти расхождения в дизайне и реализации, и исправить все до design review или до того, как ошибку заметит QA.

Совсем недавно мы также запустили фундаментально важное обновление, которое упрощает работу с дизайнами для нескольких размеров экрана. Flawless App может автоматически считывать resizing constraints c Sketch файла и генерировать соответствующий дизайн для нужного iOS устройства. То есть, дизайнер может подготовить дизайн только для одного разрешения, а разработчик сможет увидеть его на всех возможных разрешениях.

Делали вы какие-то измерения, исследования, насколько ваш продукт ускоряет рабочий процесс?

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

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

Одни из самых частых визуальных ошибок:

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

В среднем, в компании проводится по 3-4 design review сессии в месяц. На этих сессиях дизайнер и разработчик сидят рядом и смотрят, «что да как» с интерфейсом и приложением в целом. На таких сессиях чаще всего всплывают визуальные ошибки.

Можно с уверенностью сказать, что мы экономим более 18 часов в месяц для каждого разработчика и суммарно 5-6 часов обсуждений на review сессиях. В долларовом эквиваленте для американских команд – это очень ощутимая сумма.

Вы задумывали ваш продукт как инструмент для разработчиков. Но на Product Hunt вас номинировали как инструмент года для дизайнеров. Почему сместили вектор? Это получилось случайно или это стратегический выбор?

Наш продукт, в первую очередь, ориентирован на мобильных iOS разработчиков.
Поэтому мы сами немного удивились, когда команда Product Hunt решила поместить нас в категорию Design Tools, а не в Development Tools.

Мы написали про эту ситуацию в поддержку Product Hunt и нам ответили, что поменять категорию уже нельзя. Так приложение стало номинантам на лучшую Design Tools года:)

Мы активно принимали участие в жизни Product Hunt сообщества. Получили огромную поддержку в виде голосов во время запуска и не раз выступали на локальных Product Hunt митапах. Поэтому нам было очень приятно получить номинацию в любом случае.

Также мы намерены расширить аудиторию до дизайнеров и тестировщиков. Можно сказать, Product Hunt заглянул в наше будущее.

Не смотря на то, что Flawless App сейчас — это продукт для разработчиков, мы все равно взаимодействуем с дизайнерами. В октябре прошлого года мы запустили бесплатное приложение Reduce App. Это menu bar приложение, которое автоматически оптимизирует и сжимает Sketch файлы. На сегодняшний день у Reduce больше 4000 пользователей из различных продуктовых компаний. Как раз недавно мы рассказали о создании Reduce в Smashing Magazine.

При исследовании фидбека пользователей заметили разницу в ответах разработчиков и дизайнеров? Какие главные инсайты получили от дизов?

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

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

Мы заметили, что разработчики добавляют эти GIFки прямо в pull-request (на GitHub или других схожих системах). Так они привлекают дизайнера в систему, и code review проходит одновременно с design review. Это существенно ускоряет разработку, так как не надо выделять отдельно время на design review.

Фидбек разработчиков — это вообще уникальная вещь на самом деле. У нас есть пользователи, которые советуют нам новые фичи в продукте, сами расписывают, почему это важно и в придачу подсказывают возможные пути реализации.

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

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

Как украинский продукт воспринимают за границей? Обращают ли вообще внимание на страну разработки?

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

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

Над чем работаете сейчас? Что планируете улучшать в будущем?

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

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

Последний фундаментально важный релиз – запуск динамической генерации дизайна для разных размеров экрана (используя resizing constraints в Sketch). Возможность менять размер арт-борда и видеть, как при этом меняют позицию элементы, – это эксклюзивная возможность Sketch. Без его установки этого сделать нельзя. Однако, всё достижимо благодаря усилиям.

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

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

Источник изображений: личный архив команды Flawless App