Воплощаем смелые идеи в реальность через код: как мы разрабатываем цифровые продукты
Разработкой наше агентство ONY занимается давно, но долгое время в фокусе внимания был дизайн, а не реализация через код. За много лет работы у нас накопилась сильная экспертиза в разработке, и мы решили выделить её в отдельное направление. Рассказываем о том, чем занимается технический отдел в ONY, что находится «под капотом» креативных решений и какие технологии мы используем, чтобы создавать цифровые продукты, рассказали в этой статье.
Оглавление
Что мы делаем
Команда ONY Digital Tech занимается разработкой полного цикла — от аудита и проектирования до запуска продукта. Вот уже 20 лет мы реализуем проекты любой сложности — от корпоративных экосистем и мобильных приложений до e-commerce и медиа-проектов.
К нам часто приходят клиенты за брендингом и после старта работы удивляются тому, что мы создаём и сайты, и мобильные приложения. Причём не посадочные страницы, а масштабные продукты: полноценные ecom-решения, внутренние CRM-системы, ERP-системы, etc
В основе нашей работы — синергия дизайнеров и разработчиков. На старте проекта всегда появляется много творческих идей, которые хочется воплотить, но не все их легко реализовать технически. Именно поэтому с самого начала все визуальные идеи в ONY создаются в тесном взаимодействии с командой разработки.
Мы стремимся не просто сделать красивую картинку, а передать настоящие ощущения от физического продукта. Этот принцип прослеживается во всех наших проектах.
Например, для сайта Galitskiy&Galitskiy мы искали способы передать красоту и атмосферу Краснодарского края так, будто человек действительно находится на винодельне. Для этого мы сделали множество фотографий и видео из заповедника «Красная горка», где расположены виноградники. А ещё записали звуки окружающей природы.
Команде разработки нужно было организовать архитектуру сайта так, чтобы объёмные видеофайлы с коптера прогружались синхронно со звуками ветра, моря и пения птиц. Для решения этой задачи использовали фреймворки Laravel и Vue. Laravel нужен, чтобы сформировать каркас сайта, а Vue — для создания интерфейса. В связке эти фреймворки позволяют реализовывать проекты, дополненные контентом, без потери скорости.
Вся анимация на сайте плавная и спокойная, что отсылает к гедонизму и отдыху на лоне природы. Чтобы создать такой ритм, разработчики сделали бесшовные переходы с помощью технологии Single Page Application.
Синергия дизайна и разработки в нашей ДНК — ведь это то, с чего начинался ONY, в небольшой съёмной квартире, с пары дизайнеров и разработчиков. Сегодня мы большая, сформировавшаяся команда. Мы создаем цифровые продукты для огромного числа компаний: от небольших стартапов до гигантов своей отрасли
Наш подход к работе над продуктом
Создаём MVP с последующим масштабированием. В нашей работе встречаются сложные проекты со множеством деталей и интеграций. Чтобы не затягивать релиз на годы, мы используем продуктовый подход — начинаем с MVP и затем добавляем улучшения к готовой базе. Так клиент быстрее получает работающий продукт, в который уже можно приглашать реальных пользователей.
Сразу после выпуска первой версии продукта мы собираем метрики и изучаем поведение пользователей. Это позволяет понять, какой функционал действительно важно добавить, а что будет лишним.
Сохраняем прозрачность рабочих процессов. Для нас важно сделать рабочий процесс понятным и прозрачным, поэтому ещё на старте мы выбираем систему для фиксации договоренностей. Например, это может быть Notion, которым пользуется наша команда, либо другой трекер, удобный для клиента: Jira, Asana, Yandex Tracker.
При разработке мы движемся по плану, зафиксированному в RoadMap, а также проводим регулярные демо для клиента, где показываем промежуточные результаты проделанной работы.
Контролируем результат. Обычно этап разработки следует за этапом дизайна. Сначала специалисты отрисовывают макет, затем отдают его в технический отдел. Из-за этого некоторые задумки дизайнеров остаются нереализованными. Идея может быть интересной, но технически сделать это сложно или слишком затратно. За этим следует череда правок и доработок.
Чтобы этого избежать, наши дизайнеры начинают работать в связке с разработчиками ещё на этапе макета. Это упрощает и ускоряет процесс работы. Дизайнеры формируют UI-kit, который помогает разработчикам ускорить вёрстку и проработку логики, а разработчики — дают дизайнерам обратную связь по идеям и выбору инструментов.
Взаимодействие между командами контролирует арт-директор. Он консультирует технический отдел в процессе работы и следит за тем, чтобы все детали макета были учтены.
Почему важно выбрать правильный стек технологий
Выбор правильного стека для будущего проекта влияет не только на качество кода, безопасность и гибкость, но и на ежедневные процессы, связанные с поддержкой и развитием проекта. Подходящий стек снижает затраты, минимизирует риски и улучшает репутацию продукта.
Часто холдеры недооценивают этап выбора технологического стека и отдают предпочтение самому дешевому или быстрому варианту.
Как подтверждает опыт, спустя год эксплуатации неподходящего технологического стека проект часто сталкивается с необходимостью полной перезагрузки. Основные причины: постоянные технические сбои, ухудшение пользовательского опыта, бесконечный принудительный рефакторинг, а также избыточные затраты на исправления. Всё это существенно тормозит развитие и инновации в проекте
Мы всегда открыто объясняем причины выбора определенного стека технологий, делимся своими знаниями и опытом, чтобы у наших клиентов не было сомнений, почему определенный фреймворк или язык программирования подходят для конкретного проекта.
Так за разработкой приложения программы лояльности к нам обратилась команда производителя контактных линз 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 — это экспертность и индивидуальный подход. Мы учитываем особенности конкретного проекта, бизнес-процессы и наличие у клиента собственной команды разработки. Исходя из этих параметров, подбираем оптимальное решение, как с точки зрения стека, так и методологии ведения проекта
Для выбора оптимального решения своих задач, вы можете связаться с экспертом ONY Digital tech.
Еще больше кейсов, подкастов от нашей команды и новостей дизайн-индустрии — в нашем Telegram-канале. Подписывайтесь!