Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

Разработкой наше агентство ONY занимается давно, но долгое время в фокусе внимания был дизайн, а не реализация через код. За много лет работы у нас накопилась сильная экспертиза в разработке, и мы решили выделить её в отдельное направление. Рассказываем о том, чем занимается технический отдел в ONY, что находится «под капотом» креативных решений и какие технологии мы используем, чтобы создавать цифровые продукты, рассказали в этой статье.

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

Оглавление

Что мы делаем

Команда ONY Digital Tech занимается разработкой полного цикла — от аудита и проектирования до запуска продукта. Вот уже 20 лет мы реализуем проекты любой сложности — от корпоративных экосистем и мобильных приложений до e-commerce и медиа-проектов.

К нам часто приходят клиенты за брендингом и после старта работы удивляются тому, что мы создаём и сайты, и мобильные приложения. Причём не посадочные страницы, а масштабные продукты: полноценные ecom-решения, внутренние CRM-системы, ERP-системы, etc

Марина Кошелева
CEO Digital в ONY
Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

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

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

Например, для сайта Galitskiy&Galitskiy мы искали способы передать красоту и атмосферу Краснодарского края так, будто человек действительно находится на винодельне. Для этого мы сделали множество фотографий и видео из заповедника «Красная горка», где расположены виноградники. А ещё записали звуки окружающей природы.

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

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

Синергия дизайна и разработки в нашей ДНК — ведь это то, с чего начинался ONY, в небольшой съёмной квартире, с пары дизайнеров и разработчиков. Сегодня мы большая, сформировавшаяся команда. Мы создаем цифровые продукты для огромного числа компаний: от небольших стартапов до гигантов своей отрасли

Марина Кошелева
CEO Digital в ONY
ONY SHOWREEL

Наш подход к работе над продуктом

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

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

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

Сохраняем прозрачность рабочих процессов. Для нас важно сделать рабочий процесс понятным и прозрачным, поэтому ещё на старте мы выбираем систему для фиксации договоренностей. Например, это может быть Notion, которым пользуется наша команда, либо другой трекер, удобный для клиента: Jira, Asana, Yandex Tracker.

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

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

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

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

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

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

Почему важно выбрать правильный стек технологий

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

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

Часто холдеры недооценивают этап выбора технологического стека и отдают предпочтение самому дешевому или быстрому варианту.

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

Марина Кошелева
CEO Digital в ONY

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

Так за разработкой приложения программы лояльности к нам обратилась команда производителя контактных линз Bausch+Lomb. У компании уже была программа лояльности, но работала только на сайте. Команду клиента не устраивал User Flow, поэтому нашей основной задачей было переосмыслить опыт использования приложений для здоровья, пересобрать текущие сценарии и внедрить в приложение полезные для пользователей функции.

Для разработки приложения мы выбрали мультиплатформенный фреймворк React Native. Он позволяет одновременно создавать приложения как для iOS, так и Android, что снижает затраты на разработку. Производительности мультиплатформы было достаточно, чтобы закрыть задачи клиента.

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

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

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

В 2022 году к нам обратилась компания Dantone Home — российский бренд мебели и предметов интерьера. Нашей команде предстояло сделать редизайн и технически обновить интернет-магазин и дочерние сайты бренда. Компания начала выходить на международные рынки и масштабироваться, а текущий сайт не был адаптирован под такие задачи.

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

Тестирование и контроль качества

Чтобы оценить работу готового продукта, на финальном этапе мы проводим четыре вида тестирования:

  • Функциональное — проверяем, соответствует ли программа или приложение спецификациям и верно ли выполняет свои функции.
  • Интеграционное — тестируем взаимодействие и передачу данных между различными компонентами или модулями программы.
  • Тестирование производительности — оцениваем способность системы справляться с высокой нагрузкой и определяем её предельные точки.
  • Smoke-тестирование — тестируем программу или приложение на наличие явных ошибок в коде.
Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

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

Чек-лист. Содержит список прозрачных критериев, по которым клиент может оценить проект, например:

  • страница «Каталог» открывается на iPhone SE;

  • верстка выглядит как в макете;

  • в процессе заказа с сайта есть «Пункт самовывоза».

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

Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты

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

Что происходит после сдачи проекта

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

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

Для этого продуктовая команда ONY используют разные инструменты, например, систему аналитики «Яндекс Метрика». Система собирает показатели по сайту: органический трафик, время визита пользователей, глубину просмотра страниц, переходы по ссылкам и другие.

Какие показатели будут смотреть аналитики, зависит от задач проекта.

Например, Dantone Home было важно удержать пользователя на сайте, поэтому мы анализировали поведенческие метрики:

- количество просмотров страниц на сайте;

- процент отказов от покупки;

- глубину просмотра страниц.


Ориентируясь на метрики и потребности клиента, мы продолжаем работать с сайтом Dantone Home. В планах добавить:

- возможность кастомизации мебели в карточку: выбор материалов, фурнитуры, комплектации;

- интеграцию с сервисами доставки и сервисом по работе с программой лояльности;

- геозависимый контент — когда компьютер автоматически определяет местоположение пользователя, и в зависимости от локации показывает определённый контент, например, разный ассортимент товаров по регионам.

В первую очередь, ONY Digital Tech — это экспертность и индивидуальный подход. Мы учитываем особенности конкретного проекта, бизнес-процессы и наличие у клиента собственной команды разработки. Исходя из этих параметров, подбираем оптимальное решение, как с точки зрения стека, так и методологии ведения проекта

Руслан Гончаров
Group Head of New Business в ONY

Для выбора оптимального решения своих задач, вы можете связаться с экспертом ONY Digital tech.

Еще больше кейсов, подкастов от нашей команды и новостей дизайн-индустрии — в нашем Telegram-канале. Подписывайтесь!

1111
Начать дискуссию