Simi

О проекте

Simi.ua – сеть магазинов формата convenience store. Сайт разрабатывался полностью с нуля: от исследования аудитории и проектирования структуры до дизайна, верстки и бэкенд-разработки. К разработке дизайна проекта была привлечена команда партнеров из Revend Group.

Услуги, предоставленные на проекте

• Создание сайта
• UX/UI-дизайн

Цели и задачи, поставленные клиентом

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

Этапы работы

Анализ требований и исследование аудитории. На старте проекта изучили целевую аудиторию, поведенческие сценарии покупателей convenience store и требования клиента. Это стало основой для всех дальнейших решений – структурных, дизайнерских и технических.

Проектирование sitemap и структуры сайта. Разработали sitemap и вместе с клиентом согласовали структуру, количество страниц и распределение контента. Структура сайта охватила главную страницу, каталог еды и напитков, промо-раздел с подстраницами (открытка, «Итого дешевле», «Получи больше», сеты, новинки), новости, услуги, о нас, сотрудничество, контакты и интерактивный поиск маркеров.

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

UX/UI-дизайн. Интегрировали все выработки и создали полноценный интерфейс. Дизайн ориентирован на быстрый и удобный пользовательский опыт. Поскольку более 56% посетителей заходят с мобильных устройств, особое внимание уделялось адаптивности и удобству на малых экранах.

Адаптивная кроссбраузерная верстка. Сверстали все страницы и компоненты сайта в соответствии с утвержденным дизайном с допустимым отклонением не более 10%. Верстка корректно работает во всех основных браузерах (Chrome, Firefox, Opera, Safari, IE) и на всех платформах (Windows, MacOS, Linux) как в десктопной, так и в мобильной версии.

Сверстанные страницы и блоки: хедер и футер; главная страница с баннерами, табами, промо-слайдером, баннерной сеткой, видеопрезентацией, блоком услуг, соцсетями и блоком «Найти нас»; страницы категорий с гридом товаров и пагинацией; промо-страницы (открытки, новинки, сети, акции); страница новостей с гридом и пагинацией и отдельная новость с баннером, слайдером, текстом, фотогридом и блоком рекомендаций; страница Tosim с баннерами и FAQ; услуги и контакты с модальными окнами; страница «Найти маркет» с поиском и фильтрами.

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

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

Тестирование. Провели полное тестирование всех страниц и функциональных элементов сайта перед сдачей проекта.

Результат

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

Благодаря CMS-решению клиент может самостоятельно управлять всем контентом – добавлять новости, обновлять акции и промо, вести каталог товаров – без привлечения разработчиков. Каталог магазинов интегрирован с интерактивной картой: новые локации добавляются через админку и сразу появляются на сайте с поддержкой фильтрации по ассортименту.