2021
Проект интернет-магазина бескаркасной мягкой мебели был выполнен в рамках обучения в Школе Тильды на курсе Tilda PRO.
Учебный кейс
Задача — изучить принцип проектирования интернет-магазина и сделать полноценный сайт, удобный для пользователя с точки зрения UX. Необходимо реализовать функционал интернет-магазина:
— Создать каталог товаров
— Организовать возможность выбора способа доставки
— Создать карточки товаров
— Настроить фильтр по категориям
— Подключить корзину
Интернет-магазин бескаркасной мебели
2021
день
от начала до конца работы
страниц
входят в состав интернет-магазина
Этапы развития
Техническое задание
Структура магазина
Дизайн-макет
Адаптив страниц
Анализ целевой аудитории
Прототип магазина
Верстка на Тильде
Техническое
Задача 01
Необходимо спроектировать интернет-магазин для продажи бескаркасной мягкой мебели.
Задача 02
Путь пользователя на сайте должен быть максимально простым, навигация — интуитивно понятной.
Задача 03
Дизайн должен быть минималистичным, не мешать восприятию товара. Акцентный цвет взять из логотипа.
Анализ целевой
Определены черты трех основных типов клиентов магазина. Один портрет взят за основу для проектирования CJM, остальные необходимы для проработки дополнительных сценариев пользования.
Портрет пользователя позволяет понять его потребности и способы их удовлетворить.
Мария Иванова, 37 лет
декоратор интерьера
Цели: Необходимо подобрать для клиента мебель, не выходя из выделенного им бюджета

Трудности: Клиент Марии не готов тратить большую сумму на мебель

Наше решение: Предлагаем Марии программу сотрудничества с дизайнерами для получения персональной скидки
Наталья Ивлева, 32 года
Мама 2-х детей,в декрете
Цели: Хочет купить безопасную экологичную мебель, которая идеально впишется в интерьер

Трудности: Не имеет возможности ездить по магазинам с ребенком

Наше решение: Покупка мебели он-лайн, бесплатный обмен модели и цвета. Сертификаты качества на материалы
Ярослав Сомов, 45 лет
Продает мебельную фурнитуру
Цели: Хочет договориться о сотрудничестве — поставке фурнитуры для изготовления бескаркасной мебели

Трудности: Имеет определенные условия по сотрудничеству от руководителя

Наше решение: Рассказываем о гибких условиях сотрудничества с партнерами
Customer journey map и структура
Для того, чтобы понять, как удобно реализовать интернет-магазин, была составлена структурная карта, позволяющая определить количество необходимых разделов и подразделов, наполнение страниц блоками.
Customer journey map
Для составления портрета пользователя был проведен анализ соцсетей клиентов конкурентов. Были выявлены наиболее характерные типы потенциальных клиентов, их общие черты, часто задаваемые вопросы. Это позволило предположить основные проблемы, которые пытаются решить люди.
Структурная карта
Анализ ЦА позволил предположить сценарии поведения пользователей в интернет-магазине. На основе этих данных была составлена структурная карта, наглядно изображающая архитектуру магазина, количество необходимых страниц и их примерный состав.
Прототип главной
Прототип — это визуальная схема распределения блоков на странице и контента внутри каждого блока.
Структурная карта магазина дала представление о количестве необходимых блоков, их наполнении контентом.
Верстка на
Интернет-магазин сверстан на платформе Тильда. Состоит из стандартных и Zero блоков. Для некоторых решений добавлен код.
Главная страница интерент-магазина
Двухуровневое меню с выпадающим списком
Обложка главной страницы — слайдер
Варианты слайдов обложки
Главный экран рассказывает клиентам о самых выгодных предложениях магазина, демонстрирует несколько топовых товаров. Реализован в виде слайдера

Меню достаточно объемное, поэтому было принято решение сделать его двухуровневым. Содержит навигацию по всем разделам сайта.
Навигация по магазину
Фиксированное при скролле меню
Карточка товара
Карточка оформлена в виде pop-up окна. Содержит подробную информацию о товаре, его характеристики, сопутствующие товары.
Хиты, акции и новинки
Блоки оформлены в виде витрин с акционными предложениями, хитами и новинками с возможностью сразу купить нужный товар. Использование табов для переключения между категориями экономит скорость посещения каждого раздела клиентом.
Дополнительные услуги
Идея дизайна магазина — бескаркасная мебель может стать частью любого интерьера. В качестве атмосферного антуража для демонстрации товаров использованы графические иллюстрации элементов предметов быта.
Краткое описание предоставляемых компанией дополнительных услуг, иллюстрированное иконками.
Графический дизайн
Корзина товаров
В блоке дано краткое описание преимуществ магазина, иллюстрированное иконками.
Блог содержит статьи по выбору, эксплуатации и уходу за бескаркасной мебелью.
Преимущества и блог
В корзине реализована возможность изменять заказ и выбирать вариант доставки товара.
Используемые
Для основного контента был выбран удобный для чтения гротескный шриф
Шрифт — элемент графического дизайна и инструмент коммуникации между интерфейсом и клиентом магазина.
Данный акцентный шрифт используется в заголовках различного уровня
Цветовое решение представляет собой сочетание монохрома и яркого акцентного цвета, взятого из логотипа.
#941256
#C4C4C4
#FFFFFF
Made on
Tilda