Часто заказчики приходят с такой проблемой: есть отличная идея, а иногда уже и проект, но нет понимания, как он должен выглядеть.
И каким бы любимым не был заказчик, такие проекты — это всегда боль, потому как за неделю нужно изучить бизнес, провести исследование, создать айдентику, логотип, выкатить дизайн-концепцию, оформить мерч, спроектировать космический корабль и слетать на Луну. Кто-то отказывается от подобного, потому что, естественно, на такие проекты уходит очень много сил и времени.
Но мы совершенно не боимся браться за проекты, которые нужно оформить с нуля, потому что помимо свободы действий у нас появляется возможность внести бОльший вклад в проект заказчика.
Дальше расскажем вам, как работать с такими проектами и не запороть всё сделать дизайн, который работает.
Этап 1. Знакомство
В августе к нам поступил запрос о разработке сайта «Парки России» — команда из Ижевска запустила проект федерального уровня, с целью развития и создания парков, общественных пространств и внутреннего туризма по всей стране.
Клиент пришёл к нам по рекомендации, но был достаточно строг в требованиях, очень ограничен во времени для общения с командой Деловой культуры и с «горящими» сроками реализации сайта. На встрече мы попросили его рассказать о проекте, его истории, стратегии развития, его месте на рынке, целевой аудитории, предполагаемом использовании, перечислить основных конкурентов, и так далее. Со своей стороны представили свои работы, рассказали о компетенциях и процессе работы над проектом.
Мы всегда стараемся встретиться с клиентом, увидеть его лицо. Не так важно, будет это оффлайн встреча или zoom-колл, главное на этом этапе выстроить коммуникацию и свою эмпатию. Это относится к новым клиентам, и к тем, кто пришел по знакомству или рекомендации. Так мы повышаем степень доверия, снимаем большинство вопросов и опасений и показываем свою экспертность.
Итак, встреча прошла, но рисовать макеты ещё рано, следующие действия – обдумать, что говорил клиент, дать себе время прочувствовать его позицию, и перейти к следующему этапу.
Этап 2. Бэнчмаркинг
Проекты с нуля требуют особого внимания. На этом этапе мы собираем как можно больше информации для исследований, анализируем лучших игроков на рынке, конкурентов, определяем стейкхолдеров и прикидываем пользовательские сценарии. На этом этапе нам помогают методы персон, CJM, JTBD. В случае с «Парками России» мы выбрали последний метод: JTBD, потому что нам было критически важно определить, для чего пользователи будут заходить на сайт и чего хотят добиться, а не как они преодолевают трудности на аналогичных сайтах.
После проработки JTBD мы составили окончательный вариант архитектуры сайта, проработали возможные сценарии и перешли к структуре страниц.
Этап 3. Прототипы
На основе архитектуры сайта, сценариев и анализа игроков рынка мы разработали прототип каждой страницы и связали их в сценарии, чтобы показать клиенту логику и ход мыслей пользователя.
Прототипы мы всегда делаем максимально простыми, не используем цвет и изображения, чтобы в процессе согласования клиента ничего не отвлекало от структуры и расположения элементов на макете.
После согласования (на этом этапе мы обошлись без правок) у клиента появилось понимание того, что он хочет получить от сайта, и зачем ему это нужно. Чтобы избежать лишних изменений и сэкономить время, решено было оформить чёткое ТЗ и зафиксировать уже согласованные этапы.
Этап 4. Дизайн-концепция
В работе с «Парками России» нам дали полную свободу, однако, чтобы определиться, какой будет дизайн, мы решили опираться на задачи, которые нужно решить, и tone of voice, которые задает лидер проекта.
Задачи, которые нам нужно было решить:
- отразить дух компании и его УТП;
- отразить сферу и сегмент бизнеса;
- создать визуал, соответствующий общим тенденциям, без быстрого устаревания из-за частой смены трендов;
- отразить в стилистике ассоциацию с крупными инвестиционными проектами и госсектором.
Tone of voice будущего сайта:
«Лаконичность», «чёткость», «свежесть». В эти прилагательные нужно было органично вписать показ инвестиционных проектов, продажу мест на обучение, имидж. Это мы и учитывали при разработке нового концепта, который должен был отражать сферу, масштаб бизнеса и дух компании.
Подготовка и поиск решений
Бизнес клиента довольно специфичен: с одной стороны, нужно показать сферу деятельности и крупные инвестиционные проекты, с другой – дизайн не должен быть похож на сайты финансово-технического сектора.
Поэтому мы решили провести ещё одно интервью с лидером компании, чтобы глубже изучить его видение. В ходе этого интервью мы уже глубинно спрашивали именно о проекте «Парки России», каким он должен быть, какие чувства и эмоции вызывать, просили описать со всех сторон.
На основе ответов сделали следующие выводы:
- для клиента важно показать масштаб всего бизнеса — он является лидером рынка, идущий всегда на шаг впереди конкурентов;
- компания ведет активный стиль жизни. Она – динамичная, развивающаяся, современная – про людей, общение, комфорт и стабильность;
- компания гордится глубокой экспертизой – знанием и умением на любом месте поставить и развить современное и эффективное общественное пространство.
Эти тезисы стали опорными точками в нашей дизайн концепции.
UX/UI аудит
Далее мы проанализировали с точки зрения визуальных решений сайты конкурентов в сфере туризма и инвестиций и выделили следующие точки роста: многие не уделяют должного внимания визуальному оформлению — сайты давно не обновлялись, неочевидная графика или её отсутствие, на главных экранах многих сайтов неподходящие изображения, что сбивает с толку и подталкивает к мысли, что это сайты туроператоров.
Также отсутствует адаптивная верстка, не соблюдаются правила внешнего-внутреннего, мало воздуха, очевидны проблемы с типографикой.
В разделе «О компании» сплошной текст, который сложно читать.
В каталоге нет актуальной функциональности, которая сегодня используется для упрощения юзабилити (например: упорядоченные списки, фильтрация по категориям, сортировка по важным качествам – цена, новинки, популярное).
Дизайн выглядит шумно и не актуально.
Гипотеза
Такие компании, как правило, на рынке уже давно. У них есть постоянный портфель клиентов, поэтому необходимость в редизайне отсутствует.
Нашему же клиенту было важно с помощью сайта масштабировать бизнес, повысить узнаваемость и увеличить продажи. Поэтому нашу концепцию редизайна мы основывали на составляющих качественного UX/UI сайта:
- Удобная навигация, структура меню;
- проработанная дизайн-система;
- понятная Главная страница, раскрывающая деятельность бизнеса и его преимущества перед конкурентами;
- понятная структура каталога с продуманными сортировкой и фильтрацией;
- карточки проектов с точным описанием характеристик.
Поиск референсов
Мы не ограничились бизнесом заказчика на этапе проработки концепта, поэтому смотрели на сайты и кейсы совершенно разных сфер. Такой подход помогает определить текущие тенденции дизайна и выявить лучшие решения для их адаптации в собственном проекте.
Создание дизайн-концепта
Важный фактор в организации работы над этим проектом — ограниченность по срокам. Разработать и защитить концепт мы должны были за 4 дня. Поэтому мы устроили 15-минутный брэйнштурминг, по результатам выбрали лучшие идеи и начали рисовать.
3 кита хорошего UI дизайна
Композиция, типографика, цвет.
Проработали четкую структуру – разделы и блоки расположили по важности для пользователя. Благодаря этому на сайте легко ориентироваться. Добавили много воздуха, предусмотрели правильную расстановку визуальных акцентов – лого гармонично сочетается с другими элементами – кнопками и графическими элементами. Отказались от всех ненужных элементов, чтобы посетителей сайта ничего не отвлекало от прохождения по задуманным нами сценариям. Выбрали чёткий, яркий и крупный шрифт без засечек для облегчения считываемости. Использовали цветовую гамму, которая напоминает о природе, но не перетягивает акцент на себя, а аккуратно дополняет контент.
Первый экран
Мы подобрали качественные и яркие изображения для главного экрана и вписали в окружающую среду слоган компании и основные направления её деятельности, таким образом мы отразили главную идею проекта: любые действия по созданию общественных пространств не затрагивают природу, а экологично вписываются в нее, соблюдая баланс между комфортом посетителей и сохранностью природных объектов.
Инвестиционные проекты
В следующем блоке можно подробнее ознакомиться с карточками инвестиционных проектов. Важно было привлечь внимание к изучению этого блока, сделать считывание информации легким. Явная проблема подобных блоков – разная стилистика изображений, обилие информации, ненужные фильтры. Поэтому мы решили применить к нему всем знакомый плашечный формат, чтобы не напрягать пользователей, и сократить количество фильтров, оставив только самые необходимые.
Личный бренд
Для того, чтобы подчеркнуть имидж компании и её лидера, мы создали отдельную страницу в более смелой цветовой гамме, структурировали текст и УТП, наполнили изображениями, которые ассоциируются с современным и ярким руководителем.
Новости
Заказчик попросил разместить новостной блок на Главной. Поддержали стилистику предыдущих блоков со строгой вёрсткой и свежими цветами.
Жизнь проекта после дизайна
Мы утвердили концепцию, получили контент, сделали полноценный дизайн. Казалось, что остаётся только сверстать.
Но на проекте Парки России нам нужно было проделать путь от покупки домена до настройки seo и email-рассылки.
Этот проект запал нам в душу, хотелось помочь клиенту с решением всех проблем, поэтому мы взяли на себя всю ответственность, и из всех возможных технических настроек неотработанным осталось только подключение платежной системы, так как на сайте не предусмотрены платежи.
Приятным завершением этого проекта была презентация на форуме «IX инфраструктурный конгресс. Российская неделя ГЧП 2022» и высокая конверсия.
Результаты
Мы старались сделать простой и понятный дизайн-концепт, который несет бизнес-ценность, а интерфейс создает верное впечатление о деятельности компании, глубокой экспертизе и уровне статуса на рынке.
Вот такой кейс у нас получился. Если хотите, чтобы мы сделали для вас качественный дизайн-концепт, оставляйте заявку на office@businessculture.ru.