Редизайн и адаптив сайта Polair-Shop

Анализ ЦА

При анализе мы первый делом сформировали портрет покупателя. Целевой аудиторией магазина являются индивидуальные предприниматели, молодые юридические лица, малый и средний бизнес, реже крупный бизнес. Средний возраст руководителей/участников таких компаний составляет 30 лет и более. Это обеспеченные люди, готовые вкладываться в развитие своего дела. 

Анализ старого сайта

Мы исследовали сайт клиента и подготовили список проблем:

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

Решение

1. Анализ UI-kit и исправление недочётов

ПРОБЛЕМНЫЕ МЕСТА                                                                                                 

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

НОВЫЙ ВИД       

1. Карточкам товаров и карточкам статей сделали фон, чем обозначили их границы
2. Кнопки сделали крупнее и добавили анимацию, чтобы привлечь к ним больше внимания

2. Анализ удобства использования и визуального соответствия трендам дизайна в шапке сайта

ПРОБЛЕМНЫЕ МЕСТА

1. Невзрачный интерфейс
2. Нет системы расположения элементов
3. Большая высота шапки — закрывает контент первого экрана
4. Отсутствует фиксированное меню — нет удобства навигации по сайту

НОВЫЙ ВИД

1. Перераспределили цвета, которые присутствовали на сайте; проставили новые акценты
2. Упорядочили по зонам и добавили новые важные для отображения в шапке элементы
3. Уменьшили высоту шапки, несмотря на добавление новых элементов
4. Разработали фиксированное меню

3. Анализ удобства использования и визуального соответствия трендам дизайна в подвале сайта

ПРОБЛЕМНЫЕ МЕСТА

1. Непривлекательный вид, недостаточно тёмный и недостаточно светлый background, выглядит больше как прототип
2. Занимает много места на экране, а внутри необоснованно много пустого пространства

НОВЫЙ ВИД

1. Сделали светлый и яркий вид, как у шапки
2. За счёт грамотного распределения элементов — высота подвала уменьшилась

4. Анализ удобства использования и визуального соответствия трендам дизайна на странице каталога

ПРОБЛЕМНЫЕ МЕСТА

1. Из-за отсутствия границ у карточек товара нет понимания, к чему именно относятся кнопки “В корзину”, “Сравнение”, выбор количества и цена
2. Фильтры выполнены выпадающим списком, когда удобнее просто скрывать их
3. Слайдер для просмотра других товаров очень мелкий, в него сложно попасть

НОВЫЙ ВИД

1. Независимо от количества отображаемых характеристик, хорошо видно, к какой карточке относятся все элементы
2. Все фильтры видны сразу, а при необходимости их можно скрыть.
3. Кнопки слайдера сделали больше, благодаря этому на них стало легче попасть, также добавили кнопку для подгрузки других товаров прямо на этой странице.

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

ПРОБЛЕМНЫЕ МЕСТА

1. Бросается в глаза фильтр, который бесполезен в карточке товара и занимает место, которое можно отдать для размещения информации о товаре.
2. Видимость сразу всех характеристик удобна только в случае их минимального количества, в остальных ситуациях их лучше распределять в табах.
3. Отсутствует информация о доставке и оплате, приходится переходить на соответствующую страницу, это непрактично.
4. Отсутствуют блоки “Отзывы” и “Часто задаваемые вопросы”, что сейчас так важно видеть клиентам при изучении продукции

НОВЫЙ ВИД

1. Убрав фильтр из карточки товара, мы добавили место для отображения информации о товаре. 
2. Все характеристики разбили по табам, что дало нам больше пространства для других блоков.
3. Добавили кнопки со всплывающими окнами, в которых указана краткая информация об оплате и доставке с возможностью перехода на страницы доставки и оплаты
4. Добавили блок "Отзывы" и блок "Вопрос-ответ".

6. Анализ удобства использования и визуального соответствия трендам дизайна на странице статей

ПРОБЛЕМНЫЕ МЕСТА

1. Не соблюдены правила вёрстки карточек, из-за чего строки “прыгают”
2. Нет даты публикации
3. Отображаются сразу все статьи, что сильно растягивает страницу

НОВЫЙ ВИД

1. Выставили фиксированную высоту заголовков и превью текста, за счёт чего высота карточек стала единой
2. Добавили отображение даты публикации
3. Встроили слайдер, чтобы не вытягивать страницу

7. Изменения страниц статей на примере одной статьи

НОВЫЙ ВИД

1. С помощью картинок и уменьшения ширины текста мы сделали прочтение статьи более комфортным
2. Добавили перелинковку на сопутствующие товары
3. Добавили возможность поделиться статьёй в социальных сетях
4. Добавили 2 вида перелинковок на другие статьи: чтение статей по списку, чтение статей в общей тематике.
5. Внедрили возможность комментировать статью

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

ШАПКА И ФИКСИРОВАННОЕ МЕНЮ

1. Мы отказались от классического бургера
2. Все элементы из бургер-меню разместили в нижнее фиксированное меню, откуда можно быстрее попасть на нужную страницу или раздел сайта

ПОДВАЛ И КАТАЛОГ

1. Подвал освободили от перегруженности элементов
2. В мобильном каталоге стало удобно находить необходимые категории