100
Клиент
Youchange
Год
2021
О проекте
Клиент
YouChange —
агрегатор надёжных обменников с актуальным курсом валют.
Задача
Разработать онлайн-сервис для мгновенного поиска лучших предложений по обмену фиатных и цифровых валют. Где пользователь в три клика сможет сравнить все доступные площадки, изучить отзывы о них и подобрать наиболее выгодный вариант.
Исходные данные
У клиента было чёткое видение, каким должен получиться продукт с точки зрения функционала, стиля и дизайна. Мы помогли
это видение структурировать и оформить в виде подробного технического задания. Для этого сформулировали и детально прописали все требования к проекту на основе пожеланий клиента.
Формат работы
Работали
в формате выделенной команды по договору Time&Material.
Так как у клиента было глубокое понимание рынка обмена валют,
он хотел взять на себя всю продуктовую часть проекта, включая аналитику и проработку функционала. Чтобы самостоятельно определять, как будет работать продукт и в какой последовательности будут выходить функции. Поэтому мы стали работать в формате выделенной команды. Наша роль была в реализации отдельных задач по требованию клиента.
Команда проекта
Фирменный стиль
Разработали
визуальную концепцию, которая подчёркивает дух криптосервиса.
В качестве референсов взяли дизайн-коды популярных криптобирж и блокчейн-стартапов.
В основу визуальной концепции YouChange заложили минималистичность, тёмную цветовую гамму с фиолетовыми оттенками, сделали акцент на типографике. В итоге получился узнаваемый и строгий визуальный код, который не отвлекает пользователя от его задач, но при этом делает акценты на важных элементах интерфейса.
Так как дизайн получился тёмным и насыщенным, нам захотелось предложить пользователям альтернативную версию.
Поэтому мы разработали дополнительную светлую тему,
чтобы сайтом было комфортно пользоваться в любых условиях.
Логотип
Логотип разработали в сдержанном лаконичном стиле, гармонично дополняя общее визуальное оформление YouChange.
Он передаёт суть сервиса, а благодаря простой форме легко запоминается и легко узнаётся на различных площадках: соцсетях и рекламных материалах.
Пиктографика
Создали набор уникальных пиктограмм для проекта. Изначально заказчик хотел использовать готовые иконки со сторонних сайтов, но ни в одном паке не было подходящего набора.
Поэтому мы отрисовали все иконки самостоятельно. Так мы убили двух зайцев: иконки отлично вписываются в дизайн-концепцию проекта и выдержаны в одном стиле.
Анимация
Помогает
взаимодействовать с сайтом и фокусирует внимание пользователя на нужных блоках.
Анимация в YouChange — не декоративные эффекты, а неотъемлемая часть интерфейса. В каждую анимацию мы заложили прикладной смысл, например:
Кроме того, мы проработали анимацию поп-апов и других стандартных элементов, к которым все уже привыкли. Большинство из них незаметны на первый взгляд, но в этом и весь секрет — анимации должны быть ненавязчивыми, при этом они помогают привыкнуть к интерфейсу и взаимодействовать с ним.
UX-дизайн
Уместили
огромный массив информации на одном экране как на десктопной, так и на мобильной версии.
Нашей команде удалось упорядочить действительно много информации — у каждого обменника валют свой курс, динамика, рейтинг, отзывы. Мы организовали UX сервиса так, чтобы пользователь смог выполнить свои задачи за 3–4 клика.
Путь пользователя
Функционал
Продумали
и реализовали уникальные функции, которые делают сервис удобным
для пользователей
и администраторов.
Мониторинг
Это система, которая в реальном времени и в автоматическом режиме собирает и обрабатывает актуальную информацию
о сотнях обменников.
Каждый обменник через открытые API предоставляет данные
о своих текущих курсах обмена по различным направлениям — сколько нужно отдать единиц одной валюты, чтобы получить определённое количество другой.
У крупных обменников таких направлений обмена могло быть
от сотен до десятков тысяч. При этом система мониторинга собирала и обрабатывала информацию по всем направлениям.
В административной части системы можно определить, как часто мониторинг будет опрашивать определённый обменник —
от «раз в 10 секунд» до «раз в несколько минут».
Как реализовано
технически
Система мониторинга круглосуточно опрашивает сотни обменников и собирает актуальные курсы валют. Звучит просто, но это огромный поток с данными, которые нужно регулярно обрабатывать, непрерывно обновлять и выводить в единообразном виде. У нас получилась многопоточная система, которая стабильно выполняет эти задачи. Благодаря ей пользователи могут за пару кликов найти подходящий вариант обмена, сэкономив кучу времени.
Личные кабинеты
Продумали для проекта три вида личных кабинетов:
Параллельное
редактирование
Технология, которая позволяет нескольким пользователям одновременно работать в редакторе обменных пунктов и вносить изменения, не мешая друг другу.
Система хранит у себя информацию обо всех обменниках
и обеспечивает параллельный многопользовательский доступ
к этим данным.
Когда пользователь заходит в редактор, он подключается к системе параллельного редактирования через сокет и запрашивает актуальную информацию по обменникам. Далее любые изменения полей в записи конкретного обменника тут же отправляются
в систему по тому же сокету.
Система фиксирует эти обновления данных и рассылает оповещение по сокетам всем остальным подключённым пользователям о том, что произошли изменения. Так что новые подключения сразу получают уже актуальную версию данных.
Если по каким-то причинам система не может принять
и сохранить изменения, она уведомляет конкретного пользователя об этой ошибке.
Также мы настроили периодическую фоновую синхронизацию накопившихся изменений с базой данных, чтобы оптимизировать нагрузку на неё.
Генератор текстов
Технология, которая автоматически создаёт тексты для направлений обмена валют с помощью ChatGPT.
На сервисе есть десятки тысяч разных направлений обменов валют, и для каждого из них нужно было написать уникальный SEO-текст. Для человека это была бы крайне трудоёмкая задача.
Поэтому мы реализовали функционал редактора шаблонов,
где администратор готовил промпты для запросов к нейросети ChatGPT. Например, промпт мог выглядеть так:
«Напишите подробное описание направления обмена {type_from}
на {type_to}. Опишите преимущества, процедуру, а также особенности данного направления»
Здесь {type_from} и {type_to} — это ключи-параметры, которые
в дальнейшем будут подставляться конкретными значениями
типа Bitcoin, Ethereum, Тинькофф и т. п.
Дальше в автоматическом режиме эти шаблоны комбинировались с направлениями обмена криптовалют из нашей базы данных.
Например, для направления «Тинькофф — Биткоин» подставляются нужные значения вместо параметров. Получается запрос вида:
«Напишите подробное описание направления Тинькофф на Bitcoin <...>»
Дальше система формировала список таких запросов для всех подходящих направлений обмена и передавала их по очереди ChatGPT. Получившиеся тексты сохранялись в базе данных.
То есть администраторы просто составляли шаблоны промптов для разных групп направлений, а всё остальное делала система.
Технологии
У нас получилась
микросервисная архитектура, где каждый сервис отвечает
за свою часть.
Фронтенд
Основную часть работы вели на Vue.js. Это популярный и гибкий стек, который отлично подходит для реализации анимаций
и плавных переходов между страницами.
Бэкенд
Результат
Клиент получил
полноценный сервис для поиска оптимальных предложений
по обмену валют, который соответствует его видению.
YouChange интегрирован с сотнями надёжных обменников
и агрегирует информацию по десяткам тысяч направлений обмена. Сервис работает в круглосуточном режиме и предоставляет всегда актуальные курсы валют.
На YouChange пользователи могут за пару кликов найти
все доступные площадки, сравнить их условия и выбрать наиболее подходящий вариант обмена.
Масштабирование
сервиса
У клиента есть планы по масштабированию сервиса на другие сегменты целевой аудитории. У него есть гипотеза, что смелый
и яркий дизайн может отпугнуть консервативных пользователей, поэтому для них нужно сделать варианты с дизайном попроще.
Мы планируем на базе разработанного ядра YouChange реализовать ещё два дополнительных агрегатора обменников, но с другим дизайном.
Такое решение увеличит охват аудитории и вероятность,
что пользователь попадёт на агрегатор нашего клиента.
YouChange — это крутой финтех-продукт, который помогает людям экономить время и деньги — быстро находить самые выгодные варианты обмена валют. Кроме того, сейчас он особенно актуален из-за ограничений
на банковские операции с другими странами. С помощью YouChange пользователи могут перевести деньги в крипту по самому выгодному курсу
и провести платёж или перевод.
Фронтенд
Vue.js
Nuxt.js
Бэкенд
Laravel
Интеграции
Внутренние сервисы компании
Награды
3Кейсы
Рекомендуем
Следующий