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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• подготовка макетов к передаче в разработку;
  
• проработка UI kit для дальнейшего масштабирования и развития платформы;
• поддержка разработки.

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

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