Дизайн
Ростелеком

Кейс: редизайн Reindexer

Всем привет! На связи команда профинтерфейсов дизайн-студии Ростелекома. Меня зовут Никита, и в этой статье я расскажу вам о том, как мы сделали редизайн очень прикольного продукта — Reindexer.

Завязка / Контекст

Reindexer — встраиваемая, документоориентированная база данных с высокоуровневым интерфейсом построения запросов.

«Сложна, нипанятна!» — кричат некоторые дизайнеры, но продолжают вгрызаться в предметную область. Давайте попробуем через цель продукта понять, что он делает.

Основная цель Reindexer: управление базами данных с возможностью быстрого поиска по сложным и тяжелым запросам. Принцип поиска описан в статье от 2018 года. При желании покопаться, можете изучить и её — «Поиск по сайту с Reindexer — это просто».

Если попробовать объяснить ещё проще (аудитория с Хабра уже уснула), то это штука, которая позволяет вам быстро увидеть список любимых сериальчиков в Wink, когда в строке поиска вы пишите всего пару букв. Так называемые индексы позволяют ускорить поисковую выдачу, чтобы вы не сходили с ума от ярости, смотря на иконку загрузки при вводе каждого следующего символа. Отсюда и название — Reindexer.

Изначально проект разрабатывался как раз для Wink, но в итоге перерос в опенсорсный продукт (да-да, вот ссылочка на git — https://github.com/Restream/reindexer). На текущий момент (апрель 2021 года) Reindexer отдаёт более 150 млн результатов на крупнейших российских сайтах.

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

Скриншот интерфейса Reindexer до редизайна

Выглядел он вполне себе сносно, да и при анализе основных сценариев работы каких-то глобальных косяков мы не выявили — респект команде. Однако, владелец продукта пришёл к нам с просьбой освежить «лицо» Reindexer'а и провести UX-аудит.

Кульминация / Работа

Мы провели ряд установочных встреч с демонстрацией работы продукта и определили последующий план работ.

Логичный роудмэп

Отлично! План готов, можно бежать. Мы отправились выяснять потребности пользователей, которые заключались в уже ставших классикой «просто и интуитивно понятно». Параллельно запустили процесс по созданию брендинга. И тут отдельный респект всей команде разработки — каждый очень горел продуктом и хотел, чтобы он выглядел достойно, поэтому обратной связи мы получили довольно много. В итоге мы отрисовали довольно простой логотип, который согласуется с геометрией других сервисов Ростелекома. Команда тепло приняла итоговый вариант.

Логотип Reindexer и его различные вариации

Далее мы подобрали цвета и шрифты. Особенно нелегко было с отображением кода — кто бы мог подумать, что программисты очень трепетно к этому относятся (частичка дизайнера есть в каждом). Поэтому мы не стали изобретать велосипед и выбрали Hack в качестве шрифта для кода, а цветовые схемы собирали совместно с командой разработки.

Немного стиля Reindexer

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

Вот немного вкусностей нового дизайна Reindexer

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

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

Отображение кода на примере добавления item в namespace базы данных

Одной из сложных задач проекта была проработка визуализации query builder'а. Аналогично визуализации кода провели несколько итераций, корректировали по комментам от команды и пользователей.

Скрин функциональности Query builder'а

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

Развязка / Текущее положение дел

На апрель 2021 года ведется шикарнизация продукта в соответствии с отрисованным редизайном, а наша команда бойцов осуществляет поддержку разработки. Мы будем рады, если вы внесете свой вклад в развитие Reindexer, оставляя обратную связь. А пока спасибо за внимание и увидимся в следующих статьях.

Посвящается памяти Олега Герасимова и всему, что он сделал для нас.

Подготовил: Никита Денисенко (ТГ: @contragore), тим-лид команды профинтерфейсов центра компетенций UX/UI РТК ИТ

{ "author_name": "Ростелеком", "author_type": "editor", "tags": [], "comments": 4, "likes": 19, "favorites": 19, "is_advertisement": false, "subsite_label": "design", "id": 237889, "is_wide": false, "is_ugc": false, "date": "Wed, 28 Apr 2021 13:09:11 +0300", "is_special": false }
0
4 комментария
Популярные
По порядку
4

Шикарнизация 🖤

Ответить
0

Куда ж без неё)

Ответить
1

Так у вас же главный разраб реиндексера от ковидных осложнений крякнул.

Ответить
0

Это не важно. Пока они с ним договор не расторгли, он будет работать! Просто "перенсли договор" по новому месту жительства и ок.

Ответить

Комментарии

null