Разработка имиджевого интернет-магазина аксессуаров из смарт-материала Tyvek

Привет! Мы команда THE12.STUDIO и в наших компетенциях дизайн, разработка и поддержка диджитал-проектов от сильной команды для серьёзных брендов. Делаем имиджевые проекты и сложные сайты, продумываем логику, создаём сильные и глубокие бренды. Недавно мы создали интернет-магазин для бренда НЬЮ и было бы нечестно не поделиться с вами всеми процессами, функциональными и визуальными решениями, ну и конечно рассказать о результатах разработки.

Бренд New Wallet основали в 2013 году братья Алексей и Михаил Леонтьевы. За время существования компания стала одним из лидеров на маркетплейсах в категории «кошельки» и превратилась в бренд НЬЮ, предлагая больше товаров и возможностей.

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

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

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

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

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

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

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

Какие этапы провели:

В ходе интервью мы сразу считали, что ребята очень большие фанаты своего дела, они живут идеей создания крутых, уникальных, удивительных и необычных аксессуаров. И этот энтузиазм не теряется на протяжении уже 11 лет. Они постоянно в поиске идей и инфоповодов для развития своей медийности. Так например, они часто коллаборируются с разными компаниями и инфлюенсарами.

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

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

Мы погрузились в тонкости производства продукции и самого материла из которого она делается.

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

Клиент изначально не планировал ограничиваться только кошельками. На момент нашего знакомства были реализованы дополнительные позиции, что и стало катализатором для ребрендинга в "НЬЮ".

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

Для текущей, постоянной аудитории, которая ценит продукцию за оригинальные принты и долговечность, сделали акцент на том, что вся продукция производится в Санкт-Петербурге. Это добавляет эмоциональный подтекст: каждый открывает этот город по-своему. Мы также рассказали о коллаборациях с известными иллюстраторами, дизайнерами и корпорациями.

И отдельно объяснили, почему New Wallet теперь стал "НЬЮ". Ребрендинг стал логичным шагом, отражающим развитие бренда и расширение ассортимента продукции.

Метафоры и идеи приходили в процессе разработки и вот некоторые из них:

Мы презентовали 2 варианта визуальной концепции, в которых 3D были в одном варианте, а другие идеи показаны в другом. Так мы предложили более простой путь с использованием фото и более замороченный с 3D.

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

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

Ниже в статье пройдемся по основным моментам дизайна.

Главную можно разделить на 2 смысловых раздела: интернет-магазин и презентация бренда.

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

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

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

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

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

В каталоге все эти принципы поиска товара сохраняются.

Страница товара имеет всё необходимое для покупателя: описание, характеристики, гарантии и информацию о доставке.

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

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

Всего было создано 4 имиджевыых страницы:

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

Наложение преимуществ друг на друга продолжает захватывать и заставлять дальше изучать сайт.

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

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

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

Часто у покупателей возникает логичный вопрос: «Как кошелек из бумаги может прослужить долго, не порваться, не промокнуть во время эксплуатации?». Именно поэтому мы постарались очень подробно и наглядно, рассказать о материале Tyvek.

Большие и динамичные анимированные 3D-модели дают понять, что компания сильно заморачивается над своим продуктом и о покупателях, стараясь все четко донести и продемонстрировать.

Чем еще сильно гордятся ребята из НЬЮ, так это своими принтами. Их много, они уникальные и интересные.

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

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

Покупателям, конечно же требуется информация о доставке, гарантиях и качестве. Во многих блоках можно встретить одни и те же элементы, которые повторяются на большинстве страниц. Поэтому мы разработали UI-kit и систему компонентов, которые позволили без труда масштабировать проект.

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

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

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

Необходимо было показать следующие свойства:

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

Показать как лист развивается на ветру, чем не демонстрация легкости?

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

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

Переворачиваем лист и смотрим на его толщину

Изначально пробовали пустить дождь на лист Тайвека, но капли выглядели мелко и неестественно, напоминая снег. Да и в целом, получалось не так наглядно. А вот пустить большую, акцентную каплю, которая преломляется пока скатывается с листа, на наш взгляд, вполне удачная идея для демонстрации свойства водонепроницаемости.

Самая динамичная и живая 3D анимация в данном проекте. Думаю, ни у кого не возникает вопросов к эконологичности зеленого и натурального газона. Вроде в лоб показываем растущую траву и цветы, но в то же время проводим тонкую ассоциацию с безопасностью материала для окружающей среды.

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

В первый же день работы сайта пользователи оформили 6 заказов, а сам дизайн является полным воплощением мировоззрения и философии создателей бренда НЬЮ.

Для нас сайт newwallet.ru — гордость, в которую мы вложили душу, кучу времени, сил и нервов. Была проделана колоссальная работа и сейчас, оглядываясь назад, видим, что приложенные усилия оправдываются.

Оценить сайт можно по ссылке: newwallet.ru

Также мы выложили кейс на Dprofile, где тоже подробно показали визуальные решения и рассказали о них.

Ещё мы активно ведём студийный Телеграм-канал, где стараемся всё чаще делиться не только кейсами, но и всей внутрянкой.