Дизайн Net Lab
1 043

Кейс: капитальный ремонт UX и дизайн сайта «Черника Оптика»

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

В закладки

Кто наш заказчик:

Сеть салонов оптики "Черника Оптика" - это известные брендовые очки со всего мира по доступным ценам, в том числе, на модели для зрения, оправы и линзы.

Задачи:

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

Старый сайт:

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

Основные требования заказчика и наша реализация:

Структура сайта:

Разработанную в Sketch структуру сайта, выгрузили в Invision и отправили клиенту чтобы он мог “побродить” по сайту.

Главная страница

Заказчик: “Должна знакомить посетителя с основными предложениями компании, преимуществами, разделами товаров, основными товарами, новостями, фотогалереей, партнерами, а также оставить свои данные для связи.”

Дизайн разрабатывался с учетом современных тенденций и пожеланий заказчика. Responsive для последующей адаптации для мобильных устройств.

Каталог товаров

Заказчик: “Должен показывать посетителям ассортимент товаров”

Позволяет ознакомиться со всем ассортиментом товаров, воспользоваться системой фильтров, поиском и функцией добавления товара в корзину.

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

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

Избранное

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

На карточке товара есть кнопка «удалить» для удаления товара из избранного.

Страница товара

Заказчик: “Должна знакомить пользователя с подробным описанием товара и позволяет добавлять его в корзину”

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

Мобильные версии:

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

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

Онлайн подборщик линз

Сотрудники “Черника-Оптика” прислали нам материал для конфигуратора подбора линз от онлайн-биометристов, , мы ориентировались на него при разработке подборщика линз.

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

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

Также этот функционал работает на всех устройствах.

Корзина

Заказчик:В ней должна быть возможность отредактировать выбранные товары: изменить количество, свойство, или удалить товар из корзины.”

При нажатии на кнопку «Добавить в корзину», товар отправляется в корзину, наименование кнопки добавления изменяется на «В корзине». При повторном нажатии на кнопку, осуществляется переход в корзину.

Контакты

Заказчик: “Должен знакомить посетителей с местоположением компании, а также воспользоваться формой обратной связи.”

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

На сайте работает функция геотаргентинга:

Геотаргетинг по IP

Отображение информации зависит от региона просмотра. В настройках административной части сайта есть возможность настройки справочника городов. Для каждого города задан список IP адресов с привязкой к данному городу.

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

При первом посещении сайта, появляется окно с подтверждением региона с возможностью его изменения. Далее пользователю предоставляется возможность изменить регион в процессе пользования веб-сайтом.

К справочнику городов привязана База Данных Справочника Цен. Смена региона доступна на каждой странице в шапке сайта.

Оформление заказа

После того как корзина сформирована, посетитель сайта переходит в процессу оформления заказа, нажав на кнопку «Оформить заказ»

Процесс оформления заказа состоит из нескольких этапов:

  • Заполнение информации о покупателе:
  • Выбор варианта доставки:
  • Выбор типы оплаты

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Net Lab", "author_type": "self", "tags": [], "comments": 9, "likes": 11, "favorites": 33, "is_advertisement": false, "subsite_label": "design", "id": 51900, "is_wide": false, "is_ugc": true, "date": "Tue, 27 Nov 2018 16:08:45 +0300" }
{ "id": 51900, "author_id": 215305, "diff_limit": 1000, "urls": {"diff":"\/comments\/51900\/get","add":"\/comments\/51900\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/51900"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

9 комментариев 9 комм.

Популярные

По порядку

Написать комментарий...
1

сейчас любую доработку принято называть громким слово "КЕЙС"? Домен тоже вы поменяли с кириллицы на латиницу?... Так заUXили сайт, что он из поиска выпал.

Ответить
0

Доработку? Сайт вообще новый)))
А вы что под кейсом понимаете?
Для нас кейс — это описание проделанной работы с информацией о задаче. В нем присутствуют разные материалы (документы, видео/фото, схемы и чертежи, показатели и др.), обсуждения задач кейса, задействованные бизнес-процессы, люди, которые участвовали в ходе решения задачи.

Ответить
0

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

Читаю: Задача – «Создание обновленного интернет-магазина с учетом современных требований к дизайну, и поведенческих факторов для облегчения процесса заказа»
Ну то есть результатом должно было послужить увеличения количество закзаов через сайт/увеличение конверсии – правильно? Читаем…
Результат - "Мы сделали...... тем самым решив проблему заказчика с ......привлечением посетителей в офлайн точки"
….

Ответить
0

"Результат - "Мы сделали...... тем самым решив проблему заказчика с ......привлечением посетителей в офлайн точки" ", акцентируем - в том числе, привлечение в офлайн точки. Сайт был не адаптивный, у него показатель отказов был огромный, он не соответствовал современному ни по дизайну, ни по функционалу.
Статьи и контент были перенесены со старого сайта на новый как раз чтобы показатели не падали)
В чем у вас вопрос?)

Ответить
0

Кроме того, если вы обратите внимание, особенность бизнес модели данной сети в том, что цель ресурса (в регионах где есть точки продаж с кабинетами оптометриста) привлечь туда клиента. То есть как таковой доставки нет и продажа осуществляется самовывозом

Ответить
0

Спасибо, Кэп.

99% инфы можно заменить на "Заказчик: запилите нам магазин как у всех. Чтобы главная, каталог, корзина и вот это вот всё. И на телефоне чтоб листать".

Ок. Давайте хоть над фильтром подумаем для приличия.

В чем польза для читателей?

Ответить
1

Внизу и указали, что тут ноу-хау никаких нет. А касательно пользы, смотря кто наш читатель)
Показали на своем опыте, что простой дизайн - не значит плохой

Ответить

0

А уж "апельсин" в фавиконке для черники...это финиш.

Ответить
0

Фавик на согласовании, поменять 5 минут)
Что-то еще?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }