Один, на замену подрядчику
Фиджитал-центр
MVP мобильного приложения для центров федеральной программы. Предыдущий подрядчик не справился за несколько месяцев, я спроектировал заново, один, за месяц с небольшим.
- Продуктовый дизайн
- UI/UX
- Мобильные интерфейсы
Что за продукт
Федеральная программа под кураторством Минспорта, завязанная на Игры Будущего: сеть центров, где физический спорт и киберспорт стоят рядом. Мини-футбол, баскетбол и волейбол рядом с FIFA и CS, и человек развивается в обоих направлениях сразу, в любой пропорции.
Что такое фиджитал
Слово сложено из двух английских: physical и digital. Физический спорт и киберспорт, сведённые в одну дисциплину и в одно место.
Человек играет матч в FIFA, а через час выходит на поле в том же центре, и прогресс считается по обеим половинам сразу.
Клиент пришёл в панике
Предыдущий исполнитель занимался проектом несколько месяцев и не сделал. Нужен был MVP, но насыщенный, чтобы центр вышел на запуск.
Сделал один, за месяц с небольшим. Работа 2022 года, показываю как есть.
Что я сделал
Разобрал требования с нуля. Архитектуры не было: сидел с сотрудницей заказчика и разбирал каждый пункт принесённой блок-схемы.
Роли и прогресс физика и киберспортсмена в задаваемой пропорции, достижения, задания, рейтинги.
Экономика и бронирование: кошелёк, бронь поштучно и на команду, приглашения, оплата.
Нулевое и максимальное состояние. Пустой экран и есть тот, который человек видит первым.
Центры
Программа федеральная, и центры под неё строятся по стране. Приложение проектировалось под них, поэтому показываю не только экраны.
Часть центров уже стоит, часть пока в рендерах. Внутри одно и то же: поля под мини-футбол, баскетбол и волейбол, а рядом киберзал, и человек за вечер бывает в обоих.
- 60регионов на единой платформе
- 20к+спортсменов в экосистеме
- 450+мероприятий через платформу
От хаоса к рабочему MVP
Актуальной продуктовой архитектуры не было. Принесли блок-схему, в которой слова есть, а смысла нет: сидел с сотрудницей заказчика и разбирал каждый пункт.
Это повторяется из проекта в проект: предметное знание лежит в головах, и вытащить его можно только разговором. Итог разбора и есть главный артефакт кейса, экраны тут вторичны.
Схему можно приближать и таскать. Нажмите на неё, дальше работает колесико.
- 70экранов в MVP
- 50+механик и сценариев
Нажмите, чтобы приближать колесиком
Семьдесят экранов
Весь MVP одним листом. Столько экранов понадобилось, чтобы центр вышел на запуск: роли и прогресс, достижения и задания, бронирование, кошелёк, турниры, настройки, пустые состояния.
Вход и регистрация
Войти можно по телефону или по почте, и это один и тот же путь, повторённый в двух каналах. Первый экран общий, дальше пары: слева телефон, справа почта.
Третья кнопка на входе это Phygital ID. Порядок кнопок собран под то, чем пользуются чаще: телефон крупной, ID второй, почта строкой без кнопки.
Три входа, и они не равны. Отсюда расходятся оба пути ниже.
Телефон. Номер и код, пароля на этом пути нет вовсе.
Почта. Тот же экран, другое поле.
Код из СМС. Повторная отправка рядом с полем.
Код из письма. Экран повторяет телефонный, меняется строка сверху.
Регистрация и второй канал
Форма регистрации у двух путей разная ровно на одно поле, а после неё каждый добирает недостающий канал. У центра в итоге есть и телефон, и почта, каким бы путём человек ни вошёл.
Пришёл по телефону: в форме есть почта. Плюс предупреждение внутри формы: при первом посещении центра данные сверяют по паспорту.
Пришёл по почте: поля почты нет. Она уже известна, спрашивать второй раз незачем.
Почта пригождается в компьютерном зале. На неё уходит временный пароль для клубного компьютера: приложение живёт в телефоне, а половина центра это киберзал.
Телефон подтверждают после формы. Поле и код на одном экране: шаг служебный.
Центр, направление, дисциплины
Регистрация формой не заканчивается. Дальше человек выбирает центр, задаёт пропорцию физики и киберспорта, отмечает дисциплины и берёт аватар. Это те самые роли и прогресс, только на входе.
Карта и список это один выбор, показанный дважды. Центр ищут то по расположению, то по тому, что внутри: наборы у них разные.
Список нужен, когда карта не помогает. Решает не расстояние, а есть ли нужная площадка: ПК, мини-футбол, PS5, стритбол. В карточке сразу и адрес, и набор.
Та самая пропорция, ставшая экраном. Физик, Умник, Универсал: 75 на 25, 25 на 75 и поровну. Направление меняют раз в сезон, и срок стоит тут же, чтобы выбор не читался как навсегда.
Дисциплины идут парами. FIFA плюс мини-футбол, NBA плюс стритбол. Не больше трёх: от них зависят задания и рейтинги, и выбор «всё сразу» обесценил бы и то и другое.
Аватар из трёх заготовок. Своей загрузки в MVP нет, а значит нет и модерации. Лицо у человека при этом появляется с первого дня.
Главные экраны
Профиль перекрашен под направление: у Умника фиолетовый, у Физика синий. Цвет держится и в карточке, которой делятся.
Уведомления сдвигают содержимое вниз. Они приходят в тот же экран, а не всплывают поверх него: приглашение в компьютерную зону человек принимает или отклоняет прямо в ленте, не проваливаясь никуда.
Фиджитал-карточка собрана под скриншот. Ник, команда, возраст, достижения, очки: этим делятся, и жить оно должно уже вне приложения.
Направления три, на листе показаны два. Третье это Универсал, ровно пополам, и профиль у него устроен так же.
Вход в зал
К моменту проектирования не было решено, как именно человек проходит турникет. Поэтому нарисованы оба пути сразу: телефон считывает код турникета и турникет считывает код с телефона. Какое оборудование встанет в центрах, выяснилось бы позже, а макеты нужны были раньше.
Пока не активен. До первого посещения код не работает: аккаунт верифицирует администратор по паспорту. Экран говорит не «ошибка», а что именно пойти и сделать.
Телефон считывает турникет. Рамка наведения поверх живого кадра, дальше проход.
Либо наоборот, турникет считывает телефон. Тот же вход, другая сторона. Второй вариант стоил одного экрана и снял зависимость от неизвестного железа.
Уведомления разобраны по типам. Приглашение принимают или отклоняют на месте, бронь напоминает о себе, задание и совет ведут внутрь. Сверху фильтры: смешивать это в одну ленту бессмысленно.
Бронирование
Зона, дата, время, пакет, место. Время берут поминутно или пакетом, место поштучно или сразу несколько. Несколько это уже своя команда: буткемп на пятерых или целое поле на двенадцать человек.
Зоны одним меню. Компьютеры, приставки, VR, мини-футбол, стритбол, воркаут. Половина цифровая, половина физическая, и человек выбирает из общего списка.
Дата общая для всех центров. До этого шага платный и бесплатный ведут себя одинаково, дальше расходятся.
Поминутно. Начало и конец крутилками, под ними сразу цена и баллы, которые начислят.
Или пакетом. Час, два, четыре фиксированными блоками, для тех, кто не хочет считать минуты.
Место или несколько. Занятые красным, свободные белым, выбранные зелёным. Внизу счёт: сколько мест и сколько это стоит.
Платный центр и бесплатный
Центры бывают платные и бесплатные, и это не два разных приложения. Экран один, разница только в деньгах: где-то они есть, где-то их нет.
Отдельного макета под второй тип центра не рисовалось. Тот же шаг, тот же порядок, те же элементы, просто часть данных не приходит.
Платный: пакет с ценой. У каждого блока времени цена и баллы за тренировку.
Бесплатный: тот же пакет. Остаются длительность и сам выбор.
Платный: место со счётом. Внизу сумма и баллы за бронь.
Бесплатный: место без счёта. Считаются только сами места.
Чекаут
Саммери одно, а собирается по-разному: платный центр против бесплатного, место против целого поля. Плюс два исхода, потому что оплата проходит не всегда.
Оплата складывается из трёх источников сразу. Счёт, баллы и карта включаются переключателями, а не выбираются по одному: часть суммы можно закрыть баллами, остальное картой. Курс баллов написан прямо у переключателя, а не в правилах.
Платный центр. Центр, время, места, а под ними три источника оплаты и итог. Кнопка ведёт к оплате.
Бесплатный центр. Верх тот же, оплаты нет вовсе. Меняется и глагол на кнопке: не «перейти к оплате», а «забронировать».
Целое поле вместо мест. Строка мест превращается в зону и вместимость, двенадцать человек. Остальное саммери не меняется.
Команда начинается здесь. Участников зовут не до брони, а после: сначала место занято, потом к нему собираются люди.
Не удалось. Экран говорит, что именно случилось и кто выйдет на связь. Без этого человек идёт бронировать второй раз и платит дважды.
Участники брони
Если забронировано целое поле или несколько компьютеров, к броне собирают людей. Ищут по никнейму, тому самому, который придумывали при регистрации.
Счётчик мест виден всё время поиска. «Добавлено 1 из 12» стоит над строкой, потому что вместимость пришла из брони: сколько мест занял, столько человек и зовёшь.
Сначала недавние. Список открывается на тех, с кем уже играли: состав чаще повторяется, чем меняется, и искать в этом случае нечего.
Поиск по никнейму. Ник это и есть опознание в продукте: телефон и почта нужны центру, а игроки друг друга знают по нику.
Добавленные собираются тут же. Кнопка у каждого меняется на «Отменить», состав виден целиком до сохранения.
Бронь с составом. Открывается из уведомления. Отсюда запускают сессию, меняют участников и делятся бронью.
Отмена отдельным экраном. Действие необратимое и задевает всех, кого позвали, поэтому подтверждение, а не кнопка в общем ряду.
Общие страницы
Баллы, достижения, таблица лидеров, турнир и команда. Это уже не шаги маршрута, а места, куда возвращаются: их и показываю одним листом.
У баллов написан курс и срок. 500 токенов за 100 очков рейтинга, дата, до которой баланс жив, и условие: конвертировать может не каждый, нужен рейтинг. Всё это на одном экране, а не в правилах.
В таблице лидеров человек всегда есть. Сверху первые места, ниже своё окружение вместе со своей строкой: список без себя самого читать незачем.
У турнира требования лежат рядом с записью. Команда пять человек, рейтинг не ниже 1500, срок подачи. Отказ по этим пунктам должен случаться до заявки, а не после.
