Разработка проекта велась для интернет-магазина музыкальных инструментов Pop-Music.ru. Сайт успешно функционировал, однако у владельцев возникла идея о том, что, возможно, будет лучше разделить товары на различные категории.
В результате был создан отдельный бренд с индивидуальным характером, философией и ярким визуальным оформлением.
В результате был создан отдельный бренд с индивидуальным характером, философией и ярким визуальным оформлением.
Фендер — музыкальный интернет-магазин
UI
UX
concept
website
branding
e-commerce
Работа над проектом
Отправной точкой проектирования стало детальное описание желаемого образа бренда, предоставленное клиентом, где указаны миссия, ценности и целевая аудитория бренда.
Создание визуальной концепции: разработка дизайна, отражающего ключевые ценности и миссию бренда. Было важно, чтобы дизайн был не только привлекательным, но и интуитивно понятным для целевой аудитории.
Разработка стратегии позиционирования и развития бренда: анализ рынка, определение уникальных торговых предложений и создание плана по укреплению бренда в сознании потребителей.
Основные направления работы
Задачи
О проекте
1
Создать харизматичный суббренд и интернет-магазин для Pop-music, который будет заниматься продажей клавишных музыкальных инструментов.
2
Передать вайб современной клавишной музыки, атмосферу концертных клубов и творческой молодежной среды.
3
Представить магазин, как прогрессивный, технологичный, стильный бренд, который помогает людям стать частью творческого комьюнити.
Работая над проектом, мне пришлось с нуля изучать тему музыкальных инструментов. Эти знания позволили мне тщательно продумать функциональность и структуру сайта, а также предложить решения для удовлетворения потребностей покупателей, которые не были учтены конкурентами.
Исследования
Я проанализировала сайты конкурентов и главный магазин клиента, чтобы узнать их структуру, сервисы и УТП. На основе этих данных я составила список уточняющих вопросов для стейкхолдеров.
Затем, опираясь на желаемый клиентом образ бренда и основные типы онлайн-покупателей, я разработала карты эмпатии для нашего проекта.
Затем, опираясь на желаемый клиентом образ бренда и основные типы онлайн-покупателей, я разработала карты эмпатии для нашего проекта.
Вопросы стейкхолдерам
Аудитория магазина охватывает широкий круг потребителей с различными музыкальными интересами и финансовыми возможностями.
При разработке проекта я учла пожелания заказчика и особенности поведения пользователей интернет-магазинов, создав карты эмпатии и определив ключевые функции для успешного функционирования сайта.
При разработке проекта я учла пожелания заказчика и особенности поведения пользователей интернет-магазинов, создав карты эмпатии и определив ключевые функции для успешного функционирования сайта.
Карты эмпатии по типу покупателей
В результате исследований я составила список обязательных и дополнительный функций и элементов, которые необходимо сделать на сайте.
Результаты исследований
Обязательно
На основе имеющейся информации и сервисов магазина, которые можно реализовать без дополнительных вложений.
Дополнительно
Предложения по развитию магазина, которые помогут повысить конверсию и положительный опыт пользователей от взаимодействия с магазином.
Фендер — интернет-магазин клавишных инструментов, который не только продает инструменты, но и предлагает обзоры новинок, а также ведёт блог о современной музыкальной индустрии.
Основной приоритет бренда — обеспечение комфорта покупателей. Это находит отражение в уважительном отношении к индивидуальным потребностям каждого клиента, а также в обеспечении удобства пользования сайтом.
Концепция нового бренда
UX-проектирование
Чтобы ускорить запуск интернет-магазина, я определила набор основных функций и страниц, необходимых для создания минимально рабочего продукта. Остальные страницы будут добавлены в несколько итераций по мере развития проекта.
Карта сайта
После сбора референсов, я сгруппировала их по схожим чертам и выделила 3 стилистики. На примере обложки главной страницы я показала 3 варианта визуала. Решили сделать гибрид модульного с линиями и темного брутализма
Варианты дизайна
Концепция визуала
При создании UI концепции я вдохновлялась эстетикой клавишных инструментов, ритмами музыки, контрастом черных и белых клавиш. Я старалась добиться выразительности минимальными средствами, чтобы дизайн подчеркивал красоту самих музыкальных инструментов.
Аккуратное использование трендовых приемов дизайна и стильных фотографий представляет магазин, как прогрессивный и творческий.
Аккуратное использование трендовых приемов дизайна и стильных фотографий представляет магазин, как прогрессивный и творческий.
Образ магазина
Шрифты
В проекте часто встречается текст на черных плашках. На них текст оптически выглядит более тонким, чем на белом фоне. Для лучшей читабельности и равновесия, я предусмотрела более насыщенные стили текста для черного фона.
На сайте используется простой и универсальный шрифт Noto Sans. Он подчёркивает строгие перпендикулярные линии вёрстки и позволяет создавать текстовые блоки в различных стилях, от брутального до изящного, используя контрастность начертаний.
Цвета
Ахроматическая палитра отсылает к черным и белым клавишам. В дизайне преобладает чистые черный и белый, оттенки серого используются для вспомогательных элементов.
Фотографии
Фотографии для статей, промо и рекламы должны передавать атмосферу творческой среды и современной музыки. Цветокор фотографий - с уклоном в холодную гамму. Использовать темные и светлые снимки для поддержания контрастности дизайна.
UI-кит
Компоненты представлены в двух вариантах: для белого и черного фона. Особое внимание при разработке я уделила основному элементу интернет-магазина — карточке товара.
Главная задает тон стилистике и настроению всего магазина, поэтом было особенно важно внимательно продумать ее структуру и визуал.
Главная
Макеты Экранов
Каталог — это основа интернет-магазина. От удобства его использования и качества обслуживания зависит количество совершаемых покупок и удовлетворённость клиентов.
Каталог
Дополнительная информация отображается при наведении курсора, чтобы не перегружать дизайн карточек товаров.
Подборки товаров помогают магазину продвигать определённые товары, а покупателям — быстрее сориентироваться в ассортименте.
Повышаем шансы на то, что пользователь предоставит свои контактные данные, благодаря наличию различных способов связи.
Привлекаем больше посетителей благодаря выдаче статей в поисковиках.
Упрощаем поиск товаров покупателю.
Повышаем продажи аксессуаров через полезный контент.
Пользователям не нужно листать наверх, чтобы перейти на другой таб.
Побуждаем покупателя купить сопутствующие товары.
Пользователь может получить информацию о доставке и оплате без необходимости искать её на других страницах.
Улучшаем отношение клиентов и увеличиваем шансы на покупку благодаря дружелюбному сервису, ориентированному на разных людей.
Вся самая важная информация находится на первом экране.
Страница товара
Для повышения конверсии необходимо упростить путь пользователя от выбора товара до оформления заказа, создав интуитивно понятный интерфейс. При этом важно предоставить покупателям возможность гибкого управления содержимым корзины и многократной проверки корректности введенной информации.
Разработанная концепция пользовательского пути учитывает баланс между удобством и функциональными возможностями, позволяя создать максимально эффективный сценарий взаимодействия. Этот подход упрощает покупку и дает пользователям контроль над заказами на каждом этапе взаимодействия с платформой.
Флоу оформления заказа
Адаптивная сетка задает логику адаптивности всего макета. В проекте всего 5 брейкпоинтов: 1920px, 1366px, 1024px, 768px, 360px. В диапазонах между ними сетка растягивается, сохраняя поля и межколонники. Таким же образом изменяются и элементы внутри сетки.
Адаптивность
Итоги работы
Для меня, как для человека, который любит копаться в мелочах и продумывать детально UX, этот проект оказался очень интересен и полезен тем, что в нем было нужно уделить большое внимание визуальной составляющей. Я смогла отойти от привычного подхода к проекту и проявить себя ярче в UI.
Другие проекты
UI
UX
concept
mobile app
UI
UX
web app
web service
