---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2024-10-29
publishYear: 2019
name: Simple
title: Концептуальный дизайн интерфейса приложения для интервального голодания
excerpt: Создали концепцию и структуру интерфейса.
context: Вначале была идея. В конце — красивые картинки для интерфейса нового продукта, ЗОЖ-приложения [Simple](https://play.google.com/store/apps/details?id=life.simple&hl=en_SG). А что между идеей и картинками? UX-механики для воплощения идей, концепция продукта и структура интерфейса. Их создание — это, собственно, и есть UX.
image: ~/assets/images/portfolio/fasting/fasting.png
imageAlt: Концептуальный дизайн интерфейса приложения для интервального голодания
thumbnail:
src: ~/assets/images/portfolio/cards/simple.svg
alt: Собака Павлова • Simple • Концептуальный дизайн приложения для интервального голодания
tags:
- med
- product-team
- mass
- mob
- cjm
tags2:
- Здоровье
- Концептуальный дизайн
- Структура интерфейса
- Мобильное приложение
- CJM
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Работа в продуктовой команде](/services/product-team), как в этом кейсе, и [многое другое](/services).
collection: services
page: product-team
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
- collection: promo
page: focus
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: erna
- collection: portfolio
page: tmh
- collection: portfolio
page: onkor
- collection: portfolio
page: avicenna
- collection: portfolio
page: medmarket
- collection: portfolio
page: tis
- collection: portfolio
page: raisa
- collection: portfolio
page: algohelp
outcome:
title: Некоторые цифры
numbers:
- number: 200+ экранов
text: за две недели
- number: "7"
text: портретов пользователей
- number: 10 причин
text: использовать приложение
- number: 3 место
text: в рейтинге ЗОЖ-приложений
result:
- src: ~/assets/images/portfolio/figma.svg
text: Интерактивный прототип
link: https://www.figma.com/design/DyjfNOZsZNCQfojvs0k9IyZn/Fasting-App-alpha?node-id=0%3A1
time: 2,5 недели
budget: ~ 900 000 ₽
review:
text: Несмотря на редкий для российского рынка уровень сложности задач, ребята из «Собаки» не спасовали. Был выбран продуктивный формат взаимодействия. Команда проектирования на удивление глубоко вдумалась, погрузилась в наши потребности и сумела приземлить наш довольно пространный вижн на конкретные макеты и гипотезы, дав очень много полезных идей как на макро-, так и на микроуровне.
photo: ~/assets/images/portfolio/fasting/person.png
person: Александр Илинский,
position: Основатель стартапа
director: Создали концепт и структуру продукта за две с половиной недели.
metadata:
canonical: https://sobakapav.ru/portfolio/fasting
title: Мобильный интерфейс • Дизайн приложения для здоровья и здорового питания
description: "Создали дизайн-концепцию приложения, спроектировали десятки экранов, проработали UX-механики и структуру интерфейса. Интерактивный прототип — внутри."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/fasting/fasting.png'
width: 1680
height: 1154
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Экспозиция](#anchor1) • [Завязка](#anchor2) • [Развитие сюжета. Как будем работать?](#anchor3) • [Внутренний монолог](#anchor4) • [Развитие сюжета. Первая неделя](#anchor5) • [Лирическое отступление](#anchor6) • [Неожиданный сюжетный поворот](#anchor7) • [Внезапная развязка](#anchor8) • [Эпилог](#anchor9) • [Типографские расходы](#anchor10)
</TOC>
## <a name="anchor1" />Экспозиция
[Фастинг](https://www.medicinenet.com/fasting_diets/article.htm#what_are_intermittent_fasting_diets) — интервальное голодание, набирающий популярность способ сбросить вес. [Simple](https://play.google.com/store/apps/details?id=life.simple&hl=en_SG) — приложение под iOS для тех, кто фастится, и стартап, который его разрабатывает. Это кодовое название, настоящее сказать не можем.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/fasting/1.png" />
<PhoneMockup image="/images/portfolio/fasting/2.png" />
</div>
<em>Начальные экраны</em>
Мы присоединились к проекту в самом начале, когда заказчик только начал собирать команду («Не хватает своих UX-дизайнеров, одолжите ваших»).
У заказчика еще не было ни офиса, ни юридического лица. А что было? Были:
- UI-дизайнер;
- Product Owner — который, правда, пока еще работал в другой компании, его нужно было дождаться;
- общее представление о том, каким должен быть продукт и каким он не должен быть;
- знание американского рынка — приложение предназначалось для него;
- методология фастинга (в процессе), медицинское обоснование метода;
- описание структуры ПО и айтишного решения приложения,
и вообще много хороших букв.
_Хорошие буквы заказчика_
[Контент: примеры тем дня](https://docs.google.com/document/d/1o_Tn--kD-KzO1_qBS-rxRi-Vg0CSDv_NCpbjls8RM-U/edit#heading=h.danstqkvr587).
## <a name="anchor2" />Завязка
«Худеем вместе» пришли к нам за дизайном интерфейса задуманного приложения.
Заказчик точно знал, каким должен быть продукт и каким он не должен быть (например, точно не нужен был очередной калькулятор калорий). Но это было мозаичное такое знание: отдельные кусочки, из которых пока не складывалась общая картина.
Было сложно понять, как эта штука впишется в жизнь людей. А что мы делаем, когда не знаем, что люди делают с продуктом? Создаем портреты пользователей и описываем жизненные ситуации.
_[Портреты предполагаемых пользователей](https://docs.google.com/document/d/1hSndNa0fd4otObgQO2ImPXQD4XsIL3ZWiV9p759ZbmU/edit)_
Немного опасались промахнуться из-за того, что будущие пользователи — американцы, а мы все-таки нет (спойлер: не промахнулись).
Мы боялись сделать штуку, которой люди не будут пользоваться. Так что мы набросали UX-механики («вот так с этой штукой будут работать») — пока только набросали. Ну и список точек, фокусов, из которых будем собирать интерфейс.
>Фокусы — это функциональные элементы, важные для работы интерфейса, точки, где реализуются основные сценарии, которые выполняют сразу много задач или хотелок пользователя или бизнеса. У нас [есть про них учебный курс](https://www.eduhund.ru/program/focus/?utm_source=sobakapav&utm_medium=site&utm_campaign=page), но он только для тех, кто уже освоил более простые инструменты дизайна: [модели информационных ожиданий](https://www.eduhund.ru/program/io/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) и [сценарии взаимодействия](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page).
_Карта фокусов_
Проверили портреты пользователей и UX-механики об заказчика. Узнаете этих пользователей? — Этого узнаю, этого нет. — Узнаете, вот так оно будет работать? — Вот это так, это нет, а это думать надо. По большей части мы не промахнулись ни с портретами, ни с механиками.
В общем, переняли виденье заказчика и сформировали образ продукта.
_Результаты первого брейншторма_
[Брейншторм](https://docs.google.com/document/d/1ew5nu1eN21o5XltWGZzRJQk7-IkjOVAyUSgxRt0zUFc/edit#)
## <a name="anchor3" />Развитие сюжета. Как будем работать?
Встретились с заказчиком и Product Owner'ом. Выяснили, что аналитика не нужна, потому что у них хорошая бизнес-экспертиза. Решили, что UI-дизайнер заказчика будет работать у нас — он хорошо знает продукт и, если что, поможет разобраться.
_Референсы_
Договорились делать сто картинок в неделю — для старта продукта это очень много. На порядок больше обычного.
Нужно просто взять UX-механики, которые мы уже придумали, и нарисовать по ним экраны.
«Да вы с ума сошли!» — подумали UX-дизайнеры, но вслух ничего не сказали, потому что были очень воспитанные.
_Онбординг_
## <a name="anchor4" />Внутренний монолог
Да, был велик соблазн пойти стандартным путем: провести нормальную аналитику, придумать структуру (нарисовать блок-схему, утвердить ее у заказчика), нарисовать к ней картинки по ТЗ. И так далее, и тому подобное.
Это заняло бы по меньшей мере несколько месяцев, но зато дало бы надежный предсказуемый результат.
Мы сделали совершенно иначе: вот вам бумажки, дорогие дизайнеры, ищите в них ценное и рисуйте, что хотите. Когда нарисуете — нужно будет взять и отсечь все лишнее.
Зачем мы перевернули стандартный процесс? Затем, что он заточен под слабую квалификацию заказчика. Грубо говоря, ему вначале надо показать скелет интерфейса, затем нарастить на него мясо, потом навести красоту.
Когда заказчик собаку съел на создании продуктов, так можно, но не нужно. Да, квалификация заказчика тоже имеет значение.
Спойлер: это сработало.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/fasting/9.png" />
<PhoneMockup image="/images/portfolio/fasting/10.png" />
</div>
<em>Challenge accepted!</em>
## <a name="anchor5" />Развитие сюжета. Первая неделя
С нашей стороны над проектом работали два UX-дизайнера.
Каждый хороший дизайнер хорош по-своему. Наши вот, брошенные в воду, быстро обнаружили, что в таком чудовищном темпе кто-то лучше генерирует идеи, а кто-то — их воплощает. Так что в команде довольно быстро наметилась специализация: один дизайнер рисовал скетчи на бумаге, второй — готовые экраны.
Экраны решили сразу делать в дизайне — то есть оформлять в соответствии с библиотекой элементов. Которую, соответственно, нужно было собрать как можно скорее.
«Да вы с ума сошли!» — подумал UI-дизайнер и даже вслух сказал, хоть и был очень воспитанный. Но все-таки пошел рисовать UI-kit.
_Фрагмент библиотеки элементов: шрифты, цвета, компоненты_
UI-дизайнер в первый же день собрал каркас библиотеки элементов — и дальше постепенно дополнял ее.
_Фрагмент библиотеки элементов: иллюстрации_
Мы рисовали UX, параллельно появлялись UI-элементы: контролы, кнопки — и дальше мы рисовали уже с ними. Не надо ждать, пока UI-kit будет полностью готов.
_Первая итерация. Эскизы для главной страницы приложения. А всего мы нарисовали несколько десятков экранов для главной_
Из-за высокой неопределенности в первую неделю было непросто. Но дизайнеры быстро втянулись, прониклись продуктом (кое-кто даже сам начал фаститься) — и дело пошло.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/fasting/14.png" />
<PhoneMockup image="/images/portfolio/fasting/15.png" />
</div>
<em>Первая итерация. Эксизы для трекера еды — два экрана из пятнадцати</em>
К концу недели нарисовали первую сотню экранов, показали заказчику, обсудили, он откомментировал. Пока только картинки, структуры еще не было.
Спойлер: на самом деле структура уже была, но мы ее пока не заметили.
## <a name="anchor6" />Лирическое отступление
Обсуждали с заказчиком вовлечение, геймификацию, офлайн-контекст, схему монетизации (сбор обезличенных данных). Придумали идею «второго я». Все это отразилось в наших интерфейсах.
Сложно было понять, что из задуманного заказчиком необходимо, что хотелки, что приоритетно, что пожелания. Вот для этого и нужны картинки — чтоб понять по реакции заказчика.
## <a name="anchor7" />Неожиданный сюжетный поворот
На второй неделе мы собрались было заняться структурой интерфейса. Посмотреть на механики, посмотреть на готовые картинки — и собрать из них стройную и логичную конструкцию…
…и тут мы поняли, что структура у нас уже есть. Оформилась, пока мы рисовали.
_Вот так рождалась структура_
Потому что мы работали над механиками, а не над кусками интерфейса. Не самый стандартный подход, но, собственно, это и есть UX. Не нарисовать побольше картинок, а придумать UX-механики для воплощения идей.
_Вот такой она получилась_
[Верхнеуровневая структура приложения](https://docs.google.com/document/d/1eeChtJV8-HSCyze3JS_JBk_0bxLXbYg5812vRd3wAGA/edit#heading=h.2da2myx52kgu).
Хорошо продуманные механики довольно естественно сложились в первый вариант структуры.
Мы описали сценарии, CJM.
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Придумали концепцию приложения: контент плюс ежедневные задания.
_Вторая интерация. Трекер еды_
Нарисовали еще сотню картинок, заказчик постоянно комментировал их в Figma. Сделали кликабельный прототип.
_Вторая итерация. Трекер еды другим манером_
## <a name="anchor8" />Внезапная развязка
К концу второй недели у нас была концепция приложения, структура приложения, кликабельный прототип, уверенность в UX-механиках. Мы начали делать карту страниц…
…и тут все закончилось. «Дальше мы сами», — сказал заказчик.
_Третья итерация. Не успели начать, как все закончилось_
Приложение Simple создано по нашим концептам. Вот оно, например, [на третьем месте в Топ-10 лучших приложений для интервального голодания](https://scrumdigital.com/blog/best-intermittent-fasting-apps/).
## <a name="anchor9" />Эпилог
Мы выполнили сложную интеллектуальную работу «понять, что делать» — и это сейчас был не сарказм. Понять, что делать, — не слишком заметная со стороны, но критично важная задача.
Мы создали структуру интерфейса, визуализировали общую концепцию продукта. Отталкиваясь от нашей работы, клиент продолжил развивать приложение.
Собственно, это и есть UX-дизайн — превратить идеи в структуру. Именно это, а не красивые картинки.
## <a name="anchor10" />