За кулисами UX/UI процессов команды Турум-бурум

Ломать — не строить.

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

На плохом фундаменте крепкого здания не возвести.

Создание дизайна сайта с нуля также не должно быть построено только на догадках. Потому что даже на этапе MVP следует закладывать прочный фундамент «юзабилити» с учетом специфики вашего бизнеса и целевой аудитории. Поэтому и здесь нужна эффективная стратегия.

Но как должна выглядеть эта стратегия и как убедиться, что команда дизайнеров действительно знает что делает? Чтобы ответить на ваши вопросы и внести ясность, ведущие эксперты Турум-бурум рассказывают о нашей стратегии редизайна сайта, подробно описывая каждый из этапов процессов создания UX и UI дизайна.

Процесс создания UX дизайна

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

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

1. Пользовательский опыт. Качественный дизайн сайта должен учитывать реальный опыт пользователей, а значит — быть простым в использовании, информативным и интерактивным.
2. Построение доверительных отношений с клиентами. Сайт должен поощрять пользователей возвращаться к вашему бренду и совершать повторные заказы.
3. Решение бизнес-задач. Помимо удовлетворения потребностей пользователей, дизайн сайта должен способствовать достижению бизнес-целей владельца.

Этап №1: Этап исследования

Традиционно наша работа начинается с этапа изучения кейса. Для этого мы проводим интервью с:

• Стейкхолдерами;
• Клиентами;
• Менеджерами (продавцами в офлайн-магазинах, отделами продаж и т.д.).

Если команда создает дизайн не с нуля, мы настраиваем инструменты аналитики, чтобы получить ценные инсайты и сэкономить время. Поэтому мы отслеживаем:

• Воронки продаж Google Analytics и поведение пользователей;
• GTM-события;
• Тепловые карты и записи сессий – дополнительный инструмент, позволяющий реально измерить и проанализировать поведение пользователей и собрать количественные и качественные данные.

По результатам первого этапа получаем:

• Потребности и ожидания бизнеса, клиентов и технические требования;
• Список конкурентов;
• Аналитические отчеты (количественные и качественные данные);
• Карту поведения пользователей;
• JTBD («работа к исполнению») и сценарии пользователей (подробное взаимодействие пользователя с продуктом или услугой для достижения определенной цели), чтобы окончательно понять, какие цели должен удовлетворять продукт.

В результате у нас есть много информации для дальнейшей обработки и анализа: скриншоты, данные из Google Analytics и тепловых карт, пути различных представителей ЦА на разных устройствах и т.д. 

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

Этап №2: Этап UX-меппинга

Собрав все требования и ожидания по продукту, переходим к следующему шагу — разработке UX карты. 

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

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

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

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

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

Этап №3: Этап прототипирования

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

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

После создания прототипов низкой точности мы переходим к созданию высокоточных и детальных прототипов.

Работая над крупными проектами, наша команда может разработать более 200 детально продуманных прототипов различных блоков и страниц. Это позволяет нам спроектировать поведение пользователей на разных этапах взаимодействия с платформой, упростить последующие этапы разработки, а также протестировать пути пользователя на прототипах. Такой подход позволяет оценить удобство использования сайта, обеспечить интуитивно понятный дизайн и снизить затраты, решая проблемы UX еще на ранних этапах работы над проектом. 

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

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

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

Процесс создания UI дизайна

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

Этап №1. Передача материалов и брифинг по проекту 

После завершения работы над UX дизайном, все полученные данные передаются UI команде Турум-бурум: исследования, выводы, инсайты, артефакты и прототипы с объяснением всех путей пользователя и особенностей бизнеса. Это помогает UI-команде быстрее погрузиться в материалы проекта, характеристики, тенденции ниши и другую релевантную информацию, чтобы понять потребности ЦА, цели проекта и требования клиента.

Этап №2. Интервью и инсайты

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

Мы задаем вопросы, которые могут помочь выбрать оптимальную стилистику будущего продукта. Спрашиваем о настроении, эмоциях, брендбуке, логотипе, текущем сайте (если таковой есть) и задачах, которые нам нужно решить на данном этапе. Если есть сайт, спрашиваем владельцев, что нравится и не нравится в текущем дизайне. Кроме этого, просим их описать, каким они видят будущий сайт, используя метафоры. Так владельцы могут передать желаемое настроение продукта — должен ли он быть сдержанным и профессиональным, или же, возможно, легким и непринужденным?

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

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

Этап №3. Мудборды

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

Этап №4. Разработка концепции и дизайна страниц

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

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

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

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

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

Блог и личный кабинет мы делаем не только информативными, но и конверсионными: 

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

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

Этап №5. Анимация

В зависимости от проекта и выбранных решений, мы можем заложить и разработать CSS-анимацию, чтобы сайт был более интерактивным и интересным. Можем создать анимированные прототипы, чтобы наглядно продемонстрировать отдельные взаимодействия пользователей с интерфейсом, которые сложно объяснить словами. Сюда входят плавные переходы между страницами, привлекательная анимация при скроллинге страницы, pop-up элементы, раскрывающееся меню и тому подобное.

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

Этап №6. UI гайд

На этом этапе создаем подробный UI guide, охватывающий все основные аспекты дизайна: от цветов, шрифтов и межстрочных интервалов, отступов до взаимодействия с информацией на основе сценариев поведения пользователей, интерактивные/pop-up элементы, нажатия кнопок, переходы и прочее.

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

Этап №7. Авторский надзор за выполнением

После того как завершены все этапы создания и утверждения дизайна, передаем проект команде разработчиков. Поскольку мы отвечаем за конечный вид дизайн проекта, нам важно, чтобы все UX/UI решения и идеи были правильно имплементированы. Именно поэтому мы проводим авторский надзор за выполнением работ на всех этапах разработки: взаимодействуем с командой разработчиков и даем фидбек в случае обнаружения ошибок, чтобы достичь поставленных целей проекта.

Заключение

За каждым UX/UI дизайном стоит кропотливая и комплексная командная работа, которая, на первый взгляд, часто незаметна заказчику. Цель Турум-бурум — создать не просто сайт с учетом современных трендов, а бизнес-инструмент, который соответствует целям компании и обеспечивает исключительный уровень сервиса для ее клиентов. Мы верим, что продуманный до мелочей сайт может стать мощным активом для любого бизнеса, и стремимся помочь вам в достижении самых смелых бизнес-целей и задач. Посмотреть на результаты нашей работы можно в портфолио, а если у вас появились вопросы по UX/UI дизайну, то мы с удовольствием обсудим их с вами.

‍