Привет! Меня зовут Игорь Шпехт.
«Возможно это провал» — мой дневник о том, как я пытаюсь не сдаться и построить свой первый стартап. У меня нет MBA, инвесторов и идеальных условий — только маленькая команда, авантюризм и упрямое желание довести начатое. Возможно, это провал. А возможно — нет.
Что было раньше
Если вы только присоединились, коротко так:
Моя история началась в Сибири. Мы с друзьями создали сайт мониторинга воздуха и сделали первый девайс — простой датчик с пиксельным экраном. Потом я оказался в Германии в попытке масштабировать проект. Комнату превратил в мини-производство. Это был лучший год для меня, но неудачный для проекта.
Потом — возвращение, выгорание и ощущение, что всё кончено. Но нет.
Продолжаю делать устройство, которое показывает правду о воздухе — это Atmy.
Друзья, кажется, я снова нырнул в свой фирменный провал ?
Не потому что всё плохо или руки опустились — как раз наоборот.
Если быть честным, вы, возможно, даже не заметили моего исчезновения. Но я всё равно хочу объясниться. Писать я собирался каждую неделю про актуальное в нашем стартапе, но все вышло из под контроля..
Я вернулся, чтобы сказать важное: мы развиваемся. Медленно, монотонно, иногда до скуки — но движемся вперёд. И да, последние недели решили проверить меня на прочность: несколько бессонных ночей официально доказали, что мой организм не сертифицирован для такой эксплуатации ?
Если вам совсем не хочется читать этот текст, в конце статьи есть ссылка на проект. ?
А теперь к работе
Неделю назад я написал нашему программисту: «Знаешь, наверное, к концу следующей недели я сделаю дизайн всего приложения».
Да, отличное начало для истории о том, как один экран может выбесить.
На этот раз я заново собирал экран добавления и настройки датчика. Вроде бы всё понятно: логика знакома, предыдущая версия уже была, мне оставалось лишь «сделать редизайн».
Как же я ошибался. В попытке улучшить пользовательский опыт я открыл врата ада. Но — обо всём по порядку.
Добро пожаловать в историю моего упрямого экрана.
Как человек вообще взаимодействует с датчиком
(рассказываю по-простому)
Начало работы
Сценарий всегда один: нужно подружить датчик с приложением.
Открываешь главный экран → жмёшь «добавить датчик» на нижнем таббаре → приложение сразу начинает сканировать BLE-устройства. Если датчик рядом — всплывает почти мгновенно.
Нашёлся? Отлично.
Дальше по классике: выбираешь Wi-Fi, вводишь пароль. Как только датчик выходит в интернет, сервер активирует устройство, прописывает координаты, принимает первые данные… Минутка — и ты уже видишь экран его настройки.
Дальнейшая жизнь с датчиком
После подключения он появляется на главном экране.
Рядом с устройством — общение идёт по BLE, далеко — через облако. Разница минимальна, кроме одного нюанса: удалённо нельзя менять Wi-Fi.
В целом взаимодействие простое: ты открываешь приложение, а датчик уже работает.
Идея именно в этом — убрать всё лишнее и не раздражать человека.
Это была лёгкая часть.
Теперь — Figma.
Disclaimer
Если вы уже пару лет носите гордое звание «UX/UI дизайнер» и открыли эту статью с надеждой ухватить свежий инсайт или какой-то магический фигма-трюк, то… ну, возможно, вы не туда свернули.?
Зато ваш опыт точно пригодится мне — вы можете смело поделиться им в комментариях. Критика, замечания, подсказки — всё это помогает мне не застрять в собственных заблуждениях.
«Сделаю за пару вечеров».
Спойлер: нет.
Я подумал: «Да что там, обычный раздел. Пересоберу — и готово».
Потрясающе неправильная мысль.
На сценарий настройки я выделил себе три плотных рабочих вечера. И как же я ошибался. Надо завязывать думать о каждом разделе приложения как о чём-то «незначительном». Так не работает.
Первый блок — управление экранами
Пользователь сам решает, какие данные отображаются, в каком порядке и с какой частотой переключаются экраны.
Был старый сценарий с плитками. Работал нормально — пока экранов было пять. Но стоило добавить новые модули, как вся конструкция начала разваливаться.
Я понял: старый подход придётся выбрасывать.
Не допиливать.
Не «чуть улучшить».
Выбрасывать.
Каждое решение ломало другое. Каждая идея требовала пересобрать предыдущую. Каждый «мелкий уточняющий вопрос» от разработчика превращался в снежный ком.
Drag & drop — нужно. Тайминги — нужно. Индивидуальные состояния — нужно.
И вот здесь экран упёрся так, что у меня ушло два полноценных вечера только на поиск логики, которая не рухнет под собственным весом. Нужно заложить «резиновый» модуль, чтобы без проблем можно было добавлять новые экраны.
Решение — информационные модули.
Выбор модулей отображения
Каждый блок — отдельный модуль:
Air Quality (AQI)
PM2.5-range
VOC-range
Weather
Humidity
Pressure
AQLI Index
Time Display
Пользователь включает то, что нужно, и отключает лишнее. Кому-то важен только PM2.5 и погода, кому-то — полный набор, а кто-то использует часы (это я).
Активные модули подсвечены, неактивные приглушены.
Drag & Drop — порядок модулей
Настроить всё под себя можно простым перетаскиванием. Порядок в списке = порядок отображения на устройстве.
Хочешь, чтобы погода была первой? Потяни вверх. Не нужен модуль? Выключи одним тапом. Интерфейс становится живым и понятным без объяснений (возможно это не так).
Настройка длительности показа экранов
Поскольку главный экран листает модули циклично, пользователь задаёт интервал:
5 / 10 / 20 / 30 секунд
Короткий — когда нужно быстро.
Длинный — когда раздражает частая смена экранов.
Экран Hotspot Settings
Этот раздел, на удивление, оказался самым понятным и почти мирным. Здесь я сознательно ушёл от классического пути «каждой настройке — по отдельному экрану», где в итоге сам разработчик начинает путаться в переходах, а пользователь тем более. Это как приложение "Умный Дом" от Яндекс - можно часами проводить в настройках одной умной колонки.
Мне хотелось другого: чтобы человек видел главное и управлял датчиком в одном окне, не проваливаясь в бесконечные настройки.
Так в блоке Wi-Fi появился ключевой параметр — уровень сигнала:
красный — плохой сигнал;
синий — хороший.
Для нашего устройства это критично: слабый сигнал = нестабильные данные.
Остальные параметры я аккуратно «спрятал» в всплывающие окна Bottom Sheet — они открываются по запросу, не перегружая экран, но всегда под рукой, когда нужно докрутить детали.
Здесь собирается всё управление устройством:
Wi-Fi Networks
Выбор сети, уровень сигнала.Monochrome Mode
Чёрно-белый AQI для минимализма и спокойствия.Automatic Brightness
Автоподстройка яркости.Temperature Units
Цельсий или Фаренгейт.Pressure Units
Синхронизация с графиками.12-hour Clock Format
24h или 12h.Time Zone
Автоматическая, с возможностью вручную изменить.Display Off Schedule
Чтобы дисплей не светил ночью.
Немного референсов, которых я раньше не знал
После первой публикации два человека написали мне в телеграм-чат и прислали ссылки на сайты с интерфейсными примерами. Я честно не знал про такие ресурсы — но они спасли работу над разделом настройки.
Если вы пока тоже о них не знали, держите:
Если есть еще крутые ресурсы, поделитесь ими в комментариях или нашем ? ламповом чате Atmy Hub.
Идём дальше: экран ещё не закончен, а поставленные мною же сроки уже вышли.
Состояние датчика
Состоит из двух частей: Status Hotspot и About Hotspot.
Status Hotspot
Tokens Earned
Количество токенов за стабильную передачу данных. Новый элемент токеномики Atmy.Data Quality Index
Оценка качества данных (Low / Medium / High). Завязана на стабильность сигнала и полноту метрик.Matter
Статус интеграции с умным домом. Если подключено — всё, датчик в экосистеме.
About Hotspot
Location
Device Model
Name Hotspot
Device ID (с кнопкой копирования — must-have)
Software Version
Hardware Version
Финишная прямая
Страница почти готова, осталось два важных элемента:
Support Mode
Включается для техподдержки. Дает специалистам расширенные данные. Пользователя лишний раз не трогаем — всё, что можем, определяем сами.
Firmware Update
Вынесено отдельно, максимально заметно, пользователь сразу видит, что доступна новая версия.
Deactivate Hotspot
Удаление устройства и отвязка от сервера — для смены места или прекращения использования.
Финал
Экран я всё-таки добил через неделю. А дальше началась самая унылая часть: монотонная отрисовка системных элементов, сценариев сопряжения и бесконечное прототипирование связей. Не знаю, как у других дизайнеров, но для меня этот этап всегда даётся через силу — он выматывает куда больше, чем сама концепция.
В какой-то момент я просто психанул и на несколько дней всё отложил. Именно этот раздел оказался самым тяжёлым, и не знаю, как вы, а я всё больше понимаю: сильный дизайнер с дисциплиной и порядком в проекте должен получать хорошие деньги.
А я работаю бесплатно — скорее даже за свои — но для любимого проекта.
Чтобы не перегружать статью и тебя уважаемый читатель, я просто выложил проект в Figma в открытый доступ — и буду обновлять его по мере работы.
Если этот проект окажется вам полезен — значит, всё было не зря. Честно, я на это рассчитываю.
Но ещё больше надеюсь, что вы поделитесь своим опытом, покритикуете решения и подскажете, где улучшить. Возможно, ваши идеи войдут в текущую версию и помогут сделать Atmy удобнее для людей.
Надеюсь написать новую статью через пару недель. Есть сдвиги по производству стекол для датчика. Увидимся✌️
Я всегда отвечу на вопросы, приму критику и с удовольствием получу от вас советы и знания в нашем маленьком телеграм-чате: https://t.me/atmyhub. Буду рад с вами там поболтать ?