Помогли клиенту найти «свой» стиль и сработались с его командой. Кейс MyWard

К нам обратилась заказчица из ОАЭ за дизайном и разработкой приложения MyWard. Идея пришла из собственного опыта: хотелось удобный сервис, где можно составлять стильные образы из элементов одежды.

Приложение работает так:

- Пользователь регистрируется и создает аккаунт.

- Составляет образы из элементов одежды и сохраняет их в свой диджитал-гардероб.

- Делится своими образами с другими пользователями.

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

Чтобы реализовать идею приложения MyWard, нам нужно было справиться с тремя задачами:

1️⃣ Разработать дизайн.

2️⃣ После дизайна — разработать приложение.

3️⃣ Параллельно наладить взаимодействие со сторонней командой.

Подробнее о задачах и этапах проекта — расскажем далее

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

- Создание образа из нескольких вещей.

- Просмотр отдельных элементов одежды.

- Лента с работами других пользователей.

- Портфолио созданных образов. 

Функцию разбора гардероба со стилистом решили оставить за рамками MVP, чтобы быстрее выпустить приложение. А еще — сократить расходы заказчицы, пока идея не доказала свою окупаемость. 

Нужно было сделать полностью работающий продукт и помочь выпустить его на рынок в сжатые сроки, чтобы конкуренты не сделали это раньше.

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

К счастью, мы уже успешно запустили более 550 MVP для наших клиентов, так что работа над MyWard шла по плану.

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

MyWard решает проблему: здесь пользователи видят одежду только из реальных магазинов. Например, из знакомых всем H&M или Zara. 

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

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

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

Звучит отлично, правда? Чтобы реализовать идею приложения MyWard, нам нужно было справиться с тремя задачами:

1. Разработать дизайн, который понравится целевой аудитории (в основном это молодые девушки), и будет удобным в использовании. Нужно было найти баланс между премиальным минимализмом и уютным, «живым» интерфейсом.

2. После дизайна — разработать приложение, где можно собирать образы из элементов одежды, делиться ими и просматривать работы других пользователей.

3. Параллельно с разработкой наладить взаимодействие со сторонней командой, которая занималась переносом вещей из каталогов реальных магазинов в приложение.

Работу над дизайном мы начали с референсов от заказчицы. У нее не было конкретных идей, скорее, пожелания и общее направление. Мы проанализировали предоставленные примеры и вывели для себя примерные ориентиры:

Через 3 месяца работы с нами заказчица увидела дизайн, который полностью соответствовал ее представлению. Это был «тот самый» стиль приложения MyWard, который понравится пользователям и не будет отвлекать от создания образов.

Посмотрим на примерах, как нам это удалось:

1️⃣ Создали лаконичный черно-белый интерфейс с одним акцентным цветом — оранжевым. Так экран не выглядит перегруженным, несмотря на разноцветные элементы одежды.

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

Цветовая гамма приложения MyWard:

3️⃣ Добавили минималистичные иконки, чтобы пользователь сосредоточился на просмотре образов и не отвлекался на элементы интерфейса.

Минималистичные иконки:

4️⃣ Сделали два варианта просмотра образов в ленте: по одному или сеткой. Пользователь сам выбирает, просматривать сразу несколько образов или сосредоточиться на конкретном. 

Лента в приложении:

5️⃣ Выбрали два шрифта. Акцентный — для заголовков и имени пользователя, чтобы привлечь внимание. Более строгий и утонченный — для остального текста, чтобы задать «премиальный» тон приложению.

Пример шрифта Golos:

6️⃣ Добавили обложку и отображение портфолио в личном профиле. Чтобы пользователи могли быстро (почти моментально) оценить стиль владельца профиля и подписаться.

Профиль пользователя в приложении MyWard:

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

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

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

Еще мы заметили, что разработанная второй командой нейросеть не до конца удаляет фон с фото вещей. Это не очень удобно при комбинации одежды. С остатками фона общая картинка выглядела неаккуратно, что могло навредить репутации приложения. На поиск решения потребовалось время, но усилия стоили того. Теперь элементы одежды отделяются от фона четко по контуру, а пользователям удобно составлять красивые образы.

Помимо самого приложения мы работали еще и над лендингом для его продвижения:

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

- Никаких лишних элементов: наверху — удобная навигация, по центру первого экрана — кнопки для быстрого скачивания.

- Ниже по лендингу — презентация преимуществ и интерактивный экран, который показывает работу приложения.

Дизайн лендинга:

Заказчица осталась довольна результатом и тем, как четко и заинтересованно мы работали, чтобы к нему прийти. От первого обращения и до финальной сдачи проекта прошло 10 месяцев. В итоге, наша клиентка выпустила работающую MVP-версию приложения с платной премиум-подпиской.

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