Привет! Мы команда THE12.STUDIO и в наших компетенциях дизайн, разработка и поддержка диджитал-проектов от сильной команды для серьёзных брендов. Делаем имиджевые проекты и сложные сайты, продумываем логику, создаём сильные и глубокие бренды. Недавно мы создали интернет-магазин для бренда НЬЮ и было бы нечестно не поделиться с вами всеми процессами, функциональными и визуальными решениями, ну и конечно рассказать о результатах разработки.
Заказчик и продукция
Бренд New Wallet основали в 2013 году братья Алексей и Михаил Леонтьевы. За время существования компания стала одним из лидеров на маркетплейсах в категории «кошельки» и превратилась в бренд НЬЮ, предлагая больше товаров и возможностей.
Ребята производят аксессуары из перерабатываемого материала Tyvek. Материал напоминает бумагу — выглядит, мнётся и ощущается так же, оставаясь при этом лёгким и тонким. К привычным свойствам бумаги добавляются прочность, водонепроницаемость и долговечность.
На сегодняшний день ассортимент продукции состоит из кошельков, мини-кошельков, обложек на паспорт и несессеров.
Задача проекта
Бренд НЬЮ закрепился на маркетплейсах и ему стал необходим имиджевый рост. Поэтому компания обратилась к нам с запросом разработать интернет-магазин, который станет не только площадкой для продажи, но и будет погружать пользователя в историю бренда, подробно рассказывать о яркой продукции и коллаборациях.
Заказчик хотел на новом сайте сделать упор на развитие имиджа бренда, раскрыть его со всех сторон и продемонстрировать современный подход к созданию аксессуаров.
При этом интернет-магазин должен иметь полную функциональность и удобство использования.
Также необходимо было подробно рассказать о материале Tyvek, его свойствах и преимуществах.
Этапы работ
Мы стараемся работать последовательно и не перепрыгивать на соседние этапы, пока не завершим и не утвердим текущий. В этом проекте так и получилось.
Какие этапы провели:
- Собрали всю информацию от собственника бизнеса и команды, проанализировали текущую ЦА, предложили варианты дальнейшего развития, апсейла текущей ЦА и разработали план привлечения новой. Изучили и вывели положительные и отрицательные комментарии на всех площадках, где представлен бренд. Выявили закономерности и вопросы, котороые вызывают сомнения у ЦА. Всё это для того, чтобы в дальнейшем в проекте подсветить положительные аспекты и сделать их ещё более яркими, а боли и сомнения закрыть уже готовыми ответами.
- Провели анализ конкурентов и вместе к клиентом проработали положительные и отрицательные стороны. Разработали несколько уместных решений на основе всего анализа.
- Подготовили список вопросов для интервью с собственниками. Провели интервью в формате видеозвонка. Итогом данного этапа всегда является готовый документ со всеми исходными и проанализированными данными, готовыми метафорами, рекомандациями и проработанной структурой.
- Далее ушли на разработка прототипа.
- Разработали визуальную концепцию с доработкой метафор.
- Создание 3D-моделей.
- Вёрстка, разработка, интеграции, запуск, тестирования.
Первый этап
В ходе интервью мы сразу считали, что ребята очень большие фанаты своего дела, они живут идеей создания крутых, уникальных, удивительных и необычных аксессуаров. И этот энтузиазм не теряется на протяжении уже 11 лет. Они постоянно в поиске идей и инфоповодов для развития своей медийности. Так например, они часто коллаборируются с разными компаниями и инфлюенсарами.
В какой-то момент ребята поняли, что не хотят ограничиваться определенными кошельками, а больше хотят погрузить покупателя в истоки бренда и технологичность материала, дать понять, что за каждым принтом стоит целая история и идея.
Уже на первом этапе, у нас было достаточно идей, креативных мыслей, метафор и понимание как всё это упаковать, не забыв при этом про простоту и удобство.
Визуальная концепция
Мы погрузились в тонкости производства продукции и самого материла из которого она делается.
Нам прислали несколько образцов, однако, получилось так, что одному из наших дизайнеров из Владивостока образца не досталось. Ждать повторной доставки было уже долго, поэтому проявив упорство и находчивость, он взял дома обычный А4 лист бумаги, распечатал принт и сложил уменьшенную копию кошелька, чтобы поближе узнать принцип складывания продукции.
Клиент изначально не планировал ограничиваться только кошельками. На момент нашего знакомства были реализованы дополнительные позиции, что и стало катализатором для ребрендинга в "НЬЮ".
Чтобы поддержать стремление к инновациям, мы решили подробно рассказать о ключевых свойствах смарт-материала Tyvek, который привлекает молодую и современную аудиторию. Мы также не забыли об экологичности материала, что важно для многих покупателей.
Для текущей, постоянной аудитории, которая ценит продукцию за оригинальные принты и долговечность, сделали акцент на том, что вся продукция производится в Санкт-Петербурге. Это добавляет эмоциональный подтекст: каждый открывает этот город по-своему. Мы также рассказали о коллаборациях с известными иллюстраторами, дизайнерами и корпорациями.
И отдельно объяснили, почему New Wallet теперь стал "НЬЮ". Ребрендинг стал логичным шагом, отражающим развитие бренда и расширение ассортимента продукции.
Мы давно выросли и отошли от одних кошельков. Наш ассортимент будет продолжать расширяться и хочется видеть масштабируемую историю.
Метафоры и идеи приходили в процессе разработки и вот некоторые из них:
- Горизонтальные, вертикальные и диагональные линии передают идею оригами, а комбинация этих линий показывает большую вариативность складывания.
- Минималистичные иконки в виде сложенного листа бумаги дополняют концепцию оригами и разбавляют визуально контент.
- Яркий акцентный цвет должен отражать сочные и выразительные принты, которые Нью наносят на свою продукцию.
- Бежево-коричневый цвет передает неочищенный и первозданный вид бумаги, что позволяет отсылать пользователя к истокам создания не только бумаги, но и самого бренда НЬЮ.
- Демонстрация свойств материала с помощью 3D анимации.
Мы презентовали 2 варианта визуальной концепции, в которых 3D были в одном варианте, а другие идеи показаны в другом. Так мы предложили более простой путь с использованием фото и более замороченный с 3D.
Заказчику больше понравился темный концепт со всеми вышеперечисленными метафорами, но в нем он также хотел видеть эффектные 3D. Поэтому мы совместили два варианта и подготовили итоговую концепцию.
В рамках выбранного варианта были разработаны все страницы. Заказчик их принял практически без правок и мы перешли на следующий этап.
Ниже в статье пройдемся по основным моментам дизайна.
Главная страница
Главную можно разделить на 2 смысловых раздела: интернет-магазин и презентация бренда.
Сразу при знакомстве пользователя с сайтом должно складываться ощущение, что это удобный, логичный и понятный интернет-магазин, с категориями товара, а далее мы рассказываем о продукции, свойствах материала, коллаборациях, возможностях trade-in и отзывах.
Мы хотим донести до пользователя, что мы берем чистый, целый холст, который по сути является произведением искусства и сжимаем его до размера кошелька.
Зацепившись за идею целой картины в кошельке, мы сделали блок как на экране появляется большое изображение принта, а при скролле оно уменьшается до размеров продукции. После этого выезжают другие кошельки, как бы показывая пользователю, что таких в магазине много и каждый является чьим-то воплощением творчества.
Далее идет блок с демонстрацией свойств материала. При наведении на вкладку проигрывается анимация свойства. Ниже мы посвятили целую главу статьи, рассказывая о созданных 3D для данного проекта.
Уделили немалое внимание коллаборациям, которыми компания очень гордится. Среди партнеров можно увидеть дизайнера Покрас Лампаса, Лабораторию Касперского, рок-группу Louna, Музей уличного искусства и других.
Навигация и поиск по каталогу
Хоть это имиджевый интернет-магазин, он все же интернет-магазин и должен отвечать всем требованиям удобства и функциональности. Поэтому большое внимание уделили навигации по каталогу. В меню можно выбрать нужную категорию товара или коллекцию. А в поиске легко найти нужный товар.
В каталоге все эти принципы поиска товара сохраняются.
Страница товара имеет всё необходимое для покупателя: описание, характеристики, гарантии и информацию о доставке.
В целом, мы воспользовались устоявшимися паттернами, чтобы пользователям с первых секунд было комфортно находиться и ориентироваться по сайту. Таким образом, выбор товара и процесс его покупки проходят по знакомому для всех сценарию.
Имиджевые страницы
На данных страницах необходимо было глубоко погрузить пользователя в мир Нью, поэтому мы решили прибегнуть к применению современных нестандартных способов повествования и решений, связанных с анимацией и интерактивностью.
Всего было создано 4 имиджевыых страницы:
- О бренде
- О продукции
- Для оптовых покупателей
- Мерч
Страница «О бренде»
На главном экране пользователя встречает вращающийся логотип, которые проносится над контентом и уезжает под блок с рассказом об основателях компании, как бы намекая, что Нью является частью их души, а их философия отражается в самом бренде.
Наложение преимуществ друг на друга продолжает захватывать и заставлять дальше изучать сайт.
Для рассказа истории бренда сделали интерактивный слайдер, в котором пользователь может погрузиться и узнать о ее долгом пути развития в то, что сейчас имеется.
Благодаря данному слайдеру, мы не заставляем пользователя листать лонгрид, а лишь подталкиваем его продолжать взаимодействовать с сайтом.
Страница «О продукции»
На данной странице пользователь еще больше погружается в суть продукции. В начале нас встречает обычная текстовая страница, но при скролле нам сразу дают понять, что продукции у компании много, она вся яркая и разнообразная.
Часто у покупателей возникает логичный вопрос: «Как кошелек из бумаги может прослужить долго, не порваться, не промокнуть во время эксплуатации?». Именно поэтому мы постарались очень подробно и наглядно, рассказать о материале Tyvek.
Большие и динамичные анимированные 3D-модели дают понять, что компания сильно заморачивается над своим продуктом и о покупателях, стараясь все четко донести и продемонстрировать.
Чем еще сильно гордятся ребята из НЬЮ, так это своими принтами. Их много, они уникальные и интересные.
56 дизайнеров со всего мира работали над созданием уникальных принтов для НЬЮ, привнося свои креативные идеи и вдохновение в каждую коллекцию. Мы хотим чтобы каждый смог найти среди наших продуктов не только функциональность, но и способ самовыражения.
Поэтому много пролетающих картинок на фоне заголовка точно дают понять, что обязательно можно подобрать себе тот товар, что подходит по духу и стилю.
Страницы «Опт» и «Мерч»
На данных страницах мы переиспользовали эффектные решения, которые встречаются на других страницах, но их комбинация и добавление уникальных блоков не дают пользователю чувства шаблонности.
Информационные внутренние страницы
Покупателям, конечно же требуется информация о доставке, гарантиях и качестве. Во многих блоках можно встретить одни и те же элементы, которые повторяются на большинстве страниц. Поэтому мы разработали UI-kit и систему компонентов, которые позволили без труда масштабировать проект.
Анимированные 3D-модели материала Tyvek
Как мы написали выше, данный этап проходил параллельно с версткой. Перед нами стояла непростая задача повторить текстуру материала и его физические свойства.
На главный экран мы сделали изогнутый лист тайвека, который плавно колышется и задает некоторую динамику, чтобы можно было оценить текстуру и толщину материала.
Демонстрация свойств материала должна больше погрузить пользователя, закрыть все вопросы и неуверенность в качестве и надежности товаров.
Необходимо было показать следующие свойства:
- Легкость
- Гибкость
- Прочность
- Тонкость
- Водонепроницаемость
- Экологичность
- Долговечность
Здесь мы прибегли не только к прямым ассоциациям, но и воплотили несколько метафор, которые достаточно тонко передают суть свойства.
Лёгкость
Показать как лист развивается на ветру, чем не демонстрация легкости?
Гибкость
Достаточно просто его свернуть в рулон. Довольно прямая ассоциация, но она визуально выглядит уникально на фоне других свойств, поэтому считаем данную демонстрацию оправданной.
Прочность
Повесили карабины, пытаемся растянуть и порвать материал, но тщетно. На идею с растягиванием с помощью крюков или карабинов нас навела фотография, которую когда-то сделали ребята.
Тонкость
Переворачиваем лист и смотрим на его толщину
Водонепроницаемость
Изначально пробовали пустить дождь на лист Тайвека, но капли выглядели мелко и неестественно, напоминая снег. Да и в целом, получалось не так наглядно. А вот пустить большую, акцентную каплю, которая преломляется пока скатывается с листа, на наш взгляд, вполне удачная идея для демонстрации свойства водонепроницаемости.
Экологичность
Самая динамичная и живая 3D анимация в данном проекте. Думаю, ни у кого не возникает вопросов к эконологичности зеленого и натурального газона. Вроде в лоб показываем растущую траву и цветы, но в то же время проводим тонкую ассоциацию с безопасностью материала для окружающей среды.
Долговечность
Как показать данное свойство? Как донести до пользователя, что материал может служить годами? За несколько лет эксплуатации продукта, он обретает лишь небольшие потертости и в случае, если он залежится, то мы просто сдуем с него осевшую пыль и продолжим пользоваться дальше без каких-либо проблем.
Итог
В первый же день работы сайта пользователи оформили 6 заказов, а сам дизайн является полным воплощением мировоззрения и философии создателей бренда НЬЮ.
Сегодня. Новый сайт — это не просто платформа, а виртуальный холст нашего бренда.
Для нас сайт newwallet.ru — гордость, в которую мы вложили душу, кучу времени, сил и нервов. Была проделана колоссальная работа и сейчас, оглядываясь назад, видим, что приложенные усилия оправдываются.
Оценить сайт можно по ссылке: newwallet.ru
Также мы выложили кейс на Dprofile, где тоже подробно показали визуальные решения и рассказали о них.
Ещё мы активно ведём студийный Телеграм-канал, где стараемся всё чаще делиться не только кейсами, но и всей внутрянкой.
