Как мы делаем редизайн криптоплатформы для фрилансеров

Расскажем, как мы обновляем интерфейс LaborX, который сами же делали два года назад.

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

Самые масштабные изменения коснулись интерфейса, поэтому в этой статье расскажем, как наша команда работала и продолжает работать над ним.

Как мы делаем редизайн криптоплатформы для фрилансеров

Продукт — фриланс-платформа на блокчейне

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

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

Как мы делаем редизайн криптоплатформы для фрилансеров

Главное преимущество LaborX — это специализация на блокчейн и web3 отрасли. Обычно крипто-ориентированные приложения очень сложные в использовании, мы сделали LaborX максимально простым, тем самым снизили порог входа для новой аудитории.

Александра Кугушева, Head of Operations, LaborX

Критический фактор — пользовательский опыт. В диалоге с командой LaborX выяснили, что аудитория фрилансеров-исполнителей стабильно растет и доминирует на площадке. Поэтому, на данном этапе стало важнее фокусироваться на заказчиках. Именно рост клиентов, размещающих заказы, является основным двигателем роста аудитории — и соответственно, числа сделок.

Как мы делаем редизайн криптоплатформы для фрилансеров

Задачи — заказчики отдельно, фрилансеры отдельно

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

Как мы делаем редизайн криптоплатформы для фрилансеров

Приоритетные задачи в дизайне интерфейса:

  • разделение ролей заказчика и фрилансера — крайне низкий процент людей пользовался обоими одновременно. Их разделение помогло с навигацией и упростило UX как для заказчиков, так и для исполнителей;
  • спроектировать сценарии более линейным образом, стараясь учесть различные edge cases — чтобы, например, изменить настройки, не прерывая действия;
  • правильные акценты на целевых экшенах на каждом шаге;
  • заложить основу для масштабирования — собрать хорошо проработанный UI kit;
  • в будущем для настройки точной аналитики сценарии должны быть линейными, но с дискретностью, которая позволит фиксировать каждое действие и событие.

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

Лена Бардашева, Senior Product Designer, Embacy

Во время работы с юзабилити мы устранили логические ошибки в сценариях и договорились, что посмотрим на метрики после обновления. Для навигации разделили функцию бокового меню (навигация в индивидуальных разделах пользователя) и верхнего меню (навигация по общедоступным разделам). Это позволит пользователю сохранять фокус на собственных активностях.

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

Как мы делаем редизайн криптоплатформы для фрилансеров

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

Как мы делаем редизайн криптоплатформы для фрилансеров

Хороший дизайн отличается от заурядного вниманием к деталям. Ряд нюансов, которые нам было необходимо учесть:

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

Планирование — шаг за шагом

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

Основные этапы:

  • аналитика;
  • дизайн-концепция;
  • масштабирование.

Аналитика — чтобы решить вопросы, нужно их задать

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

Аудит AS IS и идентификация основных задач, требующих решения:

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

Дизайн-концепция — и трендово, и удобно

Для проработки дизайн-концепции был выбран один из наиболее нагруженных сценариев (Gigs), что позволило проработать значительный объем UI kit. На его основе можно более эффективно масштабировать дизайн.

Как мы делаем редизайн криптоплатформы для фрилансеров

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

Как мы делаем редизайн криптоплатформы для фрилансеров

Масштабирование — адаптируем для всех сценариев

Основные решаемые задачи:

  • масштабирование сценариев, включающее в себя проработку edge cases, ошибок, состояний компонентов и экранов;
  • ресайзы для мобильных браузеров — аналитика показала, что знакомство с платформой и поиск работы чаще выполняется с мобильных устройств.
Как мы делаем редизайн криптоплатформы для фрилансеров
  • подготовка макетов к передаче в разработку;
  • проработка UI kit для дальнейшего масштабирования и развития платформы;
  • поддержка разработки.

Выводы

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

Дима Мороз, Head of UI+UX, Embacy

Команде LaborX важно было снизить порог входа в мир крипты, мы постарались сделать это через простой и понятный интерфейс. И я считаю, что у нас получилось. А вы?)

P.S. Говоря о крипте — недавно показывали наш Embacy Coin, а из-за упавшего эфира теперь не хотим его продавать. Но ведь у крипты все будет хорошо, да ведь?

4848
11 комментариев

Забавно по цветовой схеме и тематике я сейчас делаю точно такой же проект.

3
Ответить

Когда зашел на dribbble взять немного референсов

1
Ответить

Арт из 2015... харе уже

3
Ответить

я чот не понял, а исследования на пользователях проводились вообще?

2
Ответить

Какой же ебейший контрастный цвет. Вы рофлите шоль? Я только от просмотра картинок слезы утер...

1
Ответить

Хороший дизайн для биржи. Порог входа и правда снижен до предела. Кто ни разу не работал с криптой, но работал на бирже сразу поймет как и что устроено.
Кто бы что не говорил, но палитра четкая. Люблю сочетание розового и желтого. Cразу напомнило ваш проект Slash.
Но пока смотрел нашел один минус в UX - это бюджет заказа. Зачем этот слайдер с неточными цифрами((( их же никто не любит за неудобность. Можно было сделать просто окно для ввода.
Даже если слайдер обязателен(например для мобильной версии), то можно было сделать вот так:
1. Я чуть-чуть подшаманил
2. Как есть

1
Ответить

как всегда стильно и чистенько.

Ответить