мама ольга
фермерский онлайн-магазин
больше о клиенте
«мама ольга» — сеть магазинов фермерских продуктов и товаров для дома. находится в городе Серпухов и в небольших городах Московской области.
цели бизнеса
магазин фермерской продукции готовился к расширению за пределы серпухова. выйти на рынок доставки фермерских продуктов и здорового питания. развивать экосистему под брендом мама ольга: магазины, e-commerce, кофейня, рестораны. требовался современный интернет-магазин.
команда
ux/ui designer (я)
моя роль
проводил исследования. разрабатывал страницы и контент наполнение вместе с лидом. ревью адаптации макетов джун дизайнера.
lead designer
junior designer
задачи проекта
ресёрч: конкурентный анализ, выявление лучших решений.
провести ряд исследований, которые помогут собрать больше обратной связи и помочь повысить уровень продаж через онлайн.и так же интегрировать новый функционал для узнаваемости бренда.
создать интернет-магазин для доставки продуктов на дом (сделать упор на удобство и лёгкого заказа).
ресёрч
для начала нужно было понять как люди подходят к покупке фермерских и здоровых продуктов, как выбирают, точки контакта. найти боли, с которыми сталкиваются люди и как можно улучшить их пользовательский опыт.
cjm
поресёрчил конкурентов, собрал плюсы, упаковал для заказчика в небольшую презентацию.
конкурентный анализ
исследования
одним из пунктов продвижения товаров каталога был путем интеграции их в рецепты. алгоритм действий на бумаге был простым: пользователь ищет ПП рецепт → находит → в рецепте уже собраны товары → покупает.
поэтому рецептам требовалось уделить как можно больше внимания, чтобы они выделялись среди конкурентов.
я попросил отправить несколько заготовленных фотографий.
страница рецептов
через сервис gradients.app вытянул оттенки с каждой подобной фотографии.
на основе этих оттенков, через этот же сервис, подобрал сочитаемые контрасты для фона.
сравнил палитру с инфой взятой с исследований по психологии цвета в коммерции,
выявил несколько оттенков для нас.
создал опрос на pathway. собрал респондентов и попросил пройти опрос по ссылке.
на основе этого осуществлялся подбор бэкграунда для карточек из готовых оттенков, который предложил онлайн сервис.
весь процесс нужен был для того, чтобы было легко считывать фото на фоне и ещё на подсознательном уровне карточка могла заинтересовать.
при проектировании карточки, мы столкнулись с тем, что у нас есть несколько вариантов компановки элементов, нужно было определить наиболее удобное решение, которое пользователь будет считывать легко.
удалось собрать 46 ответов. в лидерах вариант с “картинкой -> тэгами -> названием”.
мудборды
мы собрали два направления дизайна основываясь на фирменном стиле клиента. после обсуждения выбрали вариант «польза, забота и традиции», так как это отражает позиционирование и миссию компании.
user flow
из-за спефики бизнеса, была необходимость продумать варианты доставки и выбора магазинов. мы переложили наши идеи по сценарию с помощью user flow, чтобы каждый участник проекта понимал путь пользователя.
прототипы
сделали более 30 страниц прототипов и их состояний, анализируя пути пользователя, логику оформления заказов, анализ конкурентов и выявление лучших решений для удобства пользователя. нужно было продумывать сценарии для нового клиента, у которого еще нет аккаунта, для авторизованного пользователя, так же варианты доставки и самовывоза, использование бонусных карт, накопление и списание бонусов при покупке. путь регистрации при звонке (клиент выбрал такой способ авторизации на сайте). история заказов, повтор заказов, рецепты, корзина для разных пользователей, отсутствие товара и поиск похожих товаров.
дизайн стратегия
мы отталкивались от задумки и брендинга магазина - это старорусская стилистика. славянские орнаменты, символика и атрибуты. для передачи задумки и настроения сайта решено было использовать в дизайне данного рода тематику. стилистика построена на округлых формах, поэтому было принято решение в дальнейшем дизайне сайта продвигать данную идею.
главная страница
cygre — это геометрический шрифт. он был построен на основе геометрических форм, особенно круга, создающего впечатляющее ощущение круга.
шрифт
так как у нашего клиента на тот момент было 2 магазина, нам нужно было продумать этап оформления заказа при доставке. доставка не по зонам магазина, а по ассортименту. один магазин имеет фермерские товары, второй больший имеет большой ассортимент, где и бытовая техника и строительные материалы. на этапе оформления нужно показать человеку, что ему нужно выбрать сначала магазин, а после выбрать адрес доставки. в зависимости от выбора магазина меняется ассортимент товара. поэтому были проработаны пути оформления заказа с заменой магазина, с подбором аналогов товаров.
корзина и оформление заказа
404 страница
каталог
превью и карточка товара
создали удобный личный кабинет, чтобы пользователь мог легко добавить товары и рецепты в избранное, следить за статусами заказов, хранить адреса доставки и т.д
личный кабинет
информационные страницы
взаимодействие с разработкой
разработали большой ui kit, который можно масштабировать под любые задачи и продукты компании.
ui kit
составили гайдлайны для разработки.
гайдлайны
сценарии сопровождали стрелками, а каждый макет маркировали заметками для разработки, чтобы исключить вопросы перед вёрсткой.
как передавали макеты
связь в тг: @tkhnvch
tkhnvch.dsgn
все права защищены. 2025.
