Разработка UX/UI дизайна для приложения «В.месте»
Бренд
Вместе
Индустрия
Dating & Networking (Знакомства и нетворкинг)
Релиз
2024
О проекте
В мире, где люди проводят большую часть жизни, не выпуская из рук смартфонов, живое общение становится как никогда ценным. В.месте — это мобильное приложение, которое поможет легко находить новых знакомых с общими интересами и организовывать с ними встречи в реальной жизни. Мы полностью продумали UX/UI дизайн для этого проекта, чтобы каждый шаг — от поиска до самой встречи — был простым, удобным и, главное, приятным.
Задача
1.
разработать сценарии для основного функционала приложения;
2.
продумать все экраны интерфейсов и их состояния;
3.
создать дизайн-систему, которая будет служить основой для дальнейшего развития продукта.
Что мы сделали
Создали универсальный дизайн для iOS и Android — яркий и выразительный, но без ухода в мультяшность и детскость.
Предусмотрели все возможные сценарии взаимодействия для разных групп пользователей (и участников, и организаторов встреч) и переходы между страницами.
Создали компактную дизайн-систему проекта, чтобы минимизировать ошибки и неверные интерпретации при разработке
Дизайн и функционал приложения
Дизайн: поиск баланса между минимализмом и живостью
Дизайн хотелось сделать ярким и выразительным, но без лишней мультяшности и детскости. А кроме того, нужно было сохранить баланс между минимализмом и живостью, чтобы приложение выглядело привлекательно, но не сухо. При этом минимализм не нужно путать с банальностью — иногда, чтобы создать чистый и тщательно проработанный минималистичный дизайн, требуется до 10+ итераций одного экрана, прежде чем появится финальная версия. Важно было также сохранить узнаваемость, поэтому мы выбрали нестандартную цветовую схему — зелёный с фиолетовым, чтобы добавить яркости и уникальности.
Функционал приложения
Здесь нашей задачей было сделать поиск встреч по интересам максимально быстрым и удобным для пользователей, без сложных фильтров и настроек. Ведь именно для этого и создавался проект — дать пользователям возможность организовывать встречи с новыми знакомыми по интересам в любом городе России, либо откликаться и посещать организованные встречи.
Требования и ограничения, которые определили итоговый дизайн и функционал приложения
Их было несколько:
Не усложнять пользовательские сценарии — сделать их интуитивными, удобными и доступными даже для тех, кто с приложениями на «вы».
Не перегрузить деталями — мы все же стремились к минимализму.
Создать универсальный дизайн для iOS и Android — объединить лучшие решения обеих платформ, которые все больше сходятся по стилю и подходам.
Использовать белый фон, добившись этим максимальной чистоты. Обычно для таких приложений активно используют слоистость (градация серых фонов). Мы же решили уйти от визуального «шума» и «грязи».
Максимально избегать использования теней, чтобы визуально подчеркнуть простоту и лёгкость.
Сделать сложный фильтр функциональным, но при этом лёгким и воздушным, как и форму для создания новых встреч.
Сделать удобными обе роли пользователей — и участника, и организатора встреч.
Структура приложения и карта переходов
Одной из ключевых задач при разработке приложения было предусмотреть все возможные сценарии и переходы между страницами, чтобы пользователи могли легко ориентироваться в различных ситуациях.
Визуализация пользовательского пути в приложении
Каждая встреча в приложении имеет несколько состояний — от этапа ожидания до публикации и начала встречи. Мы предусмотрели возможность подтверждения участия всех участников прямо в приложении.Благодаря тщательно продуманной структуре переходов, пользователи легко находят нужные функции и могут быстро взаимодействовать с различными элементами приложения. Это значительно улучшает пользовательский опыт, поскольку делает приложение простым и удобным. А пользовательский опыт — это не просто удобство, по сути, он определяет успех продукта на рынке.
Как мы оптимизировали навигацию и переходы
Мы постарались сделать все переходы внутри приложения простыми и логичными. В тех местах, где другие приложения требуют 5–10 шагов, мы сократили их до 2–5. Так что у пользователя просто нет шансов уйти далеко в лес и заблудиться в приложении.При этом редкие сценарии, которыми пользуются лишь 10% пользователей, мы спрятали глубже. А самые популярные функции вынесли на первый-второй уровень, чтобы они всегда были на виду и легко доступны.
Как мы упрощаем путь пользователя к целевым действиям
На всех экранах мы аккуратно направляем пользователя к нужным действиям через активные кнопки. Там, где выбор не обязателен, мы его минимизировали, чтобы не загружать пользователя лишними решениями. Когда приложение интуитивно подсказывает правильные шаги и минимизирует ненужный выбор, пользователи быстрее достигают целей и остаются довольны. А это повышает вероятность того, что они будут возвращаться к приложению и рекомендовать его.Однако любой минимализм хорош в меру. В тех местах, где важно наличие множества настроек, например, для создания мероприятий, мы ничего не сокращали. Это позволяет пользователям сохранить полный контроль над важными параметрами и гибко настраивать встречи под свои нужды.
Дизайн-система для приложения «В.месте»: единство UI-компонентов и UX-решений
Мы создали дизайн-систему проекта полностью с нуля, чтобы минимизировать ошибки и неверные интерпретации при разработке. В ней нет дублирующих компонентов и стилей, что упрощает процесс работы. Дизайн-система охватывает не только UI kit (набор элементов вроде кнопок и полей), но и UX паттерны — единые правила навигации, поведения карточек, плавающих элементов и других интерфейсных решений. Благодаря этому интерфейс понятный и единообразный на всех уровнях, и пользователь понимает, чего ждать от приложения в разных ситуациях.
Как дизайн-система ускоряет разработку
Дизайн-системы уже давно стали стандартом для крупных продуктов, потому что они помогают сохранять единый стиль и логику интерфейса, упрощают разработку. Главный плюс — это экономия времени и денег на разработку и обновления. Раньше это было доступно только крупным компаниям, но сейчас можно использовать и на небольших проектах. Внедряешь такую систему — и не нужно постоянно что‑то переделывать. Мы в Wjet в этом хорошо разбираемся, поскольку создали уже не один десяток дизайн систем для самых разных проектов.
Как избежать чрезмерной сложности при создании дизайн-систем
Часто дизайн-системы раздувают до чрезмерной сложности, превращая их в неповоротливые и тяжёлые конструкции, обслуживание которых стоит дорого. Например, вместо 10 вариантов кнопок делают 50, или создают палитру из 100 цветов, а в итоге используют всего 5. Там, где достаточно трёх заголовков, добавляют 10. Всё это усложняет работу, делая систему менее гибкой.Создание строгих паттернов в UX тоже не всегда помогает. Разработчики дольше читают документацию и требования, чем занимаются непосредственно разработкой. Поэтому создание дизайн систем облегчает жизнь в том числе и разработчикам. Дизайн-система должна экономить время, а не добавлять сложности, и мы знаем, как этого добиться.
Шаблоны взаимодействия пользователей в дизайн-системе
Мы придерживаемся осознанного подхода — не усложняем простые вещи и делаем дизайн-системы удобными как для дизайнеров, так и для разработчиков. В проекте В.месте с помощью дизайн-системы мы смогли сделать стиль приложения единым и последовательным. А шаблоны взаимодействия пользователей применили везде, избегая кастомных разовых решений, которые менее предсказуемы для пользователей и которые потом сложно и дорого поддерживать.
Уникальные фишки и особенности приложения
Одной из ключевых фич приложения стал чат — базовая социальная функция, которая делает общение между пользователями быстрым и удобным.Кроме того, мы уделили особое внимание процессу регистрации, понимая, что это самый важный этап воронки конверсии, на котором часто теряется много пользователей. Чтобы минимизировать отток, при регистрации мы запрашиваем только номер телефона, а остальную информацию пользователь может заполнить позже, по своему желанию. Он может сразу начать искать интересные встречи или перейти в профиль и заполнить данные о себе, когда ему будет удобно. Это помогает снизить барьер для входа и увеличить количество активных пользователей.
Сроки реализации проекта и согласования с заказчиком
Создание дизайна заняло около 2 месяцев, а весь процесс разработки длился 4 месяца. В ходе работы мы регулярно согласовывали ключевые этапы с заказчиком. В самом начале утвердили концепцию стиля, затем на этапе проработки сценариев согласовали основной пользовательский путь (UX). На финальной стадии завершили согласование всего объема работ с минимальным количеством правок. Нам удалось избежать излишней бюрократии и долгих цепочек согласований и уложиться в согласованные сроки.
Что получилось
В процессе работы над проектом мы постарались соблюсти баланс — избегали лишних усложнений там, где это не нужно, хотя при разработке всегда есть соблазн добавлять всё больше деталей и дорабатывать в погоне за идеалом. Можно бесконечно улучшать детали, но наша задача была создать функциональное и удобное решение. И мы с этим справились. У нас получился не просто MVP, а полноценный продукт с широким набором функций. Приложение оказалось удобным и функциональным. В перспективе будем делать расширенный набор иллюстраций, под разные кейсы и типы мероприятий.
