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

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

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

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

Старый сайт:

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

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

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

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

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

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

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

Избранное

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

Контакты

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

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

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

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

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

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

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

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

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

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

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

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