UX/UI дизайн научного сервиса для изучения физики плазмы

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

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

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

Одним из самых неудобных элементов в прежнем UX был процесс маппинга данных. Пользователю нужно было сначала перейти на отдельную страницу, настроить отображение, затем вернуться на страницу графиков и только потом увидеть результат. При необходимости внести изменения — снова назад. Это было громоздко и вызывало фрустрацию. Мы перенесли маппинг прямо в окно с графиком: теперь всё настраивается в одном интерфейсе. Нажатие одной кнопки открывает настройки, и результат сразу же отображается на графике. Это значительно упростило работу и сократило путь от данных к результату.

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

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

Параметры графика

Визуальный стиль создавался параллельно с интерфейсом. Я выбрала нейтральную, научную палитру с акцентами синего цвета — он наиболее распространён в сегменте научных платформ и не мешает восприятию данных. Мы использовали шрифт Inter, так как он отлично читается в таблицах, графиках и числовых значениях, а также хорошо работает в адаптивных интерфейсах. Компоненты интерфейса мы строили на базе библиотеки Mantine, которую кастомизировали под нужды проекта: добавили фирменные цвета, адаптировали отступы, переработали стили кнопок, форм и модальных окон. Для графиков применили AG Grid Charts — мощную библиотеку, которая позволяет кастомизировать оси, легенды, цвета и добавлять интерактивность.

Брендинг

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

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

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

Тут можно посмотреть как создавался визуальный стиль: Twin: брендинг и визуальная айдентика.
Про UX/UI дизайн: Twins: мобильное приложение и UX-дизайн.