Концептуальный дизайн приложения для интервального голодания • Худеем Вместе
Вначале была идея. В конце — красивые картинки для интерфейса нового продукта. А что между идеей и картинками? UX-механики для воплощения идей, концепция продукта и структура интерфейса. Их создание — это, собственно, и есть UX.
~ 700 000 ₽
Создали концепцию и структуру интерфейса.
Контекст
Результат
Бюджет
Интерактивный прототип
Экспозиция
Фастинг — интервальное голодание, набирающий популярность способ сбросить вес. «Худеем вместе» — приложение под iOS для тех, кто фастится, и стартап, который его разрабатывает. Это кодовое название, настоящее сказать не можем.
Мы присоединились к проекту в самом начале, когда заказчик только начал собирать команду («Не хватает своих UX-дизайнеров, одолжите ваших»).
У заказчика еще не было ни офиса, ни юридического лица. А что было? Были:
UI-дизайнер;
Product Owner — который, правда, пока еще работал в другой компании, его нужно было дождаться;
общее представление о том, каким должен быть продукт и каким он не должен быть;
знание американского рынка — приложение предназначалось для него;
методология фастинга (в процессе), медицинское обоснование метода;
описание структуры ПО и айтишного решения приложения,
и вообще много хороших букв.
Контент: примеры тем дня
Google Docs
Хорошие буквы заказчика
Завязка
«Худеем вместе» пришли к нам за дизайном интерфейса задуманного приложения.
Заказчик точно знал, каким должен быть продукт и каким он не должен быть (например, точно не нужен был очередной калькулятор калорий). Но это было мозаичное такое знание: отдельные кусочки, из которых пока не складывалась общая картина.
Было сложно понять, как эта штука впишется в жизнь людей. А что мы делаем, когда не знаем, что люди делают с продуктом? Создаем портреты пользователей и описываем жизненные ситуации.
Портреты предполагаемых пользователей
Google Docs
Немного опасались промахнуться из-за того, что будущие пользователи — американцы, а мы все-таки нет (спойлер: не промахнулись).
Мы боялись сделать штуку, которой люди не будут пользоваться. Так что мы набросали UX-механики («вот так с этой штукой будут работать») — пока только набросали. Ну и список точек, фокусов, из которых будем собирать интерфейс.
Карта фокусов
Проверили портреты пользователей и UX-механики об заказчика. Узнаете этих пользователей? — Этого узнаю, этого нет. — Узнаете, вот так оно будет работать? — Вот это так, это нет, а это думать надо. По большей части мы не промахнулись ни с портретами, ни с механиками.
В общем, переняли виденье заказчика и сформировали образ продукта.
Брейншторм
Google Docs
Результаты первого брейншторма
Развитие сюжета. Как будем работать?
Встретились с заказчиком и Product Owner’ом. Выяснили, что аналитика не нужна, потому что у них хорошая бизнес-экспертиза. Решили, что UI-дизайнер заказчика будет работать у нас — он хорошо знает продукт и, если что, поможет разобраться.
Референсы
Договорились делать сто картинок в неделю — для старта продукта это очень много. На порядок больше обычного.
Нужно просто взять UX-механики, которые мы уже придумали, и нарисовать по ним экраны.
«Да вы с ума сошли!» — подумали UX-дизайнеры, но вслух ничего не сказали, потому что были очень воспитанные.
Начальный онбординг
Внутренний монолог
Да, был велик соблазн пойти стандартным путем: провести нормальную аналитику, придумать структуру (нарисовать блок-схему, утвердить ее у заказчика), нарисовать к ней картинки по ТЗ. И так далее, и тому подобное.
Это заняло бы по меньшей мере несколько месяцев, но зато дало бы надежный предсказуемый результат.
Мы сделали совершенно иначе: вот вам бумажки, дорогие дизайнеры, ищите в них ценное и рисуйте, что хотите. Когда нарисуете — нужно будет взять и отсечь все лишнее.
Зачем мы перевернули стандартный процесс? Затем, что он заточен под слабую квалификацию заказчика. Грубо говоря, ему вначале надо показать скелет интерфейса, затем нарастить на него мясо, потом навести красоту.
Когда заказчик собаку съел на создании продуктов, так можно, но не нужно. Да, квалификация заказчика тоже имеет значение.
Спойлер: это сработало.
Challenge accepted!
Развитие сюжета. Первая неделя
С нашей стороны над проектом работали два UX-дизайнера.
Каждый хороший дизайнер хорош по-своему. Наши вот, брошенные в воду, быстро обнаружили, что в таком чудовищном темпе кто-то лучше генерирует идеи, а кто-то — их воплощает. Так что в команде довольно быстро наметилась специализация: один дизайнер рисовал скетчи на бумаге, второй — готовые экраны.
Экраны решили сразу делать в дизайне — то есть оформлять в соответствии с библиотекой элементов. Которую, соответственно, нужно было собрать как можно скорее.
«Да вы с ума сошли!» — подумал UI-дизайнер и даже вслух сказал, хоть и был очень воспитанный. Но все-таки пошел рисовать UI-kit.
Фрагмент библиотеки элементов: шрифты, цвета, компоненты
UI-дизайнер в первый же день собрал каркас библиотеки элементов — и дальше постепенно дополнял ее.
Фрагмент библиотеки элементов: иллюстрации
Мы рисовали UX, параллельно появлялись UI-элементы: контролы, кнопки — и дальше мы рисовали уже с ними. Не надо ждать, пока UI-kit будет полностью готов.
Первая итерация. Эскизы для главной страницы приложения. А всего мы нарисовали несколько десятков экранов для главной
Из-за высокой неопределенности в первую неделю было непросто. Но дизайнеры быстро втянулись, прониклись продуктом (кое-кто даже сам начал фаститься) — и дело пошло.
Первая итерация. Эксизы для трекера еды — два экрана из пятнадцати
К концу недели нарисовали первую сотню экранов, показали заказчику, обсудили, он откомментировал. Пока только картинки, структуры еще не было.
Спойлер: на самом деле структура уже была, но мы ее пока не заметили.
Лирическое отступление
Обсуждали с заказчиком вовлечение, геймификацию, офлайн-контекст, схему монетизации (сбор обезличенных данных). Придумали идею «второго я». Все это отразилось в наших интерфейсах.
Сложно было понять, что из задуманного заказчиком необходимо, что хотелки, что приоритетно, что пожелания. Вот для этого и нужны картинки — чтоб понять по реакции заказчика.
Неожиданный сюжетный поворот
На второй неделе мы собрались было заняться структурой интерфейса. Посмотреть на механики, посмотреть на готовые картинки — и собрать из них стройную и логичную конструкцию…
…и тут мы поняли, что структура у нас уже есть. Оформилась, пока мы рисовали.
Вот так рождалась структура
Потому что мы работали над механиками, а не над кусками интерфейса. Не самый стандартный подход, но, собственно, это и есть UX. Не нарисовать побольше картинок, а придумать UX-механики для воплощения идей.
Верхнеуровневая структура приложения
Google Docs
Вот такой она получилась
Хорошо продуманные механики довольно естественно сложились в первый вариант структуры.
Нарисовали еще сотню картинок, заказчик постоянно комментировал их в Figma. Сделали кликабельный прототип.
Вторая итерация. Трекер еды другим манером
Внезапная развязка
К концу второй недели у нас была концепция приложения, структура приложения, кликабельный прототип, уверенность в UX-механиках. Мы начали делать карту страниц…
…и тут все закончилось. «Дальше мы сами», — сказал заказчик.
Третья итерация. Не успели начать, как все закончилось
Эпилог
Мы выполнили сложную интеллектуальную работу «понять, что делать» — и это сейчас был не сарказм. Понять, что делать, — не слишком заметная со стороны, но критично важная задача.
Мы создали структуру интерфейса, визуализировали общую концепцию продукта. Отталкиваясь от нашей работы, клиент продолжил развивать приложение.
Собственно, это и есть UX-дизайн — превратить идеи в структуру. Именно это, а не красивые картинки.
~ 700 000 ₽
Бюджет
«Несмотря на редкий для российского рынка уровень сложности задач, ребята из “Собаки” не спасовали. Был выбран продуктивный формат взаимодействия. Команда проектирования на удивление глубоко вдумалась, погрузилась в наши потребности и сумела приземлить наш довольно пространный вижн на конкретные макеты и гипотезы, дав очень много полезных идей как на макро-, так и на микроуровне».
Основатель стартапа
Создали концепт и структуру продукта за две с половиной недели.
Результат
Интерактивный прототип
Заказчик
Другие кейсы
Дизайн приложения для проверки и подписи документов • Easydocs
Разработали дизайн мобильного приложения для руководителей, в котором реализовали всего один пользовательский сценарий: читать документы и подписывать их ЭЦП.
Дизайн системы мониторинга пациентов в реанимации • Раиса
Провели юзабилити-исследование и разработали интерфейс медицинской системы для врачей-реаниматологов, которая собирает показания с прикроватных мониторов на один экран.
Дизайн приложения с инструкциями для медиков • #ALGOHELP
Разработали интерфейс приложения для врача-стоматолога, которое помогает спасать пациентов с помощью алгоритмов оказания неотложной медицинской помощи.
Дизайн электронной медицинской карты • МИАЦ
Разработали дизайн пользовательского интерфейса врача — спроектировали раздел «Анализы», который позволяет быстро разобраться в результатах исследований пациентов.
Дизайн банковского приложения с криптовалютой • Open Desk
Разработали дизайн и интерфейс мобильного финансового приложения со сложной многошаговой регистрацией, которое работает с криптовалютой.
Дизайн дашборда медицинской системы • Costa
Интерфейс для главного врача: разработали дашборд, который собирает организационные данные по больнице и упрощает аналитику.
Худеем вместе |
Анастасия ХлюкинаХудеем вместе 12.2014″>07.12.2014 Метки: Барабинск, диета, Куйбышев, Новый год, похудение
В новом наряде смотримся эффектно: для этого скорректируем немного фигуру.
Подробнее
Инна ВильХудеем вместе10.04.2014 Метки: диета, огуречная диета, худеем вместе
Оуречная диета — низкокалорийная, применять ее рекомендуется не чаще раза в год.
15 минут в день вашего времени из 24-х часов — подарок для стройности.
Подробнее
1.182 Похудеть вместе Стоковые фотографии и изображения
Портрет двух азиатских женщин в спортивной одежде. ПРЕМИУМ
Две азиатские женщины разного размера тела в спортивной одежде сидят здоровыми и пьют воду после тренировки дома вместе. диета и упражнения на дому concept.PREMIUM
Спортивные танцы на шесте – женщина и измерительная лента – изолированные на белом фоне – векторная иллюстрация искусства. баннер. контроль фигуры.PREMIUM
Толстая пара с лишним весом, обмотанная мерной лентойPREMIUM
Азиатская пара сидит и болтает после спортзалаPREMIUM
Две полные женщины тренируются с гантелями, сидя в студии, изолированы на белом фонеPREMIUM
Две азиатские женщины отдыхают от занятий йогойPREMIUM
Летний образ жизни, две подруги улыбаются и веселятся красивый закат на вершине горы в обтягивающих черных платьях. белая девушка и черная девушка с длинными косамиPREMIUM
Азиатская пара вместе занимается спортом домаPREMIUM
Пара вместе худеет. подходят афро мужчина и женщина, дающие пять после утренней пробежки возле реки. панорамаПРЕМИУМ
Дружба, персональный тренер, групповые тренировки, похудение, спорт и забота о здоровье. молодая спортивная женщина поддерживает и мотивирует свою подругу с избыточным весом во время пробежки на свежем воздухе. PREMIUM
Диетолог и ее пациент вместе планируют свою диету. PREMIUM
Дружба, личный тренер, групповые тренировки, похудение, спорт и забота о здоровье. две счастливые подруги ставят пятерку после пробежкиPREMIUM
Группа фигуристых женщин на тренировке по аэробике с гантелями в парке. вид сбоку лысой женщины, делающей упражнения с другими людьми на заднем плане на открытом воздухе. команда из трех негабаритных девушек, использующих фитнес-гири на открытом воздухе.PREMIUM
Ваша девушка рассчитывает, чтобы ее парень сделал планку дома.PREMIUM
Подходящая женщина поддерживает и мотивирует друга на тренировке. тренажерный зал, счастлив и улыбаюсь во время тренировки. толстые женщины заботятся о здоровье и хотят похудеть. ПРЕМИУМ
Азиатский парень инструктирует свою девушку заниматься спортом дома. PREMIUM
Концепция диеты и упражнений дома. две азиатские женщины разного телосложения в спортивной одежде здоровую пищу овощной салат после тренировки дома вместе.ПРЕМИУМ
Трое друзей уговаривают девушку не есть гамбургер. концепция диеты и женской дружбы. ПРЕМИУМ
Толстая и стройная женщина измеряет талию с помощью ленты. две счастливые подруги ставят пятерку после пробежкиPREMIUM
Персональный тренер помогает красивой женщине похудеть. ПРЕМИУМ
Два друга занимаются боксом в парке для спорта, здорового образа жизни и диеты. в домашнем интерьере.PREMIUM
Персональный тренер помогает женщине похудетьPREMIUM
Азиатская мама подходит и занимается йогой для похудения после родов новорожденного дома, мама, мама, упражнения и концепция здорового образа жизниPREMIUM
Подтянутые и толстые подруги бегают на улицеPREMIUM
Две худые и толстые азиатки бегают в парке на улице утромPREMIUM
Полная длина двух счастливых полных женщин, бегущих вместе на улице утромPREMIUM
Азиатская девушка-подросток бегает толстая и худая дружба бегает трусцой в паркеPREMIUM
Мужчина и женщина укрепляют руки на фитнес-тренировке. фитнес молодые люди делают отжимания в тренажерном зале, глядя на счастливые лица, упражненияПРЕМИУМ
Общий план усталой тучной молодой женщины, отдыхающей на скамейке после интенсивных упражнений с личным тренером на открытом воздухе в городском парке. тренировка от спортивной дамы для толстой женщины с большим животом в спортивной одежде. PREMIUM
Lifestyle, кавказская девушка в джинсовой куртке с принтом ангельских крыльев на спине, в джинсовых шортах. с распростертыми объятиями на вершине горы в великолепный летний закат. ПРЕМИУМ
Общий план усталой тучной молодой женщины, сидящей на скамейке после интенсивных упражнений с личным тренером на открытом воздухе в городском парке. тренировка от спортивной дамы для толстой девушки с большим животом в спортивной одежде.ПРЕМИУМ
Векторные мультяшные счастливые и улыбающиеся пары больших размеров. мужчина и женщина. фигуристые, толстые люди с избыточным весом в повседневной одежде. PREMIUM
Привлекательная мускулистая улыбающаяся фитнес-женщина с тренером, выполняющим тяжелые упражнения в современном тренажерном зале. силовой фитнес, спорт, обучение, образ жизниPREMIUM
Улыбающиеся пожилая женщина и джентльмен прыгают со скакалкой в фитнес-студииPREMIUM
Красивые спортивные женщины делают упражнения на белом фоне. Fitness.PREMIUM
Привлекательные и красивые девушки рассказывают о своих тренировках, отдыхая от нихPREMIUM
Инструктор по фитнесу на работе со спортсменкой в тренажерном залеPREMIUM
Две привлекательные и красивые девушки идут вместе и разговариваютPREMIUM
Две молодые азиатки в спортивной одежде готовят салат на кухне. активная красивая девушка сестра чувствовать себя счастливой и наслаждаться есть овощи здоровую пищу диету и худеть для ухода за здоровьем в домеPREMIUM
Поцелуй от партнера по фитнесу в качестве приза за хорошо выполненную тренировкуPREMIUM
Фитнес-тренировка с тренером в тренажерном залеPREMIUM
Азиатская активная подруга вместе занимается йогой и пилатесом дома. привлекательная девушка в спортивной одежде, использующая коврик, проводит свободное время, занимаясь спортом для здоровья и хорошего самочувствия в гостиной дома. ПРЕМИУМ
Женщина отжимается с помощью мужчины в фитнес-клубе. ПРЕМИУМ
Толстая пара с избыточным весом закусывает вкусными гамбургерами. с папой и ребенком вместе катаются на велосипеде, набор иконокPREMIUM
Летний образ жизни, молодая кавказская женщина с волнистыми каштановыми волосами в обтягивающем черном платье, наслаждающаяся красивым закатом на вершине горыPREMIUM
Две привлекательные и красивые девушки делают растяжку на деревянной скамейке.PREMIUM
Силуэты двух девушек, бегущих утром на улице.PREMIUM
Мужчина и женщина укрепляют руки во время фитнес-тренировки. фитнес молодые люди делают отжимания в тренажерном зале, глядя на лицо счастливые упражненияPREMIUM
Инструктор по фитнесу с девушкой на тренировке в фитнес-центреPREMIUM
Девушка с тренером на тренировке в тренажерном залеPREMIUM
Летний образ жизни, молодая кавказская женщина с волнистыми каштановыми волосами в обтягивающем черном платье , девушка позирует на закате на вершине горы. PREMIUM
Образ жизни, латиноамериканка с черной кожей, с красивыми длинными косами в волосах, одетая в обтягивающее черное короткое платье. молодой человек сидит в летний закат на вершине горы. ПРЕМИУМ
Две счастливые спортивные подруги в спортивной одежде с ковриками для йоги, сумками и бутылкой с водой на пляже. здоровый образ жизниPREMIUM
Красивые спортивные женщины делают упражнения на белом фоне. Fitness.PREMIUM
Поцелуй от партнера по фитнесу в качестве приза за хорошую тренировкуPREMIUM
Молодая девушка тренируется с тренером в тренажерном залеPREMIUM
Образ жизни, латиноамериканская девушка с черной кожей, с красивыми длинными косами в волосах, одетая в обтягивающее черное короткое платье. молодой человек сидит на летнем закате на вершине горыPREMIUM
Пара отжимается на тренировке в тренажерном залеPREMIUM
Фитнес-тренировка в тренажерном залеPREMIUM
Две азиатки практикуют медитацию домаPREMIUM
Две привлекательные девушки протягивают руку перед обучениеПРЕМИУМ
Пара вместе тренируется в фитнес-центреPREMIUM
Пара делает упражнения для мышц рук на фитнес-тренировкеPREMIUM
Четыре белые керамические миски в ряд с целыми и порошкообразными семенами чиа и льна на синем фоне студии и пространство для копирования. здоровье и суперфуд.PREMIUM
Портрет двух азиатских женщин в спортивной одежде.0003
Молодая толстая пара в спортивной одежде и вместе занимается йогой на лугу, медитируя под голубым небом. PREMIUM
Пожилая пара на прогулке с палками для скандинавской ходьбы. здоровый и активный образ жизни пенсионеров. семейный отдых на природе. оздоровительная ходьба для ускорения обмена веществ и похудения. счастливой старости.PREMIUM
Мужчина и женщина укрепляют руки во время фитнес-тренировки.PREMIUM
Спортивная женщина мотивирует свою подругу на пробежку на свежем воздухе. полезные семена для еды.ПРЕМИУМ
Концепция физических упражнений. Подростки катаются на велосипеде, чтобы похудеть в тренажерном зале. ПРЕМИУМ
Летний образ жизни, молодая кавказская женщина с волнистыми каштановыми волосами в обтягивающем черном платье, очень веселая и с поднятыми руками на закате на вершине MountainPREMIUM
Стиль жизни, белая девушка в джинсовой куртке и джинсовых шортах. портрет на красивом летнем закатеPREMIUM
Портрет двух азиатских женщин в спортивной одеждеPREMIUM
Две красивые спортивные женщины в спортивной одежде с идеальным телом вместе тренируются на открытом воздухеPREMIUM
Совместная тренировка по фитнесу в группе спортсменовPREMIUM
Снимок молодой женщины, тренирующейся на шведской стенке. фитнес-женщина тренирует пресс с поднятием ног. fit andhealthPREMIUM
Измерительная лента – женщина, занимающаяся фитнесом – изолирована на белом фоне – векторная иллюстрация искусства. контроль фигуры.PREMIUM
Женщины и мужчины соревнуются в выносливости на фитнес-тренировках. PREMIUM
Крупный план: небольшая тарелка, полная золотых семян льна, окруженная двумя мисками семян чиа и порошком льна на синем фоне студии. здоровые семена, чтобы есть суперфуд.ПРЕМИУМ
Пара с избыточным весом со здоровой пищей и рулеткой. ПРЕМИУМ
Два азиатских тренера, мужчина и женщина с избыточным весом, вместе тренируются с гантелями и мячом в современном тренажерном зале, счастливы и улыбаются во время тренировки. толстые женщины заботятся о здоровье и хотят похудеть.PREMIUM
Девушка в хорошей форме на фитнес-тренировке в тренажерном залеPREMIUM
Молодой красивый инструктор по фитнесу организует занятия фитнесом для девушек, которые хотят похудеть. концепция тренировок в тренажерном залеPREMIUM
Летний образ жизни, молодая кавказская женщина с волнистыми каштановыми волосами в обтягивающем черном платье, наслаждающаяся прекрасным закатом на вершине горы. ПРЕМИУМ
Образ жизни, латинская девушка с черной кожей с красивыми длинными косами в волосах, одетая в обтягивающие черные шорты одеваться. молодая женщина позирует с косами на ветру на летнем закате на природеPREMIUM
Сочетание людей с избыточным весом и худеющих вместе.PREMIUM
Летний образ жизни, двое друзей улыбаются и веселятся на красивом закате на вершине горы в тесноте черные платья. белая девушка и черная девушка с длинными косамиPREMIUM
Йога, растяжка и упражнения для пожилых пар, оздоровительные и фитнес-тренировки для похудения или здоровья на пенсии. задний двор, сад и счастливые, пожилые люди или друзья с пилатесом или тренировками на свежем воздухе. ПРЕМИУМ
Образ жизни, латиноамериканская девушка с черной кожей, с красивыми длинными косами в волосах, одетая в обтягивающее черное короткое платье. девушка развевает косы на ветру на летнем закате на природе. PREMIUM
Летний образ жизни, молодая кавказская женщина с волнистыми каштановыми волосами в обтягивающем черном платье, чувственно наслаждающаяся красивым закатом. PREMIUM
Две девушки идут вместе по красной беговой дорожке, крупным планом.
15 вдохновляющих фотографий пар, которые изменили свое тело до и после похудения. это нелегкий подвиг, но привести себя в форму становится немного легче, если рядом с вами есть партнер. Вы можете заглянуть в Instagram и везде увидеть подходящие пары, но не все из них показывают, с чего они начинали, прежде чем разорвались. Некоторые люди вместе теряют сотни фунтов и поднимают свое здоровье на совершенно новый уровень.
Сегодня мы хотим продемонстрировать эти истории и, надеюсь, вдохновить вас этими удивительными фотографиями пар до и после похудения.
1. Какую разницу могут иметь четыре года и 240 фунтов!
Сообщение, опубликованное Хизер (@heather_sleeved_3.30.15) на 25 апреля 2017 г. в 4:43 утра по тихоокеанскому времени
2. Вперед, ребята! Эта пара похудела на 220 фунтов, и им понадобилось всего три года.
Пост, которым поделилась Алисса ? 160 фунтов (@alyssaintraining) на 15 июня 2018 г. в 9:33 утра по тихоокеанскому времени
3. Как может подтвердить эта теперь подтянутая пара, тяжелая работа определенно окупается!