Проблема Сервис не располагал полноценной веб-версией: покупки возможны только через мобильное приложение. Сайт выполнял лишь витринную функцию: пользователи могут просматривать ассортимент, но оформить заказ онлайн было невозможно. В приложении путь от поиска товара до оформления заказа перегружен необязательными шагами и «скрытыми» действиями, фильтры и категории неочевидны, а корзина требует лишних подтверждений. Всё это замедляет процесс покупки, повышает вероятность ошибок и приводит к потере клиентов на каждом этапе.
Так выглядела главная страница сайта до начала работ Анализ и исследования Первым делом я провела всесторонний аудит юзабилити и визуальной части текущего сайта, выявила сильные и слабые стороны, какие элементы можно сохранить, а какие необходимо переработать. Параллельно изучила визуальные и функциональные решения конкурентов, отобрала лучшие практики и адаптировала их для повышения удобства и эффективности нашего сервиса.
70% пользователей женщины >60% повторяемая корзина 39% делают покупки несколько раз в неделю >50% покупателей с детьми Что было сделано: Мы с командой провели интервью с командой заказчика, где я выяснила, что из себя представляет продукт, кто целевая аудитория. Также уточнила ключевые требования и ожидания по функциональности и дизайну, чтобы точно понять, как лучше выстроить дальнейшую работу Проанализировала существующий интерфейс и основную функциональность сервиса, а также изучила конкурентов На основе метрик выявила основные ЦА и построила CJM Начала постепенно организовывать рабочий файл в Figma. Создала отдельные страницы для разных задач и элементов, чтобы впоследствии было проще ориентироваться и находить необходимую информацию по проекту На основе аналитики я вывела 22 основные и 62 дополнительные гипотезы, которые легли в основу прототипов и дизайна
Разработка дизайн-концепции После утверждения прототипа я приступила к созданию первых итераций дизайна главной страницы сайта.
Ключевые моменты: Был добавлен функционал открытой корзины, закреплённой в правой части экрана. Она мгновенно обновляется при добавлении товара и показывает итоговую сумму. Для авторизованных пользователей упростила повтор заказа (более 60% это повторяемая корзина), добавила персональные предложения, а также вывела наверх блок «Статус текущего заказа» На этом этапе был также детально проработан флоу выбора времени и способа доставки. Пользователь видит доступные слоты без ухода на отдельный экран. Все изменения отражаются в открытой корзине. В итоге было создано 2 варианта дизайн-концепции для главной страницы.
Обсуждение и анализ фидбека После подготовки двух вариантов дизайн-концепции мы провели созвон с командой заказчика, чтобы:
Презентовать решения — показать, чем отличаются концепции и какие задачи закрывает каждая; Собрать обратную связь — выявить потенциальные проблемы, уточнить технические ограничения. Итог встречи: Заказчику понравились оба подхода и он предложил объединить сильные элементы
Доработка дизайна На доработку макетов ушло несколько дней. За это время я:
Детально проработала интерфейс, улучшив визуальную часть Внесла все корректировки, полученные во время звонка с командой заказчика Добавила недостающие экраны и состояния, чтобы покрыть все возможные пользовательские сценарии Также на этом этапе я начала собирать часто используемые компоненты, такие как кнопки, поля ввода и иконки. Все шрифтовые и цветовые стили были вынесены в UI-kit и добавлены в Figma Variables.
Сборка остальных страниц После утверждения дизайн-концепции я перешла к полной сборке интерфейса, параллельно прорабатывая адаптивы
Что было сделано:
Проработка макетов. Детально собрала все страницы (каталог, карточка товара, корзина, оплата и др.) и зафиксировала их состояния Дополнительные экраны. Добавила недостающие шаги чтобы покрыть 100% пользовательских сценариев. Адаптивы. Были подготовлены макеты для четырёх ключевых брейкпоинтов (1920 px, 1280 px, 768 px, 375 px) Компонентная структура. Вынесла повторяющиеся элементы в библиотеку Figma, подключив auto-layout и variables В результате получился завершённый набор страниц, готовый к реализации, с чёткой адаптивной логикой и полной отработкой пользовательских сценариев.
Презентация Завершив доработку страниц, мы снова организовали звонок с командой заказчика, где презентовали и утвердили дизайн остальных страниц сайта. Помимо этого, разработчики, которые уже начали работу, дали свой фидбек по дизайну и UI-киту. Это помогло выявить потенциальные технические нюансы и внести небольшие коррективы, чтобы облегчить реализацию интерфейса.
Корзина имеет множество состояний Результат Благодаря проведённой работе у продукта появился чёткий, удобный и системный интерфейс, который поможет снизить количество отказов, ускорить оформление заказа и повысить лояльность покупателей. Системный подход и UI-кит помогут команде заказчика оперативно развивать продукт после запуска, сохраняя единый стиль и удобство интерфейса.
