Как мы делаем редизайн криптоплатформы для фрилансеров
Платформа выросла в количестве регистраций и сделок — более 70к зарегистрированных пользователей. Сама компания стала более серьезной и структурированной, перейдя на новый этап своего развития. При этом, всегда стоит вопрос в поддержании роста, а также в органичной смене позиционирования — от криптоанархистов до более серьезной компании.
Главное преимущество LaborX — это специализация на блокчейн и web3 отрасли. Обычно крипто-ориентированные приложения очень сложные в использовании, мы сделали LaborX максимально простым, тем самым снизили порог входа для новой аудитории.
Критический фактор — пользовательский опыт. В диалоге с командой LaborX выяснили, что аудитория фрилансеров-исполнителей стабильно растет и доминирует на площадке. Поэтому, на данном этапе стало важнее фокусироваться на заказчиках. Именно рост клиентов, размещающих заказы, является основным двигателем роста аудитории — и соответственно, числа сделок.
Задачи — заказчики отдельно, фрилансеры отдельно
Редизайн самого продукта был частью комплексного проекта по обновлению фирменного стиля. Это история для отдельного кейса, но важно отметить, что команды интерфейса и брендинга часто перекликались — UI должен соответствовать фирменному стилю.
Приоритетные задачи в дизайне интерфейса:
- разделение ролей заказчика и фрилансера — крайне низкий процент людей пользовался обоими одновременно. Их разделение помогло с навигацией и упростило UX как для заказчиков, так и для исполнителей;
- спроектировать сценарии более линейным образом, стараясь учесть различные edge cases — чтобы, например, изменить настройки, не прерывая действия;
- правильные акценты на целевых экшенах на каждом шаге;
- заложить основу для масштабирования — собрать хорошо проработанный UI kit;
- в будущем для настройки точной аналитики сценарии должны быть линейными, но с дискретностью, которая позволит фиксировать каждое действие и событие.
В срезе визуального дизайна мы в первую очередь “почистили” интерфейс: убрали визуальный шум в виде необоснованно использующихся рамок и прочих декораций, “облегчили” многие элементы, сместили цветные акценты к важным для пользователя действиям и в целом поработали с иерархией в интерфейсе.
Во время работы с юзабилити мы устранили логические ошибки в сценариях и договорились, что посмотрим на метрики после обновления. Для навигации разделили функцию бокового меню (навигация в индивидуальных разделах пользователя) и верхнего меню (навигация по общедоступным разделам). Это позволит пользователю сохранять фокус на собственных активностях.
Для плавного перехода в первой итерации оставили боковое меню на месте, но убрали с него акцент. Заранее заложили возможность позже переработать навигацию, когда пользователи привыкнут к новому визуальному дизайну.
Фрилансерам и заказчикам привычно общаться в мессенджерах — мы развили эту историю, переместив всю работу над проектом во встроенный мессенджер платформы. Здесь они могут не только обмениваться сообщениями и файлами, но и выставлять и принимать офферы, оплачивать работу и завершать сделку. Такой нативный подход с привычной перепиской дает возможность пользователям решать все возможные вопросы на платформе.
Хороший дизайн отличается от заурядного вниманием к деталям. Ряд нюансов, которые нам было необходимо учесть:
- важно было внедрять изменения осторожно — площадка уже активно используется, дизайнер, не навреди;
- особенности SEO-продвижения — синхронизировались с SEO-специалистами для внесения соответствующих изменений и контентных блоков, которые требуется размещать органично на страницах;
- сделки заключаются и исполняются с десктопов — при этом важно учесть, что поиск (browsing) часто осуществляется в мобильных браузерах, поэтому на адаптивы надо обратить отдельное внимание;
- гигиенические факторы — реализуемость проектируемого функционала с точки зрения разработки: логика и доступные данные;
- сделать дизайн помогающим — правильно выстроить визуальную иерархию.
Планирование — шаг за шагом
Ошибки и замечания важно устранять на этапе дизайна, поскольку каждый следующий шаг увеличивает стоимость их исправления. Поэтому, выстроили формат работы со скользящим планированием и возможной корректировкой плана.
Основные этапы:
- аналитика;
- дизайн-концепция;
- масштабирование.
Аналитика — чтобы решить вопросы, нужно их задать
Среди прочего провели ревью текущей реализации и идентифицировали основные пробелы в части навигации и пользовательского опыта в целом. Выше мы уже упомянули задачу разделить роли заказчиков и исполнителей. Она появилась только из тщательного изучения обратной связи — только так узнали, что почти никто не пользуется платформой в обеих ролях.
Аудит AS IS и идентификация основных задач, требующих решения:
- смешение ролей и как следствие усложнение навигации, расфокусировка;
- запутанная навигация в рамках сценариев и отдельных страниц;
- повторяющиеся действия и зацикленность некоторых сценариев;
- неправильные визуальные акценты.
Дизайн-концепция — и трендово, и удобно
Для проработки дизайн-концепции был выбран один из наиболее нагруженных сценариев (Gigs), что позволило проработать значительный объем UI kit. На его основе можно более эффективно масштабировать дизайн.
В работе над визуальной стилистикой придерживались подхода “баланс трендовости и утилитарности”. Дизайн должен помогать. Для референсов смотрели на схожие площадки. При этом, важно не засмотреться: нужно трезво оценивать релевантность использования тех или иных решений в контексте этапа развития продукта. Необязательно делать все прямо сейчас — иначе проект рискует стать бесконечным.
Масштабирование — адаптируем для всех сценариев
Основные решаемые задачи:
- масштабирование сценариев, включающее в себя проработку edge cases, ошибок, состояний компонентов и экранов;
- ресайзы для мобильных браузеров — аналитика показала, что знакомство с платформой и поиск работы чаще выполняется с мобильных устройств.
- подготовка макетов к передаче в разработку;
- проработка UI kit для дальнейшего масштабирования и развития платформы;
- поддержка разработки.
Выводы
Наш подход можно назвать осознанным и ответственным проектированием. Осознанным — потому что мы отталкиваемся от целей и задач бизнеса в контексте эффективного решения задач пользователей. Ответственный — потому что мы учитываем нюансы разработки, текущую реализацию логики и доступные изменения, подготавливаем макеты и UI kit для передачи в верстку, осуществляем поддержку разработки. Мы думаем не только категориями “проекта”, но и о том, как упростить дальнейшее развитие продукта.
Команде LaborX важно было снизить порог входа в мир крипты, мы постарались сделать это через простой и понятный интерфейс. И я считаю, что у нас получилось. А вы?)
P.S. Говоря о крипте — недавно показывали наш Embacy Coin, а из-за упавшего эфира теперь не хотим его продавать. Но ведь у крипты все будет хорошо, да ведь?
Забавно по цветовой схеме и тематике я сейчас делаю точно такой же проект.
Когда зашел на dribbble взять немного референсов
Арт из 2015... харе уже
я чот не понял, а исследования на пользователях проводились вообще?
Какой же ебейший контрастный цвет. Вы рофлите шоль? Я только от просмотра картинок слезы утер...
Хороший дизайн для биржи. Порог входа и правда снижен до предела. Кто ни разу не работал с криптой, но работал на бирже сразу поймет как и что устроено.
Кто бы что не говорил, но палитра четкая. Люблю сочетание розового и желтого. Cразу напомнило ваш проект Slash.
Но пока смотрел нашел один минус в UX - это бюджет заказа. Зачем этот слайдер с неточными цифрами((( их же никто не любит за неудобность. Можно было сделать просто окно для ввода.
Даже если слайдер обязателен(например для мобильной версии), то можно было сделать вот так:
1. Я чуть-чуть подшаманил
2. Как есть
как всегда стильно и чистенько.