---
publishYear: 2025
name: Anggell
title: Дизайн интерфейса системы управления рестораном
excerpt: На основе MVP создали дизайн интерфейса системы поддержки принятия решений в ресторанном бизнесе.
context: |
[Anggell](http://www.anggell.com/) — система поддержки принятия решений в ресторанном бизнесе. В её основе лежит методология, разработанная владельцами известных петербургских ресторанов.
Мы уже работали с Anggell — создали дизайн MVP — и получили отличный результат, о чем можно почитать [в отдельном кейсе](/portfolio/anggell).
В этот раз заказчик пришел с новыми задачами. Мы протестировали MVP, выяснили, что некоторые решения препятствуют удобной работе и в будущем помешют развивать сервис, и полностью переработали дизайн интерфейса системы.
Мы называем такой формат взаимодействия — постоянное сотрудничество с заказчиком и возвращение к продукту по мере его разработки — [UX-отделом на аутсорсе](/services/ux-outsource).
isNew: true
logo:
src: ~/assets/images/portfolio/anggell/logo.svg
alt: Anggell • Логотип
link: http://www.anggell.com/
image: ~/assets/images/portfolio/anggell/main.png
imageAlt: Собака Павлова • Anggell • Дизайн интерфейса системы управления рестораном
thumbnail:
src: ~/assets/images/portfolio/cards/anggell2.svg
alt: Собака Павлова • Anggell • Дизайн интерфейса системы управления рестораном
tags:
- it
- ux-design
- ux-outsource
- prof
- anggell
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[UX-отдел на аутсорсе](/services/ux-outsource) и [UX-дизайн под ключ](ux-design), как в этом кейсе, и [многое другое](/services).
collection: services
page: ux-outsource
- collection: services
page: ux-design
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: anggell
- collection: portfolio
page: compel
- collection: portfolio
page: hyperus
- collection: portfolio
page: elma
- collection: portfolio
page: edms
- collection: portfolio
page: amber
outcome:
title: Некоторые цифры
numbers:
- title: Сформулировалили
number: 2 портрета
text: пользователей системы
- title: Выделили
number: 3 сценария
text: взаимодействия с системой
- title: Спроектировали
number: 24 макета
text: страниц метрик с подразделами
- title: Нарисовали
number: 10 макетов
text: страниц точек роста
result:
- src: ~/assets/images/portfolio/figma.svg
text: Макеты интерфейса
link: "https://www.figma.com/files/team/666937503093615138/project/59284588/Anggell?fuid=1452954497609764972"
budget: "1 500 000 ₽"
time: "5 месяцев"
director: |
Хороший продукт заслуживает хороший интерфейс. А Anggell, несомненно, хороший продукт, который после выхода на рынок станет стандартом ресторанного бизнеса. Мы же надеемся и впредь работать над улучшением пользовательского взаимодействия этой системы.
review:
text: |
Я оцениваю результаты проекта как хорошие. Мы уже применили их в текущей версии продукта. Почему хорошие, а не отличные? – потому что «отлично» могло получиться лишь случайно. Мы движемся методом постепенного приближения к результату, к тому же по пути уточняя требования к продукту. Поэтому это ровно тот результат, которого я ожидал.
Это не первый совместный проект и уже есть большое взаимное доверие. Работалось комфортно, кроме отдельных моментов. В начале проекта, когда мы рассказывали много вводной информации, контекст, без которого сложно делать адекватный продукт, оказалось, что нас не услышали. Это привело проект к кризису. Хорошо, что хватило доброй воли и здравого смысла признать проблему, сделать шаг назад и исправиться. В итоге проект вернулся к своему здоровому течению и дошел до необходимого результата. Кризисы – это часть работы, честное отношение к проблемам важнее сиюминутного комфорта.
Рекомендую всем, кому нужен честный труд и честный результат. Неважно, кто заказчик – стартап или enterprise. Работы – дизайн интерфейсов, проработка пользовательского опыта, создание новых продуктов и любые другие работы, за которые Собака Павлова берется. Главное отличие от других – в проекте вы ведете себя как партнер, а не как подрядчик. Это настолько классно, насколько и редко.
person: Роман Лебедев
position: Co-Founder / CEO
metadata:
canonical: https://sobakapav.ru/portfolio/anggell
title: Дизайн интерфейса системы управления рестораном
description: "На основе MVP создали дизайн интерфейса системы поддержки принятия решений в ресторанном бизнесе."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/anggell/badge.png'
width: 1200
height: 630
type: website
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
import ImageSlider from '~/components/common/ImageSlider.astro';
import UniversalSlider from '~/components/common/UniversalSlider.astro'
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Результат](#anchor3) • [Нюансы и особенности](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задача
Создать сервис для владельцев ресторанов (одного или сети), который помогает:
- Быстро понимать текущее состояние бизнеса;
- Находить конкретные возможности для роста прибыли;
- Принимать решения на основе данных.
<a href="/images/portfolio/anggell/1.png" target="_blank"></a>
<em>Одна из страниц десктопной версии MVP</em>
Ключевой вызов: увеличить доверие пользователей, повысить вовлеченность и показать ценность продукта так, чтобы его захотели купить владельцы ресторанов.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/anggell/2.png" />
<PhoneMockup image="/images/portfolio/anggell/3.png" />
</div>
<em>Стартовая страница и страница с метриками</em>
## <a name="anchor2" />Дизайн-задачи
На основе обратной связи по MVP нужно было:
- Сделать интерфейс понятным и полезным для владельцев ресторанов.
- Выстроить логику так, чтобы пользователи регулярно возвращались к сервису.
- Показать ценность данных и рекомендаций в деньгах (например: «Решите это — заработаете +5000 €»).
- Вызвать доверие за счет прозрачности данных и экспертного тона.
- Убрать критику, сделать продукт «позитивным» и поддерживающим.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/anggell/15.png" />
<PhoneMockup image="/images/portfolio/anggell/16.png" />
</div>
<em>Выбор ресторана и попап «Методология»</em>
## <a name="anchor3" />Результат
Проанализировали существующую систему, сформулировали два пользовательских профиля и выделили три ключевых сценария.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Отрисовали макеты основных страниц в различных состояниях.
По окончании работы мы передали:
- Стартовую страницу.
- Метрики (24 макета подразделов и разных состояний).
- Точки роста (10 макетов, включая концепции для будущего развития).
<UniversalSlider count={3}>
<PhoneMockup image="/images/portfolio/anggell/7.png" />
<PhoneMockup image="/images/portfolio/anggell/8.png" />
<PhoneMockup image="/images/portfolio/anggell/9.png" />
<PhoneMockup image="/images/portfolio/anggell/10.png" />
<PhoneMockup image="/images/portfolio/anggell/11.png" />
<PhoneMockup image="/images/portfolio/anggell/12.png" />
</UniversalSlider>
<em>Метрики ресторана. <a href="/images/portfolio/anggell/7.png" target="_blank">Выручка ресторана</a>, <a href="/images/portfolio/anggell/8.png" target="_blank">выручка официанта</a>, <a href="/images/portfolio/anggell/9.png" target="_blank">средний чек</a>, <a href="/images/portfolio/anggell/10.png" target="_blank">сравнение чеков</a>, <a href="/images/portfolio/anggell/11.png" target="_blank">средний чек официанта</a>, <a href="/images/portfolio/anggell/12.png" target="_blank">средний чек официанта (таблица)</a></em>
Помимо экранов мы вынесли на отдельную страницу стили и компоненты, чтобы дизайн можно было легко масштабировать.
<a href="/images/portfolio/anggell/4.png" target="_blank"></a>
<a href="/images/portfolio/anggell/5.png" target="_blank"></a>
<em>Стили и компоненты</em>
По ходу проекта выяснилось, что заказчику нужны иконки для точек роста. Мы подключили отдельного дизайнера — заказчик остался доволен результатом.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/anggell/13.png" />
<PhoneMockup image="/images/portfolio/anggell/14.png" />
</div>
<em>Точки роста и иконки для них</em>
## <a name="anchor4" /> Нюансы и особенности процесса
Экспертиза в этой теме была у самого заказчика, поэтому мы работали в формате совместных воркшопов. Наша команда готовила концепты, а во время встреч вместе с заказчиком быстро отсекали неподходящее и дорабатывали удачные идеи.
Такой формат позволил не распыляться, а сразу углубляться в наиболее рабочие решения.
<UniversalSlider count={3}>
<PhoneMockup image="/images/portfolio/anggell/17.png" />
<PhoneMockup image="/images/portfolio/anggell/18.png" />
<PhoneMockup image="/images/portfolio/anggell/19.png" />
<PhoneMockup image="/images/portfolio/anggell/20.png" />
<PhoneMockup image="/images/portfolio/anggell/21.png" />
<PhoneMockup image="/images/portfolio/anggell/22.png" />
</UniversalSlider>
<em>Точки роста ресторана: <a href="/images/portfolio/anggell/17.png" target="_blank">блюда</a>, <a href="/images/portfolio/anggell/18.png" target="_blank">официанты</a>, <a href="/images/portfolio/anggell/19.png" target="_blank">столики</a>, <a href="/images/portfolio/anggell/20.png" target="_blank">попап «блюда»</a>, <a href="/images/portfolio/anggell/21.png" target="_blank">попап «официанты»</a>, <a href="/images/portfolio/anggell/22.png" target="_blank">попап «столики»</a></em>
## <a name="anchor5" />