<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Январь-Март 2024 г.
</aside>
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Направление: UX/UI дизайн
</aside>
Новая программа домашних и зальных онлайн-тренировок с научным подходом и упором на поддержку и мотивацию.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Создать функциональный и удобный дизайн приложения для блока “Профиль”
</aside>
1 этап. Обсуждение задач и целей проекта с клиентом. Интервьюирование и брифинг.
2 этап. Сбор референсов и дальнейшее обсуждение их с клиентом.
Обсуждение с клиентом всех UX-нюансов и UI-предпочтений. Определение задач и целей.
На этом этапе клиент самостоятельно нашел свой “идеальный референс” и, отталкиваясь от него, я уже собрала базу похожих. Далее при обсуждении была утверждена данная стилистика.
3 этап. Работа над концептом из 3-х тестовых экранов.
4 этап. Обсуждение концепта и дальнейший ход действий с клиентом.
5 этап. Получение ****полного технического задания и начало работы над ним.
6 этап. Коммуникация с командой дизайна и разработки. Согласования. Обсуждение правок и внесение их в проект.
Для начала работы было принято решение сделать 3 тестовых экрана (программа тренировок, сведения о тренажере, режим тренировок), которые содержали ряд вариаций и сценариев относительно этих экранов.
После дискуссий по концепту был переработан подход к дизайну. Также было принято решение, что в данном проекте необходимо сделать упор с акцентом на удобство пользователя и минимизировать контраст UI части.
Изучение технического задания и начало работы над ним. При возникновении вопросов обращение к ответственному лицу и дальнейшее обсуждение.
На данном этапе происходило тесное взаимодействие с дизайнером и разработчиком. Утверждение, обсуждение деталей и доведение проекта до желаемого результата.
7 этап. Сдача и утверждение проекта.
Успешное утверждение проекта в сроки.
Была проделана объемная работа над данным блоком. Далее будут показаны экраны разных сценариев и состояний.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Главн. экран профиля для парней
</aside>
1 экран невведенное инфо. 2 экран введенное инфо.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Главн. экран профиля для девушек
</aside>
1 экран невведенное инфо. 2 экран введенное инфо.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Экран Редактирование данных
</aside>
На этот экран мы попадаем, когда нажимаем на иконку редактирования на главном экране профиля.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Экран Хобби и Цели
</aside>
Обычное и активное (при выборе) состояние (Хобби).
На этих экранах мы оказались после того, как решили отредактировать свои хобби и цели в редактировании.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Замеры для девушек и для парней
</aside>
Этот экран появляется когда мы хотим добавить замеры с главной профиля. Тут мы можем посмотреть все добавленные замеры пользователем, а также удалить или отредактировать какие-то из них.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> График замеров
</aside>
Два экрана с доступным графиком и его заглушкой, когда данных о минимальном кол-ве замеров нет, то появляется такой сценарий.
На активном экране графика можно выбрать интервальное время анализа (неделя, месяц и т.д.), а также посмотреть как менялся каждый параметр тела за это время.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Добавить замер (раскрытое окно) для парней и девушек
</aside>
При добавлении замера появляется окно для введения параметров, а также можно отредактировать дату.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Выбранный замер (раскрытое окно) для девушек и для парней
</aside>
Здесь пользователь может увеличить выбранный замер и при необходимости добавить фото (при их отсутствии), отредактировать или удалить.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Добавить фото (раскрытое окно) для всех
</aside>
Пользователь выбирает уже из предыдущего раскрытого окна иконку “добавить фото”.
<aside> <img src="/icons/compose_gray.svg" alt="/icons/compose_gray.svg" width="40px" /> Экран Фитбаллы (персональный разбор)
</aside>
За собранные Фитбаллы можно купить персональный разбор, но нужно накопить 200 шт. На экране показано их количество и сколько нужно еще собрать. При полном количестве опция “получить” становится активной. В этот раздел мы попадаем из блока фитбаллы из главного экрана профиля.