DiscoveryИсследование
Market research, competitor analysis, and conversations with the people who already traded.Исследование рынка, анализ конкурентов и беседы с действующими трейдерами.
Cyber
TradesMetal trading platformПлатформа торговли металлами
A web and mobile product for buying and selling gold, silver, and platinum, kept consistent from the first screen to checkout.Веб-платформа и мобильное приложение для покупки и продажи золота, серебра и платины с единым сценарием от первого экрана до оплаты.
01 / Context01 / Контекст
Precious metals trading across web and mobileТорговля драгоценными металлами на компьютере и телефоне
Cyber Trades is a platform for buying and selling gold, silver, and platinum in physical or digital form. It serves both individual investors and business clients.В Cyber Trades частные инвесторы и компании покупают и продают золото, серебро и платину в физическом или цифровом виде.
I designed the desktop platform and mobile app. The challenge was to adapt detailed financial tools to a small screen while keeping the interface and trading flows consistent across devices.Я проектировал веб-платформу и мобильное приложение. Нужно было адаптировать сложные финансовые инструменты для небольшого экрана и сохранить общую логику интерфейса и торговых сценариев.
02 / Task02 / Задача
Simplify buying and keep it consistent across devicesУпростить покупку на компьютере и телефоне
Individuals and businesses needed an interface that helped them make informed trading decisions and feel secure. The existing buying flow was complicated, web and mobile worked differently, prices were hard to compare, and people dropped out before completing checkout.Частным инвесторам и компаниям нужен был интерфейс для обдуманных сделок с ощущением безопасности. Покупка была слишком сложной, веб и приложение работали по-разному, цены было трудно сравнивать, а часть людей уходила до завершения оплаты.
StructureСтруктура
A sitemap and core flows for buying, selling, funding, and redeeming.Карта сайта и основные сценарии покупки, продажи, пополнения и вывода.
WireframesВайрфреймы
Early desktop and mobile wireframes to check the structure before detailed design.Первые вайрфреймы для компьютера и телефона, чтобы проверить структуру до детального дизайна.
DesignДизайн
A structured interface for trading data, using mint, peach, and violet to guide attention.Структурированный интерфейс для торговых данных с мятными, персиковыми и фиолетовыми акцентами.
TestingТесты
Usability tests and surveys to identify problems with onboarding, search, and guidance.Юзабилити-тесты и опросы для поиска проблем в онбординге, поиске и подсказках.
DeliveryПередача
A shared design system and guidelines for future web and mobile work.Общая дизайн-система и рекомендации для дальнейшей работы над вебом и приложением.
Visual languageВизуальный язык
Mint, peach, and violet accents on a light background organize portfolio data, live prices, and trading actions.Мятные, персиковые и фиолетовые акценты на светлом фоне помогают разделить данные портфеля, актуальные цены и торговые действия.
The hub shows account value and metal holdings alongside buying and auto-buy options, reducing the need to switch between pages.На главном экране собраны стоимость счёта, запасы металлов, покупка и автопокупка. Это позволяет реже переключаться между страницами.
03 / My contribution03 / Мой вклад
Connect the platform and app with a shared design systemСвязать платформу и приложение общей дизайн-системой
I designed the desktop platform, mobile app, and their shared design system. I adapted complex trading tools for smaller screens and kept the steps from reviewing a price to completing a trade consistent.Я проектировал веб-платформу, мобильное приложение и общую дизайн-систему. Адаптировал сложные торговые инструменты для небольших экранов и сохранял единую последовательность шагов от просмотра цены до завершения сделки.
Alongside the overall sense of trust, I worked on practical details such as comparing prices, saving favorites, and completing checkout.Помимо общего ощущения доверия, я работал с конкретными задачами: сравнением цен, добавлением в избранное и оформлением покупки.
04 / Process04 / Процесс
Use research to refine the buying flowДоработать сценарий покупки по результатам исследования
Usability tests and surveys showed that people needed better onboarding, metal comparisons, and consistency when switching devices. I used those findings to refine the structure, shared design system, and checkout.Юзабилити-тесты и опросы показали, что людям нужны более понятный онбординг, удобное сравнение металлов и одинаковая логика на разных устройствах. На основе этих выводов я дорабатывал структуру, общую дизайн-систему и оформление покупки.
Map the productСобрать карту продукта
Research the market, talk to stakeholders, and define the flows needed on both web and mobile.Изучить рынок, поговорить с участниками проекта и определить сценарии для веба и приложения.
Simplify the purchaseУпростить покупку
Organize buying into steps, with comparison, favorites, and visible checkout progress.Разбить покупку на понятные шаги, добавить сравнение, избранное и отображение этапов оформления.
Build one systemСобрать одну систему
Use shared components and rules to keep web and mobile behavior consistent.Использовать общие компоненты и правила для согласованной работы веба и приложения.
Test and hand overПроверить и передать
Review the design with stakeholders, refine it from feedback, and prepare the system for future work.Проверить дизайн с участниками проекта, доработать по обратной связи и подготовить систему для дальнейшего развития.
05 / Result05 / Результат
A consistent trading interface on the web and mobileЕдиный интерфейс для компьютера и телефона
The design brings together the Cyber Trades trading hub, mobile app, and shared design system. Buying, funding, and redeeming follow a more structured flow, with consistent interactions across devices.Дизайн объединяет торговую платформу Cyber Trades, мобильное приложение и общую дизайн-систему. Покупка, пополнение и вывод выстроены в последовательные сценарии с одинаковой логикой на разных устройствах.