YouChange

(Web)

Онлайн-сервис

Команда

Клиент

Youchange

Dprofile

Смотреть кейс

Содержание

Награды

Задача

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

О проекте

YouChange — агрегатор надёжных обменников с актуальным курсом валют.

Задача

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

Исходные данные

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

Формат работы

Работали в формате выделенной команды по договору Time&Material.

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

Команда проекта

Проджект-менеджер, тимлид, фронтенд-разработчик, бэкенд-разработчик, дизайнер.

Фирменный стиль

Разработали визуальную концепцию, которая подчёркивает дух криптосервиса.

В качестве референсов взяли дизайн-коды популярных криптобирж и блокчейн-стартапов.

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

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

Логотип

Логотип разработали в сдержанном лаконичном стиле, гармонично дополняя общее визуальное оформление YouChange.

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

Пиктографика

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

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

Анимация

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

Анимация в YouChange — не декоративные эффекты, а неотъемлемая часть интерфейса. В каждую анимацию мы заложили прикладной смысл, например:

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

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

UX-дизайн

Уместили огромный массив информации на одном экране как на десктопной, так и на мобильной версии.

Нашей команде удалось упорядочить действительно много информации — у каждого обменника валют свой курс, динамика, рейтинг, отзывы. Мы организовали UX сервиса так, чтобы пользователь смог выполнить свои задачи за 3–4 клика.

Путь пользователя

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

Функционал

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

Мониторинг

Это система, которая в реальном времени и в автоматическом режиме собирает и обрабатывает актуальную информацию о сотнях обменников.

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

У крупных обменников таких направлений обмена могло быть от сотен до десятков тысяч. При этом система мониторинга собирала и обрабатывала информацию по всем направлениям.

В административной части системы можно определить, как часто мониторинг будет опрашивать определённый обменник — от «раз в 10 секунд» до «раз в несколько минут».

Как реализовано технически

Каждый интегрированный обменный сервис выкладывает данные по своим текущим курсам криптовалют в виде XML или JSON файлов по определённой ссылке.
Мониторинг регулярно проверяет эти ссылки на выгрузку актуальных курсов у всех подключённых обменников. Анализирует, какой обменник когда последний раз обновлял данные.
Мониторинг формирует список тех обменников, данные которых нужно актуализировать в следующий раз.
Этот список в виде ссылок поступает к планировщику задач.Тот распределяет задачи по обработке ссылок между несколькими параллельными процессами — потоками. Например, если нужно опросить 100 обменников, то запускается 5 параллельных потоков. И каждый поток забирает в работу по 20 обменников из общего списка.
В каждом потоке идёт парсинг поступающих XML и JSON файлов, из которых извлекаются актуальные курсы всех обменных пар. Полученные данные от всех обменников объединяются.
Собранная информация в итоге сохраняется в базе данных самого мониторинга. Там она преобразуется в аналитическую статистику о текущих курсах на рынке.
Вся эта статистика передаётся на фронтенд через API. А когда фронтенд выбирает какое-то направление, он по сокету подключается к мониторингу и получает актуальные данные по этому направлению.

Виктор Рындин

Сооснователь Dprofile,
CEO Wemakefab

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

Личные кабинеты

Продумали для проекта три вида личных кабинетов:

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

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

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

Параллельное редактирование

Технология, которая позволяет нескольким пользователям одновременно работать в редакторе обменных пунктов и вносить изменения, не мешая друг другу.

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

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

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

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

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

Генератор текстов

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

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

Поэтому мы реализовали функционал редактора шаблонов, где администратор готовил промпты для запросов к нейросети ChatGPT. Например, промпт мог выглядеть так:

«Напишите подробное описание направления обмена {type_from} на {type_to}. Опишите преимущества, процедуру, а также особенности данного направления»

Здесь {type_from} и {type_to} — это ключи-параметры, которые в дальнейшем будут подставляться конкретными значениями типа Bitcoin, Ethereum, Тинькофф и т. п.

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

Например, для направления «Тинькофф — Биткоин» подставляются нужные значения вместо параметров. Получается запрос вида:

«Напишите подробное описание направления Тинькофф на Bitcoin <...>»

Дальше система формировала список таких запросов для всех подходящих направлений обмена и передавала их по очереди ChatGPT. Получившиеся тексты сохранялись в базе данных.

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

Технологии

Фронтенд

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

Бэкенд

Основная часть сайта и API для фронтенда — PHP, фреймворк Laravel.
Мониторинг — Rust, фреймворк Actix. Подходит для реализации высоконагруженных параллельных систем.
Параллельное редактирование — GO. Позволяет быстро сделать реалтаймовую систему с хорошей производительностью.

Результат

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

YouChange интегрирован с сотнями надёжных обменников и агрегирует информацию по десяткам тысяч направлений обмена. Сервис работает в круглосуточном режиме и предоставляет всегда актуальные курсы валют.

На YouChange пользователи могут за пару кликов найти
все доступные площадки, сравнить их условия и выбрать наиболее подходящий вариант обмена.

Масштабирование сервиса

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

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

Такое решение увеличит охват аудитории и вероятность, что пользователь попадёт на агрегатор нашего клиента.

Виктор Рындин

Сооснователь Dprofile,
CEO Wemakefab

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

Разработка

Фронтенд

Vue.js, Nuxt.js

Бэкенд

Laravel

Кейсы