Кейс RICE | Миша Крутман

кейс

RICE

Сдача в аренду полностью оборудованных офисов в Дубае

начало.

Компания: RICE.
Основная деятельность: сдача в аренду полностью оборудованных офисов.
Клиенты: B2B (команды, стартапы, компании).

Фаундеры написали, что запускают новый проект. И для этого проекта нужен сайт.

Провели Зум. Выяснили основные вводные.

На текущем этапе важно понять:

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

Основатели компании не первый год в этом бизнесе, поэтому смогли чётко и развернуто ответить на все вопросы.

А еще - показали проект будущих офисов. Эстетический кайф.

ИТОГИ ПЕРВОГО ЗУМА

Сайт должен презентовать компанию и продукт.

Продукт: полностью оборудованные ко въезду офисы в Дубае с высоким уровнем сервиса.

Основные особенности:

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

«Похоже на отель. Только не для людей, а для компаний»

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

И эта особенность должна быть отражена в сайте — как в контенте, так и в визуале.

задача

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

Фаундеры принимают финальное решение о том, что мы работаем.

Договариваемся о дате старта и окончания разработки.
Фиксируем договоренности.

Переходим к этапу препродакшена.

ЭТАПЫ РАБОТЫ

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

Разработка данного проекта разработка будет состоять из 17 этапов.

Разработка структуры сайта

Какие страницы, какие смысловые экраны на этих страницах, как они будут соединяться между собой
Исследование

Изучение сайтов компаний-конкурентов и из смежных ниш, подготовка референсов
Подготовка контента для главной страницы

Тексты и медиаматериалы на основе ранее согласованной структуры
Разработка прототипа на основе этого контента

Чтобы понять, всё ли на своих местах и при необходимости внести изменения в контент
Разработка дизайна первых 3 экранов главной страницы

Чтобы согласовать стиль главной страницы и визуальный язык сайта
Разработка дизайна главной страницы

В редакторе Figma
Согласование дизайна главной страницы
Подготовка контента для внутренних страниц
Разработка дизайна внутренней страницы
Согласование дизайна внутренней страницы
Создание дизайна остальных страниц в Figma и их согласование
Верстка дизайна в Тильде и добавление анимаций
Оптимизация под мобильные и остальные виды экранов
Тестирование и устранение багов
Просмотр сайта заказчиком и внесение финальных изменений
Финальные настройки сайта

Привязка домена, базовые SEO-настройки, создание фавиконки, настройка отображения для соцсетей и другие оставшиеся задачи
Проведение зума с заказчиком

Обучение сотрудников использованию сайта, ответы на вопросы по функциональности

О ВАРИАНТАХ РАЗРАБОТКИ НА ТИЛЬДЕ

Есть 2 варианта разработки сайтов на Тильде: на стандартных готовых блоках из библиотеки или на кастомных зеро-блоках.

Сайт будет создаваться на уникальных кастомных зеро-блоках Тильды.
Почему выбрано такое решение?

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

препродакшн.

Начинаю с исследования продукта.

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

Целевая аудитория сайта

Финальное решение об аренде принимают менеджеры и руководители. Но сайтом пользуются в основном брокеры, которые пересылают сайт выше по цепочке. Брокеров в Дубае - несколько десятков человек. И цель - чтобы брокерам было удобно пользоваться сайтом. Чтобы там была актуальная информация об особенностях продукта, метраже офисов, расположении и т.п.

Сейчас эта задача закрывается отправкой презентации.

Структуре сайта

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

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

старт.

РЕФЕРЕНСЫ

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

Изучаю референсы, которые прислал клиент, а также сайты из схожих ниш (архитектура, недвижимость), чтобы выделить, какие визуальные приёмы характерны для таких сайтов.

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

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

ГЛАВНАЯ СТРАНИЦА:
НАЧАЛО

Начинаю разработку с текстового прототипа в Фигме.

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

В процессе этого этапа рождаются интересные идеи, как можно дополнительно связать экраны - например, какими-то вспомогательными заголовками.

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

Исследование продукта
Изучение сайтов конкурентов
Подготовка структуры сайта
Разработка контента для главной страницы
Создание мудборда
Разработка прототипа

Можно было начать разработку сразу, но вероятность того, что результат не устроил бы клиента и не выполнял своих бизнес-задач, крайне высока.

Задача на данном этапе: отрисовать первые 3-4 экрана, показать их заказчику, чтобы понять, в том ли направлении движемся и внести коррективы.

главная страница:
Первые экраны

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

Исходя из этой логики, планируем разместить там следующую информацию:

Заголовок
Serviced Offices. Simple. Perfect.

Подзаголовок
Make a home for your team with your own private office.
Ready to move-in, fully serviced, with everything included.

Фото (в будущем планируется видео)
Крупное фото, которое задаст настроение и даст больше контекста, о каких именно офисах идет речь.

Кнопки
«Скачать презентацию» и «Связаться».

Ориентируюсь на такое понимание хорошего первого экрана в данном проекте:

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

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

Какой?

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

Пробую первые варианты:

Экспериментирую с разным вариантом расположения элементов, разными стилями. Но не могу найти то, что нравится.

Как только нащупываю что-то подходящее по стилю для первого экрана, пробую соединить его со вторым:

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

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

Точка в центре обозначает клиента, а стрелочки и окружность, в которую всё это вписано, — его взаимодействие с продуктом.

Можно было бы использовать обычные иконки, но уникальная айдентика, которая нигде ранее не встречалась посетителю — это всегда плюс для восприятия.

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

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

Презентую клиенту 3 варианта первых экранов.

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

Клиент выбирает 3-й вариант.
Проводим зум. Собираю обратную связь для следующей итерации.

Двигаемся дальше.

главная страница:
финал

Задача этого этапа: довести до ума выбранный клиентом вариант и доделать макет главной страницы.

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

Приходим к такому виду главной страницы

Здесь уже видны отличительные особенности сайта, которые задают визуальный стиль и делают его по-настоящему интересным:

Цифры в разделенном по диагонали квадрате - ассоциация со схемой помещения.

Окружности между как дополнительный элемент, придающий элегантность и «породу»

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

Темно-синий акцентный градиент — ассоциация с бархатом из хорошего интерьера. Прямиком с мудборда, который составлялся ранее.

Крупные двухцветные заголовки со смещением

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

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

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

РЕЗУЛЬТАТ ЭТАПА:
согласованный дизайн главной страницы

продолжение.

РАЗРАБОТКА ВНУТРЕННЕЙ СТРАНИЦЫ

К моменту окончания работы над главной страницей, у нас уже есть визуальный язык сайта:

Шрифты
Типографика
Отступы
Элементы айдентики

Например, все отступы между блоками, заголовками и подзаголовками прописаны и одинаковы на всех страницах:

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

Он должен содержать:

Название локации
Карта с расположением локации
Главные преимущества локации
Фото
Цифры: количество офисов и рабочих мест

Создаю прототип, чтобы понять, как расположить эти элементы:

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

Соединив его с уже имеющимися элементами стиля и много раз попреставляв все элементы, получился вот такой макет страницы локации:

Что тут интересного:

На втором экране показываем более подробную информацию о локации.Плюс (что важно) демонстрируем вид из окна.

Затем идёт галерея и 3D-экскурсия по офису — чтобы своими глазами можно было увидеть локацию изнутри.

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

Проводим зум с клиентом, обсуждаем правки.

Страница локации получилась такая, какая и должна быть: красивая, понятная и информативная. Фактически это полноценная презентация в формате веб-страницы, где есть вся информация о локации, включая её ключевые особенности, фотографии, 3D-экскурсию и схемы офисов.

РЕЗУЛЬТАТ ЭТАПА:
согласованный дизайн страницы локации

вёрстка.

Перенос дизайна в Тильду

Все, что создавалось на прошлых этапах, происходило в Фигме — графическом редакторе. Клиент видел сайт только в виде изображений.

Теперь нужно перенести все это непосредственно в Тильду.

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

МОБИЛЬНЫЕ ВЕРСИИ

В процессе вёрстки также идет адаптация под разные размеры экранов: планшеты, мобильные.

Уместить большое количество элементов, которые заложены в этих макетах, сохранив при этом заложенные идеи и читаемость — задача не всегда простая.

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

После всё это неоднократно тестируется на разных размерах экранов и на разных устройствах, чтобы убедиться, что всё работает корректно.

РЕЗУЛЬТАТ ЭТАПА:
сайт можно открыть в браузере на любом устройстве

финал.

До этого этапа сайт находится на техническом домене.

Сайт привязывается к домену
Настраивается SSL-сертификат и необходимые переадресации
Прописываются базовые SEO-настройки и H1-заголовки для каждой страницы
Загружается бейдж для соцсетей и фавиконка

И много других мелочей.

А затем еще раз перепроверяется, все ли настроено корректно, тестируется на разных устройствах и исправляются найденные ошибки.

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

Провожу обучение для клиента — как управлять сайтом.

РЕЗУЛЬТАТ ЭТАПА:
полностью работающий и протестированный сайт с внесенными финальными правками;
обученная команда со стороны заказчика, умеющая самостоятельно вносить изменения в сайт.

заключение.

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

Сайт попадает в подборку лучших сайтов Тильды

результат.

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

4

раздела сайта разработано
6

зум-встреч проведено на этапе подготовки и реализации проекта
5

недель активной разработки

Обсудить проект

mikhail.krutman@gmail.com

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

СВЯЗАТЬСЯ

поработаем?

телеграм

политика конфиденциальности

сайт создал krutman