Редизайн сервиса виртуальных номеров в аренду
Сервис сдает в аренду виртуальные номера 220К пользователям из 16 стран для возможности регистрации в любых сервисах. Прошлый дизайн устарел и просел по KPI ввиду большого числа новых конкурентов на рынке.
Задача
Сделать новый дизайн главной посадочной страницы (Landing) и личного кабинета. Улучшить UX механику выбора сервиса и страны, а также UX пополнения баланса. Выделиться среди конкурентов через премиум стиль и темную UI тему. Улучшить пользовательский опыт, Look and Feel, что со временем приведет к росту KPI/DEU.
Сделал
- Юзабилити-тестирование старого UX (протестировал UX сценарии)
- Конкурентный анализ (взял best practices и исследовал UI тренды)
- Проектировал wireframe и wireflow
- Концепция: поисковые решения, подбор цветов, шрифтовой пары, лого
- UX-тексты — улучшил все тексты согласно книге «Пиши, сокращай»
- UI (компоненты и переменные-токены (стили, цвета, отступы и прочее)
Посадочная страница
Быстро рассказывает о сути сервиса, вызывает доверие и показавает механику работы с сервисом. После авторизации/регистрации откроется личный кабинет.
Личный кабинет
В каком бы разделе кабинета пользователь не был, слева всегда будет виджет с выбором сервиса и страны для аренды номера. В данном случае пользователь новый и еще не пополнил баланс, по дефолту это страница topup. Для покупки номера в аренду пользователю нужно 5 кликов (или 7-9 при поиске сервиса или страны из списка). Доступ ко страницам кабинета через dropdown навигацию по нажатию иконки профиля. В этой части сценария пользователь выбирает сервис.
Пользователь выбрал сервис (нажатие на кнопку close возвращает его к выбору). Он выбирает страну у мобильных операторов которой будет арендован номер и это влияет на стоимость.
Сервис и страна выбраны. Метод оплаты и сумма депозита выбраны по умолчанию первые в списке, чтобы сделать лучшую интуитивность. После нажатия кнопки Pay переход на third party pay, пополнение баланса и покупка временного номера, что будет понятно пользователю после возврата, на странице «арендованные номера» где он может скопировать номер в буфер, вставить его при регистрации, получить смс код и выполнить свое целевое действие — зарегистрироваться где пожелает.
Другие страницы ЛК показаны не будут, этого достаточно для оценки моего UX/UI.
Кухня
Style Guide
Типографика, палитра, иконки и изображения. Использован один брендовый цвет для сохранения простоты и минимализма т.к. проект большего не требовал. White цвет является основным акцентным, его тон подобран чтобы снизить нагрузку на зрение в рамках Accessibility после коридорного тестирования.
Components
Молекулы, организмы и шаблоны (шапка, подвал). Все компоненты кликабельны.
UI Variables
Переменные — мой обязательный инструмент.
Какой была первая версия дизайна
Светлая тема не выделялась среди конкурентов, была перегрузка изображениями и лишними текстами и инфо-блоками, ее делал Middle дизайнер. Решение не было принято руководством и Senior дизайнером в моем лице.
Список конкурентов
Чтобы оценить качество моей работы достаточно посмотреть на них:
- sms-activate.io
- quackr.io
- avoxi.com
- onlinesim.io
- gogetsms.com
- esimplus.me
- sms.online — единственный достойный конкурент по дизайну