«Прожарили» сервисы студии «Панклаб» и выиграли по 40 000 рублей — студентки Contented о конкурсе «Дизайн-втык»

Что случилось

В апреле в Санкт-Петербурге прошел «Дизайн-втык» — хакатон для UX/UI-дизайнеров от студии «Панклаб». Студия разрабатывает цифровые продукты для автоматизации процессов, алгоритмы для управления системами и другие IT-решения для бизнеса.

16 участников конкурса должны были «прожарить» B2B-продукты студии:

• сервис для контроля производства товара Inspector;
• сайт издания для бухгалтеров «Актион-пресс»;
• приложение для контроля производства с чек-листами Easy Check;
• сайт финансовых услуг Kept.

На работу закладывалось десять дней. За это время участники должны были выбрать один из сервисов, получить вводные от владельца продукта, создать и доработать макеты по замечаниям кураторов — опытных дизайнеров из «Пинкмана», Setters, Skillfactory и других компаний.

В хакатоне участвовали три студентки Contented: Диана Черношейкина, Настя Алекперова и Аня Акименко. Настя и Аня вошли в четверку лучших — получили дипломы, кейсы в портфолио и по 40 000 рублей.

Настя и Аня поделились с Contented, как планировали работу, проводили исследования, опрашивали пользователей и исправляли ошибки предыдущих дизайнеров.

От хаоса к порядку: как Аня переработала дизайн сервиса контроля производства

Я выбрала для прожарки Inspector — сервис, в котором можно отслеживать, как производится продукт. На разных этапах за процессом следят инспекторы — они приезжают к поставщикам и подрядчикам, смотрят, как идет работа, и загружают свои отчеты в сервис. Заказчик может в любой момент посмотреть историю проверок и узнать, на какой стадии производства находится товар.

Я выбрала этот проект, потому что мне хотелось поработать с сервисом, которым пользуется много людей. Мне кажется, такой опыт ближе всего к реальной работе и точно пригодится. А еще нам сказали, что у Inspector нет аналогов и подсмотреть готовые решения будет негде. А так гораздо интереснее!

Руководитель продукта сразу выделил ключевые проблемы в дизайне:

• сложно искать отчеты и комментарии по времени — а добавляются они ежедневно;
• трудно ориентироваться в этапах и подэтапах;
• на экране много разнородных данных, из-за чего пользователю сложно искать нужную информацию.

Чтобы решить задачу, я обратилась к пользователям Inspector. Построила гипотезы, составила список вопросов и приступила к самому волнительному для меня этапу работы — интервью. Записала все, что услышала, выписала конкретные претензии и попыталась понять, как сделать дизайн Inspector лучше.

Первый этап — анализ рынка. Увы, как и говорил руководитель продукта, конкурентов у Inspector нет. А если они и есть, то их внутренние интерфейсы, конечно же, закрыты.

Следующий этап — составление портрета целевой аудитории. Я представила 37-летнего инженера-технолога из Санкт-Петербурга, цели и проблемы которого созвучны тем, что я определила у опрошенных пользователей Inspector.

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

На странице с инспекциями есть две главные вкладки: «Основная информация» и «Подробный отчет». Задача заключалась в переработке именно второй вкладки, где находятся все комментарии инспекторов.

Я отметила главные недочеты страницы числами:

1. Много пустого пространства.
2. Слишком большие кнопки.
3. Табы — ряды горизонтальных переключателей между вкладками — находятся друг под другом. Дублирование таких элементов напрягает пользователя.
4. Элемент с зелеными полосами статуса занимает слишком много места. В нашем интерфейсе важнее всего комментарии, и им нужно больше пространства.
5. Повторение акцентных горизонтальных и вертикальных полос создает много визуального шума и путает пользователя.
6. Снова пустое пространство.
7. Кнопка для сворачивания панели с описанием этапа находится слишком далеко от текста. Чтобы нажать на нее, пользователю приходится вести взгляд вправо как по линейке.
8. Текст дублируется на каждом этапе с нумерацией. Это путает пользователя и загружает пространство на экране.

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

Несколько ключевых обновлений:

• Чтобы переключаться между этапами, не нужно скроллить страницу вниз — переходить к ним и смотреть статусы можно с помощью горизонтального элемента в верхней части страницы.
• При открытии вкладки пользователь сразу видит информацию о последних проверках на выбранном этапе. Если открыта вкладка «Все этапы», то отображаются все проверки с названием этапа и подэтапа в заголовке. Также появилась удобная навигация по периодам.
• Новые комментарии инспекторов показываются метками «+1», «+2» и так далее. Теперь их сложнее пропустить.
• Сложную иерархию убрать нельзя, но я добавила отступы у заголовков подэтапов и выпадающие списки, чтобы пользователь мог скрыть проверки, которые ему не нужны.
• У некоторых проверок есть прикрепленные файлы. Раньше, чтобы их посмотреть, нужно было проваливаться вниз, внутрь отчета. Теперь приложенные файлы видно по иконкам в поле проверки.
• Справа появился сайд-бар для быстрого перехода к сообщениям инспектора или юридической информации о товаре.
• Все стало аккуратнее и логичнее: исчезли пустые поля, больше важной информации стало умещаться на одном экране.

Я выполнила задачу минимум, но внутренний перфекционист победил — и следом я переделала вкладку «Основная информация».

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

Юридическую информацию я вынесла в верхнюю плашку, оставив сайд-бар таким же, как на вкладке с «Подробной информацией». Добавила график соответствия плану в процентах. Этапы разместила в прямоугольных блоках, чтобы пользователю не приходилось долго скроллить, чтобы дойти до последнего. Добавила те же «плюсики» с проверками — теперь не нужно переходить в «Подробный отчет», чтобы увидеть важные обновления. А галерею перенесла вниз, под этапы.

Меньше терминов, больше заботы: как Настя переосмыслила сайт финансовых услуг

Я работала над лендингом сервиса Kept. Это платформа-посредник между поставщиками и покупателями, которая предоставляет услугу динамического дисконтирования — в этой модели пользователи оплачивают товар заранее в обмен на скидку.

Владелец сервиса обозначил проблему лендинга так: пользователи не понимают, как работает динамическое дисконтирование, и не считывают ценность продукта.

Читайте также

В чем секрет Хаяо Миядзаки и почему он нравится не только детям

Я начала с анализа рынка. Нашла несколько прямых и косвенных конкурентов: iSource, SmartDiscount, «Райффайзен Банк» и InsSmart. Выделила их преимущества и изучила карты сайтов, чтобы использовать лучшие решения в структуре своего лендинга.

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

Основные недостатки лендинга я выявила, но кто «прожарит» продукт лучше, чем сами пользователи? Я провела юзабилити-тестирование и выяснила, что все посетители сайта на самом деле понимают, как работает динамическое дисконтирование. Но текст на странице все портит. Где взять ставку кредита? Что такое маржа? А факторинг? Все это нужно либо убрать, либо объяснить и упростить.

После исследований я приступила к работе. Составила структуру на основе анализа конкурентов. Потом определилась с цветом. Так как Kept — продукт «Газпром нефти», выбирала между двумя синими и в итоге нашла свой вариант. Для надписей выбрала Manrope — гротескный шрифт, который хорошо смотрится в больших заголовках и легко считывается в мелком тексте.

И вот что у меня получилось. Все начинается с первого экрана — не нагружаем пользователя текстом, даем краткие преимущества и кнопку регистрации.

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

Сразу после идет блок про Kept. Четыре важных преимущества, которые я выделила на основе юзабилити-тестирования, а еще достижения компании в числах.

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

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

Так как каждый сайт — это история, приходим к итогу. В нашем случае это результат.

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

Ближе к концу страницы добавила раздел с часто задаваемыми вопросами. В нем появилась кнопка «Хочу узнать больше о динамическом дисконтировании», которая ведет на страницу с новостями или статьями. Сейчас такой страницы на лендинге нет, но я подумала, что ее можно добавить.

В самом конце находится форма заявки и телефон обратной связи. Ну и футер — «подвал» сайта с ссылками на разные блоки страницы и юридическую информацию.

О главном, что дал хакатон

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

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

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