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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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