Owlymate: дневник разработки

Операция «Электрон»

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

Electron — это фреймворк, который позволяет создавать десктопные приложения с помощью JavaScript, HTML и CSS. Его используют множество популярных продуктов: Slack, WhatsApp, Skype, Discord, Figma и другие.

✅ Преимущества

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

Ну и самый главный плюс этой технологии — мультиплатформенность: мы разрабатываем приложение одновременно для Windows и macOS (и даже подумываем о Linux). Вы себе не представляете, сколько мы получили запросов от юзеров-маководов за годы разработки Netpeak Spider и Checker 😩

❎ Особенности

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

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

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

В следующих постах мы расскажем больше о функционале Owlymate. Не переключайтесь!

Рецепт идеальных таблиц

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

По таким вопросам меня два раза просить не нужно → я вспомнил свой многолетний опыт на позиции Project Manager, нырнул в самые дебри Table UI/UX и выдал 26 пунктов, которые нужно учесть + 50 минут видео-ТЗ (так это назовём 😜, техническое задание в формате видео).

Вот краткая выжимка из результатов ресёрча:

I. Designing Tables for Reusability (by Ada Rafalowicz and Havana Nguyen) → подробный гайд по юзабилити таблиц. Уверен, вы найдёте что-то новенькое для себя, если участвуете в разработке интерфейсов, где таблицы являются неотъемлемой его частью.

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

III. Тезисы к описанным в ТЗ пунктам (я тут специально оставил буквально несколько слов по каждому пункту, чтобы этот пост не растянулся на ещё одну «Войну и мир»):

1. Lazy Loading данных.
2. Пагинация + быстрый переход к первой / последней странице.
3. Индикация количества данных: текущих и всего в коллекции (например, «100-200 из 189382»).
4. Выбор количества строк данных, которые нужно отображать (например, по умолчанию 10, а можно выбрать 25, 50, 100 и т.д.).
5. Возможность сортировки по убыванию и по возрастанию.
6. Отображение сортировки, которая была применена к таблице.
7. Smart-сортировка → сортирует весь набор данных, а не только те, которые показываются на текущей странице.
8. Комплексная фильтрация данных.
9. Быстрый поиск по текущей таблице (в стиле Google Analytics).
10. Экспорт всей таблицы в формат CSV (для начала).
11. Выбор столбцов / параметров для отображения в таблице.
12. Быстрое удаление (hide)ненужных столбцов.
13. Копирование данных из ячеек.
14. Интерактивные элементы (например, переход по URL в браузере с помощью отдельной кнопки).
15. Закрепление столбцов (фризинг).
16. Поддержка форматирования в таблице (например, цвета ячеек, цвет текста, стиль текста и т.д.)
17. Простая горизонтальная прокрутка (например, колёсиком мыши с зажатой клавишей «Shift»).
18. Подсказки в заголовке столбцов.
19. Индикатор (троеточие), если значение в столбце / ячейке не помещается.
20. Подсказки при наведении, если значение в столбце/ячейке обрезается.
21. Кастомное наполнение ячеек любыми необходимыми данными (например, в ячейке с URL отображать ещё и Title страницы).
22. Другие варианты представления данных (например, круговая диаграмма, гистограмма и т.д.).
23. Представление результатов в виде дерева структуры сайта.
24. Представление результатов в виде ссылочного графа.
25. Выделение одного или всех URL (чекбокс, галочка) для соответствующих функций.
26. Цветовые схемы: тёмная и светлая.

Возможно, мы не всё реализуем сразу, но список важных функций уже составлен. Если я что-то упустил, дайте знать в комментариях 😏

Как наша сова получила модный приговор

Всем привет! Меня зовут Настя, и в Netpeak Software я руковожу отделом маркетинга. В наш дневник разработки врываюсь с историей о том, как наша безымянная сова стала называться Owlymate и кардинально преобразилась.

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

Так как наша команда разработки вынашивала идею выпустить новый революционный продукт ещё в 2019 году, именно тогда мы с Вайсом взялись за первые задачи по брендингу:

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

Как мы придумали название Owlymate?

Имя нового продукта должно было быть:

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

Сова + друг = Owlymate

Кстати мне также очень нравится двойная коннотация частички mate (филологи поймут). Ведь наш Owlymate создаётся для автоматизации ваших SEO-задач. Иными словами:

OWLYMATE TO AUTOMATE

Конечно, по поводу названия у нас были многочисленные брейштормы: что мы только не ставили рядом с «совой». Среди топовых вариантов: Owlytron, Owlynator и уже достаточно стандартный Owlify. Но в итоге мы признали Owlymate самым удачным вариантом, хотя недавно я видела какие-то вспышки в переулке, после этого стрельбу в баре и гул уезжающего мотоцикла. Неужели Owlynator вернулся, чтобы снова спасти мир?

Кстати, ничто не предвещало беды, но недавно мы запустили рекламу на YouTube, и он нас заблочил за «взрослую тематику» 😅 Поддержка Гугла решила, что слово Owlymate попахивает вебкам-индустрией.

Мы, конечно, убедили Google в наших добрых намерениях, но теперь в будущих ТЗ по неймингу будем проверять, а не чувствуются ли отсылки к порно в казалось бы невинных словах.

Как мы работали над логотипом Owlymate?

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

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

А вот и сова-победительница, прошедшая естественный отбор в лице Вайса, Лёли и меня:

Мы стремились показать в логотипе, что Owlymate будет помогать вам решать SEO-задачи и днём, и ночью (особенно ночью). Потому в финальной версии текстового лого сова прочно поселилась на Луне.

И вот сейчас первые клиенты Owlymate, которые поддержали нашу команду покупкой по предпродаже на год или три года, уже получают по почте своих мягких сов нового поколения 🦉

Как вам трансформация нашей совы? Лебедев отдыхает, правда?

Распределение задач по релизам

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

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

Следите за дневником разработки, и однажды мы обязательно поделимся списком этих задач 😏

Будет ли тёмная тема в Owlymate

Тёмные темы уже используют очень многие популярные продукты: Facebook, Instagram, YouTube и Netpeak Checker 😁

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

Мы и сами предпочитаем тёмную тему, ведь многие наши сотрудники — совы и любят работать допоздна. В начале разработки Owlymate мы решили, что будем делать две темы: светлую и тёмную, но запустим приложение сначала на тёмной, и она будет основной в программе.

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

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

Несмотря на эти сложности, мы с Лёлей преодолеваем препятствия и делаем интерфейс программы красивым и удобным. Уверен, что вам понравится тёмная тема в Owlymate.

Перенос даты активации доступов Owlymate

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

Потому мы перенесли начало действия всех купленных доступов предварительно на 1 сентября 2021 года. О чём вам и сообщаем в этом посте 😊

Клиенты Owlymate уже могут заметить изменения в своём личном кабинете в разделах «Подписки» и «Лицензии».

Когда будет релиз Owlymate

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

Небольшое предисловие: в ноябре 2020 года у нас с Кутаском случился астральный коннекшен с музами разработки, и мы внезапно поняли, как нам сделать Owlymate просто революционным (а не «ещё одним SEO-продуктом»). Однако для достижения этой цели нам необходимо больше времени, чем мы изначально закладывали — изучите внимательно наш роадмеп, чтобы мы были на одной волне 🌊

📍 1 этап: альфа-тестирование

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

2 этап: бета-тестирование

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

📅 планируем дать доступ к этой версии в апреле 2021 года.

3 этап: Early Access (ранний доступ) 0.1 – 0.X

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

📅 постараемся выпустить эту версию в мае 2021 года.

4 этап: релиз Owlymate 1.0

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

📅 предварительно мы планируем этот релиз на осень 2021 года.

Разумеется, мы осознаём нашу ответственность перед людьми, которые уже стали клиентами Owlymate, воспользовавшись условиями предпродажи → доступы, которые вы купили, никуда не пропадут, и вы сможете воспользоваться ими после официального релиза версии 1.0. А до этого момента у вас будет бесплатный доступ к версии Early Access — мы будем максимально открыто рассказывать о ходе разработки и держать вас в курсе последних событий.

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

По любым вопросам вы можете связаться со своим менеджером или написать в комментарии к этому посту. До связи 👋

Диаграммы: какими же они будут

Мы поставили себе цель — сделать отчёты в Owlymate понятными, функциональными и красивыми. Сегодня расскажу как мы работаем над этим 😊

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

Основные критерии, которые мы выдвигали:

• Визуальная привлекательность. На диаграммы должно быть приятно смотреть и взаимодействовать с ними.
• Интерактивность. При наведении должны показываться соответствующие значения. Также возможность выделить ряд данных при наведении на легенду, чтобы можно было визуально отделить часть данных или сделать на них акцент.
• Наличие цветовых тем. Мы планируем делать тёмную и светлую темы, потому для нас это важно.
• Кастомизируемость. Возможность изменять:
  • текст (шрифт, размеры, фон, цвет) в любом элементе диаграммы;
  • цвет рядов данных, фона;
  • расположение легенды.
• Быстрый экспорт в файл. Возможность быстро сохранить диаграмму в форматах png / svg, чтобы не терять качество, делая скриншот.
• Большая скорость отрисовки. Диаграмма должна быть быстро отрисована даже если в ней очень много данных. Например, чтобы показать изменение метрики за большой промежуток времени.

Мы остановились на библиотеке ApexCharts.js. Посмотрите какие там красивые диаграммы.

А вот пример из макета программы (это не окончательный вариант, потому не придирайтесь 🤣):

16 друзей Оулимейта

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

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

Подарки для первых клиентов Owlymate

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

И вообще хочу выразить благодарность всем нашим early adopter’ам за оказанное доверие — мы вас не подведём 😍!

Напомню, что каждому покупателю Owlymate в период предпродажи мы даём крутые бонусы:

• Участие в закрытом бета‑тестировании → вы сможете потестировать продукт до официального релиза и ваш фидбек повлияет на то, каким в итоге будет функционал.
• Доступ для друга в подарок → помимо доступа для себя вы также получите доступ для 1 друга на такой же тариф и срок подписки. Вместе веселее!
• Сова-помощница → всем покупателям Owlymate на 1 или 3 года в рамках предпродажи улетит эксклюзивная сова-помощница limited edition.
• Набор подарков → сова-помощница не просто прилетит ко всем покупателям доступов на 1 год и 3 года: она принесёт приятные сюрпризы первым клиентам.

Решиться на покупку

Зачем нужен этот дневник

Привет, я Ваня (или, как у нас принято, Кутасок) и я расскажу вам, что мы с Вайсом затеяли.

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

С помощью этого дневника мы будем:

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

Следите за обновлениями → будет интересно 😜

Знакомство

Друзья, это первая запись в нашем дневнике разработки Owlymate. Но далеко не первый день работы над инструментом 😊

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

я — Вайс

CEO

🔵 За плечами более 15 лет работы в SEO-индустрии и более 10 различных должностей в компаниях Netpeak Group.
🔵 Помимо работы играю в футзал, а также на барабанах в головокружительном количестве групп.
🔵 В этом проекте я отвечаю за все стратегические моменты: от разработки концепции до реализации финальных интерфейсов. Всегда обращаю внимание на детали, ныряю в продукт с головой, потому могу ответить практически на все вопросы о нём: начиная с запятых в текстах, заканчивая причинами тех или иных глобальных решений.

---



Кутасок (Иван Кутас):

Head of Products

⚪ Стаж в SEO — больше 7 лет + 3 года в разработке продуктов.
⚪ Воспитывает дочку, регулярно путешествует, мечтает посадить целый лес.
⚪ В Owlymate занимается проектированием и развитием продукта, а также управляет командой разработки. Постоянно изучает конкурентов на рынке, следит за тенденциями в SEO и балансирует между тем, что хочется сделать, и тем, что мы можем себе позволить.

---



Мерлин (Максим Москалик)

Lead Software Engineer

⚫ Разработчик с опытом 4 года, выпускник компьютерной академии, золотой призёр регионального и финалист международного чемпионата компьютерных талантов «Золотой Байт».
⚫ Играет на midi-клавиатуре, эрудит-ЧГКшник, любит настолки и компьютерные игры.
⚫ Превращает все идеи в работающий функционал, строит архитектуру программы и стремится сделать её максимально эффективной: одновременно быстрой, мощной и надёжной.

---



Лёля (Ольга Липова)

UI/UX Designer

🔴 Опытная дизайнерка — более 5 лет в этой сфере. Нетрудно посмотреть результаты её работы: весь наш сайт, блог, мерч и даже PDF-аудит в Netpeak Spider — это её рук дело.
🔴 Занимается кроссфитом, есть кошка и 2 паука-птицееда, играет в Sims 4 и иногда пишет картины маслом.
🔴 В Owlymate она создаёт макеты интерфейсов, визуализирует все идеи, проводит через себя все решения по функционалу. У неё очень развиты чувство вкуса и здоровый перфекционизм. Короче говоря, именно она делает новый продукт красивым и удобным.

---



Гамбит (Александр Шкарбалюк)

Platform Developer

⚪ В «вебе» целых 8 лет. До этого (неожиданно для себя) работал по специальности — программировал микроконтроллеры на языке C.
⚪ В свободное время пытается всё автоматизировать по дому — пока остановился на создании своей версии Джарвиса 😜
⚪ В проекте занимается разработкой архитектуры и функционала серверной части продукта и платформы в целом. Любит сложные задачи, а также рисовать схемы и диаграммы.

---



Гравелот (Алексей Подлипный)

Head of Platform

⚫ До Netpeak Software работал в e-commerce стартапе и пробовал себя в различных видах бизнеса (от HoReCa до строительства). В нашей компании уже более 3-х лет: из них 2 года проработал в отделах Customer Support и Customer Success, а в последний год возглавил разработку платформы (это наши веб-проекты и интеграции с ними).
⚫ Успешный муж и модератор домашнего зоопарка (3 кота, 3 птицы). Увлекается средневековой историей, бытом и музыкой.
⚫ В Owlymate отвечает за организацию веб-инфраструктуры: онлайн-отчётов, системы оповещений в мессенджеры и [контент удалён из-за нарушения NDA]. Верит, что микс идеального инструмента — в гармоничном слиянии мощности десктопных решений и гибкости облачных.

---



Сказка (Александра Новикова)

QA и Technical Writer

🔵 В IT уже 5 лет. Ранее занималась техподдержкой и переводами, пока не нашла своё место в R&D отделе нашей компании.
🔵 Тоже воспитывает дочь, а ещё двух собак, двух кошек и хочет завести черепашку. В свободное время занимается вокалом и читает книжки по биологии поведения человека.
🔵 В команде помогает Кутаску тщательно проработать идеи функционала и написать качественное техническое задание для Мерлина. И самое любимое — мучает продукт всевозможными способами, чтобы ни одна ошибка не дошла до пользователя.

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

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