Светящийся сайт для Fosfor
Квест с интеграциями из-за санкций и крутые эффекты для интернет-магазина светящихся футболок
Светящийся сайт для Fosfor
Квест с интеграциями из-за санкций и крутые эффекты для интернет-магазина светящихся футболок
Fosfor — компания, которая производит классные футболки. Они светятся в темноте и ультрафиолете, их хотят дети и взрослые, их можно сколько угодно стирать и носить дальше — сияние не померкнет. Бренд появился в Крыму (который наш) и теперь собственники хотят масштабироваться — а для этого отлично подходит создание функционального интернет-магазина: клиенты множатся, география расширяется.
Задача
Создать стильный и запоминающийся интернет-магазин, готовый к продвижению в интернете для расширения географии бренда.
Глеб
Дизайнер
Тёмная цветовая схема понравилась клиенту ещё на мудборде, а для акцентного цвета мы отталкивались от свойств самого товара: его свечение как раз в оттенках зелёного. Я перебирал цвета в палитре, пока не нашёл идеальный.
Нейминг и логотип
Изначально заказчик ставил перед нами ещё одну задачу — разработать нейминг и логотип. Поскольку компания находится в Крыму, аудитория там специфическая, и возрастные представители постсоветского пространства ассоциировали нейм «Фосфор» исключительно с химией.
Антон
Руководитель проекта
На брейншторме мы с командой подбирали подходящие названия, но в итоге пришли к выводу, что «Фосфор» идеально подходит бренду: в нем и визуальные ассоциации, и УТП. А если учесть, что заказчик выходит на российский рынок и теперь не будет зависеть от курортного сезона и вкусов отдыхающих, аудитория будет чуточку другой, и ненужных ассоциаций не возникнет.
В основе логотипа — светящаяся бесконечность Во-первых, так мы показываем специфику товара. А во-вторых — работаем с возражениями ЦА. Есть стереотип, что такие футболки перестают светиться уже после первой стирки. Но футболки Fosfor не теряют своих уникальных свойств и будут как новенькие, даже если вы постираете их N-ное количество раз.
Светящиеся эффекты и микро-анимации
На аналитике мы изучили конкурентов — помимо откровенно устаревших сайтов, у них есть другая частая проблема: в каталоге совсем не видно, как именно светятся футболки (хотя это самая главная фича).
Мы решили, что сайт Fosfor должен отражать крутость товара на все 200%: поэтому добавили множество эффектов и микровзаимодействий, которые усиливают симпатию к бренду и разжигают желание купить товар. При загрузке сайта в первый раз сначала появляются светящиеся принты в промоблоке, а затем — всё остальное. При переключении слайдов в промо — глитч-эффект, где всё мерцает и светится.
Евгений
Разработчик
Что я придумал для реализации эффекта при смене слайдов: при переключении полностью дублируется слайд (вместе с фото, кнопками и текстом), и на него накладываются фильтры, которые двигаются, мигают, затем уходят в белое свечение, и следом дублированный слайд удаляется. И всё это — в один миг.
Промоблок можно редактировать: менять количество людей и их расположение, просто задавая их координаты в админ-панели.
Глеб
Дизайнер
Изначально была идея найти готовое изображение группы людей в черных майках — таких же крутых, как на обложках реперских альбомов. Пришлось попотеть с вырезанием людей и подгонкой цветов.
В блоке с преимуществами — большая 3D-футболка, которая по ховеру тоже светится. Для её реализации мы подготовили 400 png-картинок: 200 для обычной и 200 для светящейся.
Глеб
Дизайнер
Найти адекватную 3D-модель тоже оказалось непросто, но мне повезло. Я добавил ей текстуру, из которой получилось сделать два стейта: футболку в обычном состоянии и светящуюся. Зацикленную анимацию отрендерили на основе этой модели.
Антон
Руководитель проекта
На сайте много крутых микроанимаций: прикольные попапы, крестики, свечение кнопок и элементов по наведению.
Светящийся каталог
Вернемся к сайтам конкурентов: помимо того, что те редко показывают свечение, так ещё и почти у всех — мелкие фото товара, на которых непонятно, как футболка будет выглядеть вживую. У Fosfor — для каждого товара крупное фото, которое по наведению светится. И конечно, есть кнопка покупки в 1 клик (если майка так сильно запала в душу, что нет сил терпеть!).
Информативная детальная страница товара
На этапе агрегации мы выяснили ключевые опасения потенциальных покупателей: сложности с размерным рядом («как понять, что футболка мне подойдет?») и сложности в уходе за изделием («можно ли стирать и как гладить?»). Часто такие футболки покупаются в подарок — поэтому многим хотелось бы товар сразу классно упаковать.
Всё это мы учли на детальной странице товара: здесь есть инструмент для легкого подбора размера, информация об уходе и варианты подарочной упаковки, которые легко добавить в корзину.
Всё это мы учли на детальной странице товара: здесь есть инструмент для легкого подбора размера, информация об уходе и варианты подарочной упаковки, которые легко добавить в корзину.
Интеграции
При разработке технического задания мы прописали интеграции с тремя сервисами: «Яндекс. Кассой», «Яндекс. Доставкой» и «АТОЛ». Но во время второго спринта нас ждал сюрприз.
Антон
Руководитель проекта
Поскольку компания находится в Крыму, «Яндекс. Касса» и «АТОЛ» отказали нам в интеграции — из-за санкций у них жёсткие рамки: начнут работать в Крыму, и автоматически не смогут работать за пределами России. «Яндекс. Доставка» тоже отказала, поскольку для работы с ней нужно, чтобы склад находился вблизи Москвы или Санкт-Петербурга. Нам пришлось срочно искать альтернативы: что-то предлагал клиент, и мы проверяли, что-то предлагали мы сами. В итоге подобрали такие варианты, которые не превысили бюджет.
Мощные посадочные страницы
Ещё один блок возражений целевой аудитории — недоверие: к технологии («не вредна ли краска на футболках?»), к самой компании («кто такие и откуда?»), к изделиям («качество, стойкость краски?»). Всё это мы подробно расписали на яркой и нетиповой странице о бренде.
Оптовые покупатели — одна из желанных аудиторий заказчика, до которой важно донести преимущества работы с компанией Fosfor.
Антон
Руководитель проекта
На этапе дизайна мы созванивались с заказчиком и обсуждали: какими будут блоки, каким будет визуал и как грамотно донести преимущества до потенциальных оптовых клиентов. В итоге страница — полноценный лендинг: помимо формы обратной связи у неё даже своя навигация справа есть.
Итеративная разработка
На этом проект не заканчивается — в планах большой второй этап.
Антон
Руководитель проекта
Сайт продолжает развиваться и наращивать обороты! У нас уже есть смета, и мы вот-вот приступим к реализации функционала для оптовиков: отдельного каталога и прочих оптовых «вкусностей». Клиент уже готовит контент — для этого он заказал профессиональную фотосессию.
Готовый проект
