Описание
Тактильный интерфейс интернет-магазина для менеджера, который облегчает презентацию и поиск товаров для клиентов в офисе.
Заказчик: Компания САБ.
Роль в проекте: Ux/Ui дизайнер, team leade.
Кто еще был в команде: Frontend Developer.
Ссылка на макет: figma.com
(Ссылку на полную версию предоставляю при личном общении)
Проблема
В торговом зале офиса представлено не все оборудование, поэтому нет возможности быстро подобрать технику под конкретные задачи, без походов к компьютеру отдела продаж или оперативно рассчитать стоимость заказа с учетом необходимого оборудования или услуг.
Решение
Разработать удобный и понятный тактильный интерфейс для менеджеров, который облегчит их взаимодействие с клиентами в офисе и ускорит процесс продажи.
Интерфейс создавался на основе JavaScript-библиотеки React. Для быстрого взаимодействия с пользователями и выгрузкой товаров и информацией о ней с основного сайта, с последующими обновлениями.
Этапы работы
С учетом понятных вводных по проекту и с учетом что интерфейс будет использоваться сотрудниками, было принято решения сократить UX исследование и прототип.
Анализ
- Определили целевую аудиторию.
- Поиск конкурентов.
- Анализ Ux/Ui конкурентов.
Проектирование UX
- Создание user story map.
- Создание site map.
- Создание workflow.
Создание дизайна сайта UI
- Создание Ui kit для проекта.
- Создание визуальных элементов для сайта.
User Story Map
Команда проекта провела анализ требований и разработала User Story Map, на котором были отмечены приоритеты задач. Основываясь на этой информации, был сформирован backlog проекта, который включал в себя список задач, отсортированных по приоритетам.
Site map
Создана структура сайта, обеспечивающая удобную и интуитивно понятную навигацию по всем разделам и подразделам.
Workflow
В ходе разработки проекта была создана workflow для всех страниц сайта, а также для интерактивных элементов, элементов управления и ссылок. Workflow регулярно обновлялся по мере развития проекта.
UI kit
Typography
Система заголовков и основных шрифтов была взята из основного проекта. Для заголовков выбран шрифт Gilroy, для основного текста — PT Sans.
Colors
На основе цветовой схемы основного проекта разработана цветовая палитра для данного сайта, что обеспечивает единство восприятия всех элементов интерфейса и создает приятное визуальное впечатление у пользователей.
Icons
Были созданы наборы иконок, которые используются в данном проекте. Это позволяет придерживаться единого стиля и облегчает работу программиста.
Buttons
В рамках проекта были созданы кнопки различных размеров, цветов, с иконками и без, а также в различных состояниях (например, нажатые или выделенные). Это позволило создать универсальный и адаптивный дизайн кнопок, который соответствует различным стилям и функциям на сайте.
Система отступов
Создана система отступов для сайта. Это помогает придерживаться единых стандартов и помогает при правках и возвращенье к проекту.
Результат
Для бизнеса
Облегчил взаимодействие менеджеров с клиентами в офисе и ускорил процесс продажи товаров, а также осуществлять поиск и просмотр товаров прямо в торговом зале. Это упрощает процесс покупки и делает его более комфортным для клиентов.
Созданные экраны
- Экран заглушка.
- Главный экран.
- Экран с категориями.
- Экран категории.
- Экран товаров.
- Экран корзины.
UX/UI часть
- Создал user story map.
- Создал site map.
- Создал workflow.
- Создал Ui kit для проекта.
- Создал визуальные элементы для сайта.
Спасибо за просмотр!
Я открыт к новым сотрудничествам. Если хотите разработать интерфейс, свяжитесь со мной удобным для вас способом.