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