Контекст

Waypoint — TravelTech стартап, агрегатор для покупки билетов на поезд. Я выступал ключевым дизайнером интерфейса в B2C части продукта. Отрисовал экраны iOS приложения, проводил исследования вместе со своим дизайн-лидом и арт-директором.

Основные задачи

- Выяснить, какая аудитория пользуется подобными приложениями

- Понять, какие потребности потенциальные пользователи хотят закрыть с помощью приложения

- Как будет выглядеть пользовательский путь. Какими проблемы могу встретиться?

- Детально проработать архитектуру приложения

- Присвоить визуальный характер мобильному приложению

- Создать дизайн-библиотеку

- Отрисовать все экраны и состояние компонентов

UX, аналитика

Первым делом я, конечно, пошел проводить исследования. Использовал известные фреймворки типа Анализ персон, JTBD, User Flow, интервью с пользователем и так далее. Больше всего хочу отметить следующие:

User Journey Map

Построил путь пользователя, и предположил наиболее вероятные трудности, с которыми он может столкнуться. Тут же начал думать решение этих трудностей.

Конкурентный анализ (функционал)

Сравнивал функционал конкурентов, чтобы понять, какие функции критически важны для запуска MVP.

Прототипирование

Подробно расписал содержимое каждой страницы и выстроил в предположительный пользовательский путь. Смотреть в Figma в хорошем качестве.

Варфреймы и интерактивный прототип

На этом этапе из обычного прототипа мы делаем экраны. При этом, предпочтение визуалу мы отдаем меньше всего: здесь важно понять примерный вид каждого объекта и экрана, а так более детально подумать над структурой сервиса. Запустить в Figma.

UI, отрисовка

После аналитики приступил к отрисовке макетов. В начале отрисовки стояла задача перебрать как можно больше вариантов, отсмотреть как больше референсов и стилистических направлений, а после отрисовать ключевые экраны приложения:

Визуальная концепция

Дизайн-библиотека

После визуальной концепции, как визуальный характер у приложения утвержден, я начал работу над дизайн-библиотекой. Она содержит гайды, стили текста, переменные цвета и компоненты. Походу отрисовка библиотека пополнялась. Благодаря нее можно намного быстрее отрисовывать экраны, добавлять новые фичи. Также такая библиотека значительно упрощает работу разработчикам. В хорошем качестве в Figma.

Финализация макетов

На этом этапе отрисовываются все экраны и все состояние каждого объекта. Добавляются авто-лейауты. Предлагаю ознакомиться с ключевыми экранами проекта.

Все экраны (250+) в Figma

Иконка

Результат, вывод

По итогу я полностью спроектировал дизайн мобильного приложения, которое готово для передачи в разработку уже сейчас.