Портфолио/кейсы

Нажмите для просмотра

Интернет-магазин Корпоративный сайт
Посмотреть сайт можно ЗДЕСЬ

Создание и сайта компании и интернет магазина одновременно

Техническое задание от#nbsp;заказчика
  1. сделать новый сайт
  2. отразить на#nbsp;сайте все действующие и#nbsp;запланированные направления деятельности компании
  3. сделать рабочий ИМ
  4. чтобы сайт был удобен в#nbsp;использовании
Изучал старый сайт, выводы:
  • морально устарел
  • неактуальная информация
  • доступ утерян
  • не#nbsp;для мобильных устройств
  • без интернет магазина

Исследование:
  • история компании внушительна, с#nbsp;1996 года
  • качественный чай по#nbsp;адекватной, но#nbsp;далеко не#nbsp;самой низкой цене на#nbsp;рынке, на#nbsp;«Валберис» чай с#nbsp;подобным названием продаётся за#nbsp;копейки
  • наличие физического магазина на#nbsp;одном месте 20 лет
  • интерьер магазина аутентичный с#nbsp;неповторимой атмосферой
  • наличие атмосферной комнаты для чайных церемоний
  • наличие большого числа хороших отзывов на Яндекс картах
  • наличие оригинальных снимков, из#nbsp;Китая, чайных плантаций, чайных деревьев и#nbsp;работников

Я дополнил проект своими целями:
  1. показать преемственность нового сайта

Совершить продажу компании и#nbsp;довольно высокой цены на#nbsp;чай и#nbsp;утварь, через повышение доверия

  1. отразить на#nbsp;сайте дух магазина и#nbsp;чайной комнаты
  2. показать глубокую погруженность в#nbsp;чайную культуру
  3. сделать акцент на#nbsp;длительной истории компании и#nbsp;существовании магазина с#nbsp;20 летней историей
  4. повысить лояльность клиентов с#nbsp;первого взгляда на#nbsp;чай
  5. сделать сайт узнаваемым в#nbsp;любом месте
  6. создать интуитивно понятную навигацию по#nbsp;всему дереву сайта
  7. сделать сайт приятным с#nbsp;мягким скролом
  8. помочь покупателю сделать правильный выбор
Исследование конкурентов
есть такой способ исследования,—

«Дизайн бесит»

предложенный Томом Питерсом
Для этого позволяем себе проявлять эмоции относительно дизайна, а#nbsp;не#nbsp;дизайнера, таким образом выявляя слабые и#nbsp;сильные стороны сайтов. Т.#nbsp;е. таким образом повышаем свою чувствительность. Можно делать скриншоты и#nbsp;тут#nbsp;же на#nbsp;них размашисто запечатлевать свои эмоции.
Составляю ментальную карту, со#nbsp;всеми разделами сайта и#nbsp;их#nbsp;структурой/связями
На этом этапе легко увидеть и устранить неточности!
Создаю кликабельный прототип
Это позволяет увидеть объём контента, и#nbsp;проверить логику взаимодействия на#nbsp;деле
Встраиваю фотографии в#nbsp;элементы дизайна сайта
Первым экраном делаю слайдер используя оригинальные снимки
сразу понятно#nbsp;— длительное присутствие на#nbsp;рынке,
традиционная китайская рамка меню#nbsp;— о#nbsp;культуре
Далее некоторые моменты на#nbsp;первой странице:
  • предложение компании,— выделенные товары
  • также традиционный орнамент на товарах
  • знакомим с#nbsp;категориями, даём возможность быстрого перехода, для этого использую карточки
  • посмотрите глазами других, и#nbsp;вы#nbsp;получите те#nbsp;же#nbsp;впечатления,#nbsp;— блок с#nbsp;отзывами
  • продаём компетентность компаниями, использую оригинальные сведения о#nbsp;чае и#nbsp;чайном деле
  • оригинальные фотографии внушают уважение
  • этим блоком отвечаем на#nbsp;вопрос «Почему китайский чай?»
  • следующий блок показывает возможность закрыть потребность покупателя#nbsp;— готовым решением
  • очень удобно организован оригинальный футер#nbsp;— можно перейти в#nbsp;любой из#nbsp;основных разделов сайта, структура видна и#nbsp;наглядна
Продолжим путешествие на#nbsp;других страницах сайта:
  • страница магазина: показываем уникальную атмосферу магазина
  • галерея с#nbsp;кратким сопровождением
  • слайдер с отзывами усиливает впечатление
  • дополняем контактами и картой, не заставляя пользователя совершать дополнительные переходы
Страница чайной:
  • собрана подобно странице магазина
  • дополняем нужной информацией и#nbsp;тоже картой и#nbsp;схемой, это важно, таким образом пользователь согласившись посетить чайную, не#nbsp;будет вынужден переходить на#nbsp;страницу контактов

Цели для создания карточки товара:
  • Сделать карточку предельно понятной для ЦА
  • Сформировать правильный образ товара
  • Дать почувствовать принадлежность к#nbsp;чайной традиции
  • Отразить дух компании (глубина погруженности в#nbsp;традицию)
  • Помочь покупателю принять верное решение
Так выглядят карточки товаров на#nbsp;сайте
При наведении на#nbsp;карточку изображение меняется
Здесь, в#nbsp;средней карточке, мы#nbsp;увеличиваем лист,#nbsp;— детализируем ценный чай
Здесь опять показываем конечный продукт
Заглянем внутрь одной из#nbsp;карточек
Яркий пример#nbsp;— туго свернутая чайная почка
Внутренность с#nbsp;описанием и#nbsp;галереей
Показываем поведение листа при заваривании
Вот так чайная почка открывается в#nbsp;настое
Окружение отражает чайную традицию и#nbsp;историю «Ча И»
Вид разваренного листа многое сообщит любителю
И ещё детальнее
Любое фото можно дополнительно увеличить

СПАСИБО ЗА ПРОСМОТР!

Посмотреть сайт можно ЗДЕСЬ