Дизайн и верстка
интернет-магазина
контактных линз
Adria
Создать сайт с насыщенным визуальным рядом, простой и удобной системой покупки и гибким интерфейсом для подбора линз.
выросло на
увеличился на
увеличился на
товар, выросла на
Разработка
сайта
Аналитика
В результате анализа данных Яндекс.Метрики и Google Analytics
запросы пользователей
сайта
отдельных разделов,
страниц и товаров
источники трафика
и образы персон
и слабые стороны
имеющегося сайта
со смартфона
Изучение в социальных сетях групп, посвященным
контактным линзам, приблизило нас к
пониманию аудитории ресурса. Мы узнали, что важно пользователям при покупке, какие
сомнения
и сложности чаще всего бывают при приобретении
и подборе линз.
69% трафика поступало со смартфонов, поэтому
мы предложили клиенту использовать
метод
Mobile First, начав с разработки легковесного сайта
с удобным
интерфейсом, оптимизированным для мобильных устройств.
Moodboard
Перед стартом этапа проектирования, дизайнер
создал общий
стилистический гайд, где отразил
ключевые элементы и стилистику будущего
продукта.
Благодаря этому, ux/ui - проектировщик еще
перед стартом работ понимал, как примерно
будут выглядеть создаваемые им прототипы
в итоге, после этапа дизайна. Это
позволило
специалисту проектировать, сводя на нет
возможные конфликты между
прототипом
и дизайн-макетами.
Результаты этапа
Основной продукт компании — это широкая
линейка цветных контактных
линз. Чтобы
подчеркнуть оригинальность образов, которые
можно создавать с их
помощью, решено было
использовать концепцию «продажи через образ» —
все цветные
линзы будут представлены на сайте
не фотографиями товара или глаз в линзах,
а
фотографиями ярких образов моделей
в цветных линзах.
Проектирование
Мы рассмотрели целевые группы посетителей
ресурса и сформировали
на их основании
портреты персонажей. Систематизируя данные,
полученные на этом
и предыдущем этапе
разработки, мы сформировали оптимальную
структуру сайта,
позволяющую пользователю
с комфортом предаваться онлайн-шоппингу,
знакомиться
с ассортиментом, читать новости
в блоге или подбирать линзы.
Механизм
подбора цветных
линз
Есть разные типы цветных линз: как слегка
усиливающие цвет глаз,
так и кардинально
меняющие — для каждого типа логика шагов
при подборе будет
отличаться. Мы продумали
логику, которая учитывает все возможные
сценарии при
подборе разных типов линз,
и зафиксировали её в виде схемы.
интерактивных
прототипов страниц
и схема подбора цветных линз
Дизайн
основан на данных систем
аналитики
акцент на удобство
для смартфонов
практичность
и реалистичность
В дизайн-концепции мы воплотили обозначенные
пожелания и предпочтения: обилие фото в
товарах,
минимализм, использование фирменных цветов
компании. Когда идеи
оказались воплощенными
в виде готового макета, клиент смог точнее
вербализировать свои пожелания, что стало
причиной для создания второй версии
дизайн-концепции.
Для неё мы взяли лучшее от первого варианта,
включая общую стилистику, и сделали
чуть более
«практичной», добавив более ясную навигацию
и отказавшись от других
визуально сложных
элементов, которые могли вызвать трудности
у пользователей.
Адаптивная
версия
работы
экрана
будущего сайта
Верстка
Еще на этапе дизайна мы заложили базу
для быстрой и качественной верстки —
использование сетки bootstrap позволяет
оптимизировать разработку кода
для
адаптивных сайтов.
Верстка прошла без лишних затрат
времени и ресурсов, а сайт одинаково удобно
и
приятно использовать с любого устройства,
будь то монитор с разрешением 1900px
или
смартфон.
с адаптивом
