Дизайн и верстка
интернет-магазина
контактных линз
Adria

Задача

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

31,4%
Общее количество покупок
выросло на
93%
Средний доход визита
увеличился на
40,8%
Общий доход
увеличился на
49%
Доля посетителей, купивших
товар, выросла на
с 3.77 до 4.7 сек
увеличилась глубина просмотра
на 40 сек
выросло среднее время на сайте
4 месяца
время разработки проекта
В разработку вошли этапы аналитики, проектирования, дизайна, верстки

Разработка
сайта

Аналитика

В результате анализа данных Яндекс.Метрики и Google Analytics

Мы выявили основные
запросы пользователей
сайта
Определили популярность
отдельных разделов,
страниц и товаров
Проанализировали
источники трафика
и образы персон
Обнаружили сильные
и слабые стороны
имеющегося сайта
69%
трафик, поступающий
со смартфона

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

69% трафика поступало со смартфонов, поэтому
мы предложили клиенту использовать метод
Mobile First, начав с разработки легковесного сайта
с удобным интерфейсом, оптимизированным для мобильных устройств.

Moodboard

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

Благодаря этому, ux/ui - проектировщик еще
перед стартом работ понимал, как примерно
будут выглядеть создаваемые им прототипы
в итоге, после этапа дизайна. Это позволило
специалисту проектировать, сводя на нет
возможные конфликты между прототипом
и дизайн-макетами.

Результаты этапа

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

Проектирование

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

Механизм
подбора цветных
линз

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

0

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

Дизайн

Databased —
основан на данных систем
аналитики
Mobile First —
акцент на удобство
для смартфонов
Сontent based —
практичность
и реалистичность

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

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

Адаптивная
версия

месяца
работы
разрешения
экрана
макета страниц
будущего сайта

Верстка

Еще на этапе дизайна мы заложили базу
для быстрой и качественной верстки —
использование сетки bootstrap позволяет
оптимизировать разработку кода
для адаптивных сайтов.

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

Bootstrap
страниц сверстано
с адаптивом

Над проектом работали

Дедученко Ксения менеджер проекта

Андрей Никонов менеджер проекта
со стороны клиента

Антон Филин проектировщик

Антон Ларинарт-директор

Ксения Беловадизайнер

Максим Подавалкиндизайнер

Александр Захаровруководитель отдела front-end разработки

Елизавета Овиноваfront-end разработчик