Меняете позиционирование? Новый кейс Random Coffee

Мы в REB8T делаем цифровые продукты, геймифицируем сервисы и превращаем обучение в увлекательные симуляции. Делимся кейсами с метриками, процессами и визуалом, а ещё практическими гайдами — от ChatGPT-анимации и mini app до Tilda/Shopify. Здесь только то, что можно применить завтра — честно, по делу и с любовью к деталям.

редизайнtildarandom coffee

Мы провели редизайн сайта Random Coffee в связи с вступлением в SCC и изменениями в брендбуке, ребятам хотелось красиво заявить о сотрудничестве и о масштабности планов на развитие продукта!

Проблемы*️⃣

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

Задачи 📎

  • Отразить смену приоритетов в продуктовой линейке. Теперь B2B выходит на один уровень с B2С, а специальные продукты для сообществ стремительно развиваются
  • Придумать решение, которое бы «освежило» стиль Random Coffee, но при этом чтобы пользователи продолжали узнавать бренд и на обновленном сайте

Ограничения🔵

Одно из немаловажных испытаний, которые мы проходим на каждом подобном проекте, — это верстка на Tilda. У Random Coffee давно настроены все оплаты именно на ней, поэтому и верстка нового сайта осталась тут

Как всегда, мы выжали из Tilda максимум, можете сами увидеть! За это спасибо нашим дизайнерам, и разработчику Насте!

Что сделали

  1. Выделили 3 главных направления и расставили приоритеты на продукты внутри каждого из направлений
  2. Создали обновленную структуру сайта, в которой оставили 4 основных страницы с понятной навигацией, вместо 13 на старом сайте
  3. Построили дизайн на основе «разряженного бенто» — добавили в плотную сетку воздух, отступы, а еще яркие цвета и графику из обновленного гайдбука. А для ощущения живого комьюнити — фотографии и видео с людьми
  4. Сохранили узнаваемый тон бренда. Оставили фирменный синий и добавили цветовое кодирование для каждого продукта. Еще непростой задачей стало расположение большого количества информации, мы решили это, частично заменив ее видео, раздробив на блоки и спрятав в FAQ

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

Фанфэкт 🤖

Мы записывали видео на сайт совместно командами REB8T и Random Coffee, маркетинг-лид Полина и наш диджитал-продюсер Тоня не были знакомы, но видели друг друга на финальном видео, и тут они пересеклись в Сербии в одном кафе, как раз за просмотром финальной верстки. Вот такой действительно random coffee случился в жизни

Вот они, слева направо 💙:

  • Сергей Борцов - дизайн-директор
  • Олеся Колыванова - арт-директор
  • Марина Быкова - ведущий UX/UI-дизайнер
  • Вера Ксенофонтова - UX/UI-дизайнер
  • Настя Артамонова - разработчик на Tilda
  • Аня Пачганова - digital продюсер

И, конечно, команда RC 💙:

  • Екатерина Солдатова - руководитель проекта
  • Полина Клёнова-Ленская - маркетинг лид
  • Кристина Манелова - арт-директор и иллюстратор
  • Вероника Покровская - копирайтер

Посмотреть сайт: https://random-coffee.ru/

#designmagic #byreboot

Обложка кейса: макет главной страницы Random Coffee с крупным синим блоком и фирменной яркой графикой на тёмном фоне
Главная страница редизайна с фирменной графикой и акцентным синим блоком.
Слайды с карточками и объяснениями: интерфейсные карточки Random Coffee на светлом фоне с жёлтыми и фиолетовыми акцентами
Карточки преимуществ и целевых аудиторий в обновлённой системе визуала.
Мобильные и десктоп-макеты: блоки продукта Random Coffee, карточки, кнопки и визуальные акценты из нового гайдбука
Примеры адаптивных экранов и блоков продукта на мобильных и десктоп‑макетах.
Скриншот видео на сайте: сотрудница с собакой в кадре как пример живых материалов для ощущения комьюнити на странице
Кадр из видео, снятого командами REB8T и Random Coffee для сайта.
Коллаж мобильных экранов и карточек функций Random Coffee — цветовое кодирование продуктов и структурированные информационные блоки
Коллаж экранов с цветовым кодированием и структурой продукта.
Десктоп-макет раздела форматов продукта Random Coffee: карточки подписки, мероприятия и визуальные элементы обновлённого гайдбука
Десктоп‑версия раздела «Форматы продукта» с карточками и пояснениями.
Портреты членов команды в круглых кадрах: фото двух участниц съёмки и элементы фирменной графики вокруг для живого ощущения комьюнити
Фотокат сцены с участниками съёмки и фирменными элементами дизайна.

Дискуссия

Думаю о ваших проектах
❤️❤️❤️
Antonia Ganicheva
последняя карточка кайф
Психотерапевт Павел Серенко
Внимание держит… задача решена на 5
Anna Kharitonova
вот это с пылу с жару просто! кейс — супер!
Присоединиться к обсуждению →

Читайте так же