Проекту Shafa — шесть лет, там зарегистрировано более 1,4 млн пользователей. Изначально его позиционировали как маркетплейс брендовой одежды и аксессуаров для женщин. Позже начали продавать товары для мужчин и детей.
В 2017 году проект стал частью холдинга EVO, тогда же в компании решили сделать мобильное приложения маркетплейса.
Как создавалась Shafa App, на лекции в UNDERHUB рассказал Дмитрий Кобец — Mobile Product Designer в EVO.Company.
Записали самое интересное.
С чего начинали
Любой проект начинается с kick-off — вводной встречи заказчиков с исполнителями. Здесь формируется бриф, который содержит основную информацию о проекте. Для команды дизайнеров важнее всего узнать аудиторию приложения. От этого зависит, как оно будет выглядеть.
На тот момент Shafa была заточена на женщин. А конкретно — на инстаграм-девушек 25–35 лет. Они отличаются тем, что не лишены вкуса. Если фотографируют одежду, то делают это красиво. Дизайнерам нужно было сохранить такой подход в приложении.
Еще нюанс касательно аудитории. Когда создавали приложение, Shafa ориентировалась исключительно на девушек. Но 67% пользователей хотели, чтобы появился мужской раздел. Проект собирались расширять, поэтому нужно было это учесть.
Со смартфона на сайт Shafa заходили 60% пользователей, мобильная версия работала неплохо. Главной задачей дизайнеров стало создание приложения, которое переманит «мобильную» аудиторию сайта.
Как поняли, на чем делать акцент
Изначально дизайнерам важно было разобраться, зачем пользователям приложение. Для этого:
#1. Изучили аналитику. Тогда проекту было четыре года, поэтому данных собрали достаточно. Проанализировали, как пользователи юзают сайт, чтобы учесть это в приложении.
#2. Провели интервью с пользователями. В холдинге EVO работает около 900 человек, поэтому это не составило труда. Просто спросили в Slack, кто пользуется Shafa, и поговорили с ними, не выходя из офиса.
После выделили два главных фокуса в приложении:
Добавление товара. Оно должно быть максимально удобным, потому что 63% аудитории и покупают, и продают.
Залипательность. Многие заходят на сайт не за конкретным товаром, а просто посерфить. Интерфейс должен способствовать этому.
Как определились со стилистикой
В приложении главным решили сделать контент, чтобы интерфейс оставался на заднем плане. Цвета бренда сохранили — черный и зеленый. Добавили немного фешна, чтобы максимально уйти от барахолки.
Иллюстрации также отрисовали в простом стиле, без ярких акцентов.
Но возник спор. Shafa собиралась расширяться на мужскую аудиторию, а дизайн и иллюстрации замыкались на женской. Начались обсуждения, что стоит оставаться гендерно-нейтральными. Даже думали отрисовать специального персонажа без гендера.
Но нет ничего хуже, чем целиться в никого. Поэтому остановились на девушках.
Как сделать главную страницу
Важно заранее продумать путь пользователя: как он будет взаимодействовать с приложением, какой первый экран увидит, куда пойдет дальше.
Стартовой точкой для продавцов и покупателей Shafa является главная страница. Человек заходит на нее и сразу же оценивает, что там есть. Насколько большой и разнообразный ассортимент, сколько стоит товар. Главная должна все это показать.
По результатам исследования Baymard Institute, длинные страницы маркетплейсов воспринимают нормально. 70% участников исследования прокручивали вверх и вниз почти всю домашнюю страницу, быстро сканируя ее содержимое.
Это значит, что не стоит бояться делать длинные главные. Главное, чтобы контент был разнообразным, а человеку было интересно его скролить.
Несколько советов в разработке дизайна
#1. Все разнообразие товара — на главную. Не проблема, если домашняя страница маркетплейса будет длинной. Важно, чтобы она отвечала на вопрос пользователя «Что я здесь делаю?».
#2. Создайте ощущение присутствия. Показывайте количество лайков у товара, зарезервированные позиции, количество людей, которые прямо сейчас просматривают продукт. Это доказывает, что в приложении кипит жизнь, а значит — оно стимулирует покупать.
#3. Упрощайте все, что возможно. Помните, что хорошие фильтры в приложении — это всегда сложная подача объявления. То есть можно сделать так, чтобы пользователям было легче искать товар. Но тогда продавцам будет сложнее его загружать. Здесь важно балансировать.
#4. Думайте наперед. Представьте, как будет выглядеть экран, если вы добавите на него все, что хотите. А потом вернитесь к первому шагу и сделайте дизайн с учетом того, как это будет выглядеть.
Больше советов по созданию мобильных приложений читайте в телеграм-канале Дмитрия.
