Расширяли гайды Skysmart и искали детей моделей — как мы делали магазин мерча. История в мемах

Привет! На связи Pragmatica, и в июне 2021 к нам обратилась онлайн-школа для детей и подростков Skysmart с задачей запустить интернет-магазин мерча.

Команда Pragmatica расскажет о работе над проектом: как за два месяца прошли путь от концепции до работающего интернет-магазина и сделали для Skysmart не только сайт, но и контент к нему.

Бренд Skysmart живой, яркий, содержит нестандартные приемы. Мы начали думать, как в этих условиях можно выгодно подсветить товары. Посмотрели референсы — нашли сайт мерча от Netflix с тематическими фонами для каждой коллекции. И у нас родилась идея перенести визуальный стиль Skyeng на фотографии товаров.

Мы сохранили айдентику Skysmart: взяли для фото фирменные цвета, формы и шрифты. При этом сайт оставили нейтральным и усилили типографику.

Ответ Skysmart был жесток, но справедлив:

Мы были уверены в идее, поэтому ушли делать фотосессию. Об этом подробнее расскажет Лера — она руководила проектом.

Первую фотосессию мы провели из подручных материалов: взяли из офиса поп-ит, плюшевую собаку и другие вещи, которые по стилю и цветам напоминали мерч Skysmart.

На съемки позвали Лешу Пьянкова, арт-директора Pragmatica, его родного брата, менеджерку проектов Кристину Черноскутову и модель.

Параллельно дизайнеры начали рисовать и анимировать макеты. Как только фото были готовы, мы объединили нашу идею, пробную фотосессию, макеты и пошли показывать это команде Skysmart.

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

Мы проанализировали варианты, как оптимально реализовать сайт в плане верстки, бэкенда, работы с контентом и поддержкой. От Webflow отказались, так как у них не поддерживается оплата из России, хотя это более профессиональный и гибкий инструмент. Остановились на Tilda.

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

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

При передаче заказчику, чтобы упростить работу сайта с новыми скриптами, Никита (наш разработчик) переписал весь код практически с нуля.

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

Параллельно с версткой основного каталога мы продолжили работать над дизайном. Сделали отдельные страницы под разные коллекции и категории товаров и рассказали о доставке.

Мы проработали карточку товара, следуя правилу мерч-first — сохраняя акцент на товаре.

Создали систему баннеров, которые можно использовать, как обложки под новые коллекции мерча и подборки.

Важно было не потерять в качестве на этапе продакшена. Чтобы отловить все возможные баги, мы провели тестирование. Параллельно с работой в Екатеринбурге, Илья с Лерой отправились в Москву на съемки контента для сайта.

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

К тому же ресурсы маркетинга клиента были перегружены. Мы со Skysmart действовали, как одна команда, и быстро подхватили эту задачу.

Мой опыт работы в event пригодился в организации фотосессии. Я собрала подробную смету, и также стала мини-кастинг-агентом. Снимать решили в студии Skyeng в Москве: заказали свет, позвали фотографа и стилиста.

Самое интересное — это было работать с моделями для съемок. Skysmart обучает детей, поэтому мы искали моделей от 7-ми до 15-ти лет. Найти их оказалось непросто — среди моих друзей не так много людей с детьми.

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

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

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

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

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

И... бесценный отзыв заказчика о работе:

Подписывайтесь на телеграм-канал Senior designer — обучаемся и обсуждаем рост цифрового дизайнера, критикуем рынок, рассказываем о Pragmatica. Дизайнерам от дизайнеров.