Интерактивная карта, на которой можно отметиться в любой точке мира

UX / UI

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

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

Сценарии взаимодействия

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

Гайды и визуальный концепт

Сервис кросс-платформенный, поэтому важно задать унифицированные и понятные правила визуального повествования. Для поддержания однородности и узнаваемости всех элементов для конечного пользователя мы разработали небольшой гайдлайн.

Прототипы

До того, как приступили к UI для всего сервиса, мы нарисовали ч/б прототипы, чтобы отработать различные гипотезы. В итоге наша карта разрослась с 26 ключевых экранов до 76 экранов для мобильной версии и ещё 56 для веб-десктоп версии в виде прототипов. При этом покрыты были только сценарные события, визуальные состояния мы решили оставить на этап UI.

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

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

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

Также для новых пользователей мы добавили функцию массовой загрузки фотографий с автоматическим определением локации и года из мета-данных, сводя процесс вхождения в сервис к минимуму усилий.

Новый логотип

Мы обновили логотип приложения и вложили в него больше образности, сделав что-то простое, лаконичное, содержащее небольшой ребус. Мы взяли название приложения и первые буквы слов, образовавших его. К ним мы добавили образ песочных часов, чтобы была привязка ко времени. Затем выделили графические формы, которые позволяют уловить эти образы и наложили графические формы друг на друга, чтобы получить единый образ и довели его до финального состояния

LOGO

Стайлгайд и брендинг

Для поддержки образа мы решили в заголовках использовать тот же шрифт, который взяли как основу для текстовой части лого. Цвет содержит классические для массовых сервисов цвета, при этом имеет яркие, но балансирующие оттенки — так получился запоминающийся узнаваемый образ за счёт градиента.

Типографика

Иконки

Цвета

#40d325

#04214b

#9da5b2

#ffffff

#0270ff

#33e5d3

#9bcce9

Результаты

В итоге у нас получилось 195 экранов для сервиса (мобильное и веб представления), показывающих все необходимые состояния и сводящие вопросы со стороны разработки к минимуму.