Редизайн RuStore. Что не так с дизайном российского магазина приложений от команды VK?

25 мая ВК совместно с Минцифрой запустили бета-версию магазина приложений. Решение о разработке своего магазина приложений было принято из-за удаления приложений Сбербанка, Альфа Банка и многих других из Google Play, App Store и остальных магазинов (Причина — санкции).

Редизайн RuStore. Что не так с дизайном российского  магазина приложений от команды VK?

Почему я решил сделать редизайн RuStore?

Причиной сделать редизайн служит моё желание развиваться в сфере дизайна интерфесов и создание цифровых продуктов с помощью различных языков программирования (редизайн этого проекта от ВК идеальный шанс получить новый опыт в дизайне интерфейсов, особенно после того как я увидел их дизайн…).

Скриншот экрана приложений, который является главным (по умолчанию именно этот экран появляется при запуске приложения)<br />
Скриншот экрана приложений, который является главным (по умолчанию именно этот экран появляется при запуске приложения)

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

Начало работы: Изучение конкурентов

Перед тем, как начать создавать новый дизайн для RuStore, я решил проанализировать конкурентов такие как Google Play, App Store и другие…

Редизайн RuStore. Что не так с дизайном российского  магазина приложений от команды VK?

Во время анализа, я понял, чего не хватает RuStore.

  • Нет взаимодействия с пользователями, нет рекомендаций для пользователей (даже комментариев нет под приложениями + нет оценки приложения)
  • Нет сортировки приложений. Приложения нельзя отсортировать по рейтингу, по количеству скачиваний и тд (разве, что только по категориям)
  • Реализация поиска приложений сделана плохо (как с точки зрения дизайна, так и с точки зрения функционала)
  • Нет возможности оплатить платный контент (платные приложения и игры). Не понятно, как разработчики будут получать доход (если только через внутренние покупки в приложении) или будут ли вообще получать
  • Нет автоматичеких обновлений установленных приложений (это всё нужно делать в ручную, так и ещё при установки обновления «всплывает» миниокно как будто устанавливаешь apk-файл)

Проектирование дизайна

Закончив анализ конкурентов, я приступил к проектированию обновлённого интерфейса. Начать я решил с экрана приложений.

Ошибки старого дизайна

Старый дизайн RuStore был очень простым и имел ограниченный функционал (кто-то может возразить и сказать: "Мне и этого функционала достаточно!" Но когда начинаешь сравнивать с конкурентами, то начинаешь осознавать насколько функционал ограничен…).

Наброски нового дизайна (Экран Приложений)

<b>Первый скетч</b> нового дизайна. <b>Большие блоки</b> — рекомендованные приложения, ниже расположен список из остальных приложений. Сверху распологается поиск и логотип, чуть ниже категории (для вас и популярные). <br />
Первый скетч нового дизайна. Большие блоки — рекомендованные приложения, ниже расположен список из остальных приложений. Сверху распологается поиск и логотип, чуть ниже категории (для вас и популярные).
<b>Второй скетч</b>. Улучшенная версия первого наброска. Сверху добавил больше разделов категорий. Список приложений стал горизонтальным, а не вертикальным. <b><i>Именно этот скетч стал основой при создании UI элементов</i></b><br />
Второй скетч. Улучшенная версия первого наброска. Сверху добавил больше разделов категорий. Список приложений стал горизонтальным, а не вертикальным. Именно этот скетч стал основой при создании UI элементов

Первые пробы дизайна для экрана приложений

А вот и первая проба дизайна. <b>Что изменилось?</b> Добавил панель рекомендаций приложений для <b>конкретного</b> пользователя. Появился раздел<b> "Выбор пользователей"</b>, в нём появляеются приложения с наибольшим количеством скачивания за месяц.<br />
А вот и первая проба дизайна. Что изменилось? Добавил панель рекомендаций приложений для конкретного пользователя. Появился раздел "Выбор пользователей", в нём появляеются приложения с наибольшим количеством скачивания за месяц.

Финальный дизайн (Экран Приложений)

Редизайн RuStore. Что не так с дизайном российского  магазина приложений от команды VK?

Дизайн стал определёно лучше. Что изменилось?

  • Я избавился от синего банера, который был бесполезен и оставлял очень много пустого пространтсва.
  • Новый логотип. Новый логотип стал современным и не занимает много места (Раньше было два логотипа, хотя и одного достаточно).
  • Функция «Поиск» теперь находиться не в навигационной панели, а вверху справо.
  • Изменилась панель навигации. Были убраны иконки «Обновления» и «Поиска» (поиск теперь находиться в правом верхнем углу), изменились иконки разделов «Приложений« и »Игр», добавлена иконка «Меню»
  • Для скачивания приложения не нужно заходить на страницу самого приложения достаточно просто нажать на иконку рядом. Также, рейтинг приложения отображается рядом с ним.
  • Появилась сортировка приложений по группам («Для Вас», «Топ», «Категории» и «Выбор Редакции»)

Для раздела игр используется аналогичный дизайн

Мой редизайн vs дизайн Команды ВК

Редизайн RuStore. Что не так с дизайном российского  магазина приложений от команды VK?

Редизайн поиска

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

Дизайн Команды ВК — Начало поиска

Просто? Безусловно! Но <b>ОЧЕНЬ, ОЧЕНЬ</b> много пустого места<br />
Просто? Безусловно! Но ОЧЕНЬ, ОЧЕНЬ много пустого места

Как это можно улучшить?

Есть два варианта, как это можно улучшить

Первый вариант поиск с сохранением истории (очень полезно, тк не нужно вводить название приложения дважды). Второй вариант — тоже самое, но с добавлением популярных запросов. Но в финальной версии я решил использовать первый вариант дизайна.<br />
Первый вариант поиск с сохранением истории (очень полезно, тк не нужно вводить название приложения дважды). Второй вариант — тоже самое, но с добавлением популярных запросов. Но в финальной версии я решил использовать первый вариант дизайна.

Финальная Версия

Редизайн RuStore. Что не так с дизайном российского  магазина приложений от команды VK?

Теперь давайте посмотрим на дизайн поиска приложений

Первое, что сразу бросается в глаза это путаница в поиске. Я ввёл в поиск "ВК". Да, приложение я нашёл, но что у меня в ленте делает СДЭК, Бургер Кинг и Халва??? Как они относятся к запросу ВК???<br />
Первое, что сразу бросается в глаза это путаница в поиске. Я ввёл в поиск "ВК". Да, приложение я нашёл, но что у меня в ленте делает СДЭК, Бургер Кинг и Халва??? Как они относятся к запросу ВК???

Как это нужно было сделать? Два варианта: 1. Пользователь ищет конкретное приложение. 2. Пользователь ищет приложение с условным названием.

Пользователь ищет конкретное приложение. Поиск выдаёт ему то приложение,
 которое он ищет (с краткой информацией о нём).  Также показывает <b>ВСЕ </b>сервисы, которые связаны с разработчиком. А в самом низу располагаются похожие сервисы подходящие под запрос.
Пользователь ищет конкретное приложение. Поиск выдаёт ему то приложение, которое он ищет (с краткой информацией о нём). Также показывает ВСЕ сервисы, которые связаны с разработчиком. А в самом низу располагаются похожие сервисы подходящие под запрос.
Пользователь не знает какое приложение ему искать, поэтому вводит 
условное название «Банк». Результат поиска — все банковские приложения. <b>«Выбор Пользователей»</b> — раздел в который попадают приложения с наибольшим количеством скачиваний за месяц.<br />
Пользователь не знает какое приложение ему искать, поэтому вводит условное название «Банк». Результат поиска — все банковские приложения. «Выбор Пользователей» — раздел в который попадают приложения с наибольшим количеством скачиваний за месяц.

Раздел «Меню». Где обновлять приложения?

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

Но я сразу же понял, что он не подходит. В добавок уж очень сильно похож на дизайн самого приложения Вконтакте (раздел с виджетами).  Плюс, не вписывается в основной стиль редизайна.<br />
Но я сразу же понял, что он не подходит. В добавок уж очень сильно похож на дизайн самого приложения Вконтакте (раздел с виджетами). Плюс, не вписывается в основной стиль редизайна.

Финальный дизайн

Обновления находятся в верхней части приложения. Ниже расположены второстепенные функции.<br />
Обновления находятся в верхней части приложения. Ниже расположены второстепенные функции.

Экран Обновлений

На этом экране пользователь видет <b>все доступные</b> обновления.<br />
На этом экране пользователь видет все доступные обновления.

О чём Команда Вконтакте забыла? (или ещё не добавила?) Какие функции ещё можно реализовать?

Фото с <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Funsplash.com%2Fphotos%2FjfR5wu2hMI0&postId=470947" rel="nofollow noreferrer noopener" target="_blank">Unsplash</a> <br />
Фото с Unsplash

VK не реализовали как миниум две главные функции.

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

Баланс пользователей и система оплаты

Очень страно, что этих функций до сих пор нет в приложении. Казалось бы, очень много людей действительно платят за приложения (даже на Android), но этой функции нет, так что я решил придумать как это может выглядеть.

Где можно посмотреть свой баланс? Как он выглядит?

Свой баланс можно посмотреть на экране «Меню» (предварительно нажам на иконку с надписью «Баланс»). А вот как он выглядит.

Помимо баланса и своей карты, мы можете видеть историю своих покупок.<br />
Помимо баланса и своей карты, мы можете видеть историю своих покупок.

Способы оплаты и их добавления

Это экраны с способами оплаты (доступны все виды оплаты, включая <b>VK Pay</b>). <br />
Это экраны с способами оплаты (доступны все виды оплаты, включая VK Pay).

А вот так выглядит дизайн экрана подтверждения покупки.

На этом экране видно краткую информацию о покупке, текущий баланс и стоимость оплаты.<br />
На этом экране видно краткую информацию о покупке, текущий баланс и стоимость оплаты.

Взаимодействие пользователей. Что нужно сделать?

Как я писал ранее, в Rustore отсутствует взаимодействие пользователей (нет комментариев и из-за этого нет рейтингов приложений). И вот моё решение этой проблемы.

Я сделал систему комментариев прямо как в социальных сетях (также с оценкой комментария) . Почему? Потому, что так у людей создаётся впечатление, что они напрямую общаються с разработчиком, а не просто пишут очередной отзыв о продукте. <br />
Я сделал систему комментариев прямо как в социальных сетях (также с оценкой комментария) . Почему? Потому, что так у людей создаётся впечатление, что они напрямую общаються с разработчиком, а не просто пишут очередной отзыв о продукте.

Заключение

Что я могу сказать в заключении? Над этим редизайном я работал с начала Июля. Это было довольно интересно и увлекательно (Без шуток, мне действительно понравилось работать над этим проектом). Я старался исправить все ошибки команды ВК, которые только смог найти. Также я старался сделать новый дизайн в стиле компании ВК (именно поэтому некоторые элементы интерфейса напоминают Вконтакте).

Эта моя первая статья на vc. ru и она получилась очень большой. Поэтому, если вы дочитали её до конца, то огромное вам спасибо! В комментариях напишите своё мнение о моём редизайне (Что вам понравилось, а что нет). Я открыт к критике и буду рад с вами пообщаться. А что, на ваш взгляд, нужно ещё добавить в мой редизайн и в проект RuStore в целом?

Желаю всем хорошего утра, дня или вечера! (в зависимости, когда вы читаете эту статью) .

До новых встреч!

2626
51 комментарий

Автор молодец, именно на таких кейсах растет твой скилл.
Это же еще надо выделить время и поработать (бесплатно), тем более летом))

"Что я могу сказать в заключении? Над этим редизайном я работал с начала Июля. Это было довольно интересно и увлекательно (Без шуток, мне действительно понравилось работать над этим проектом). Я старался исправить все ошибки команды ВК, которые только смог найти."

Но и про свои не забывай) основной момент - выравнивание и близость. Они хромают. А так же иконки разного размера.
И пользуешься ли ты сеткой?

10
Ответить

Рад, что вам понравился кейс. Буду работать над своими ошибками! Спасибо!

4
Ответить

и в догонку второй скрин

6
Ответить

Почему сами то не сделали такую платформу? Дизайн уже есть. Какие функции нужны вы знаете. Почему не запустить? Я серьёзно спрашиваю.

2
Ответить

Честно говоря, у меня ещё не достаточно опыта для создания такого проекта 😬
Также, я не могу делать его в одиночку 👨🏻‍💻

Ответить

Причём здесь айфон?

2
Ответить

Айфон тут не причём. Это мокап

Ответить