Дизайн веба для американского prepaid-оператора Lyca Mobile: улучшение существующего сайта, конверсии и покупательских сценариев, а также проектирование новых флоу с нуля. Я был единственным дизайнером и работал в связке со своим менеджером из Just Slide Media. Мобильного приложения у оператора тогда не было, вся работа шла по вебу плюс немного офлайн-материалов.
Год
2024
Клиент
Lyca Mobile
О Проекте
Lyca Mobile это prepaid-оператор связи в США (работает на сети крупного оператора), с упором на международную связь: дешёвые тарифы без контракта, звонки в 100+ стран, 5G. Аудитория во многом интернациональная, для неё важны простая покупка, пополнение баланса и понятная активация.
Меня позвали улучшать существующий веб-сайт: поднять конверсию, переработать клиентские страницы и покупательские сценарии. Работа включала в себя редизайн того, что уже было, и новые фичи и флоу, спроектированные с нуля. Отдельная сложность была в том, что у Lyca не было готового веб UI-kit, поэтому систему компонентов я собирал сам.
Моя роль: единственный дизайнер на вебе, в связке с менеджером из Just Slide Media. Зона ответственности: клиентские страницы, покупка и активация, личный кабинет, конверсия, плюс часть офлайн-материалов. Платформа: веб (мобильного приложения у оператора на тот момент не было).
Проблема
Сложная активация и покупка для prepaid-аудитории. Купить SIM или eSIM, выбрать тариф, активировать карту, перенести номер, пополнить баланс - это набор процессов, в которых легко запутаться, особенно для нетехнической, во многом интернациональной аудитории. Каждый запутанный шаг - это потерянный клиент.
Конверсия как главная цель. Меня звали не просто перерисовать экраны, а поднять конверсию. Это значит, что покупательские воронки (покупка тарифа, SIM, добавление линии, пополнение) должны были стать короче, понятнее и убедительнее.
Редизайн и новое одновременно. Часть сайта уже существовала и требовала аккуратной переработки без слома привычного, часть сценариев нужно было спроектировать с нуля. Нужно было удержать единство между старым и новым.
Отсутствие дизайн-системы. У Lyca не было веб UI-kit. Чтобы работать системно и быстро, мне пришлось собрать собственную библиотеку компонентов под бренд и масштабировать её на все страницы и состояния.
Несколько каналов продаж. Помимо основного сайта, продукт жил и в других каналах: витрина на Amazon, ко-брендовые сценарии с ритейлом (Best Buy), офлайн-розница с физической упаковкой SIM. Пользовательский опыт нужно было держать согласованным между ними.
Решение
Личный кабинет My LycaMobile. Я спроектировал дашборд и управление аккаунтом: usage summary, пополнение для себя и для других, автопополнение, мои тарифы и продление, управление оплатой, история, а также управление аккаунтом, включая port-out PIN для переноса номера. Цель была в том, чтобы клиент мог быстро сделать главное: проверить баланс, продлить тариф, пополнить счёт.
Покупка тарифа и SIM. Я переработал воронки покупки: выбор тарифа, покупка SIM/eSIM, чекаут, промо-страницы и сценарии с промокодами. Сюда же вошла мультилайн-покупка: несколько линий за одну сессию, с отдельным мультилайн-чекаутом. Я итеративно прорабатывал страницу тарифов, чтобы она лучше продавала ценность.
Добавление линии (Add a Line). Спроектировал флоу покупки дополнительной линии к существующему аккаунту: чекаут, подтверждение, оплата разными методами, экран успеха с промо скачать приложение и сценарием второго заказа.
Активация SIM. Один из самых проблемных процессов. Я сделал активацию проще и понятнее: лендинг активации с вводом ICCID, подсказками для eSIM, и аккуратным переводом части пользователей в приложение там, где это удобнее. Спроектировал и мобильный флоу с проверкой покрытия и совместимости eSIM в ко-брендинге с Best Buy: проверка zip-кода, проверка устройства, выбор плана, штрихкод для покупки в рознице.
Главная и конверсионные страницы. Доработал главную страницу, чтобы она лучше подавала фичи и акции. Спроектировал страницу отзывов и рейтингов с таблицей сравнения с другими операторами, чтобы укрепить доверие и помочь выбору.
Витрина на Amazon. Сделал Amazon Storefront как отдельный канал присутствия бренда.
UI-kit с нуля. Поскольку готового веба UI-kit не было, я собрал собственную систему компонентов под бренд Lyca и строил на ней все экраны, удерживая единство по мере роста.
Офлайн и маркетинг. Помимо веба, сделал часть офлайн-материалов: 3D-модель для розничных стендов, дизайн упаковки SIM-паков для магазинов, баннеры и промо.
Рабочий процесс
Я работал как единственный дизайнер в связке со своим менеджером из Just Slide Media. Начинал с клиентских страниц и покупательских сценариев, где была главная цель по конверсии. Поскольку у оператора не было веба UI-kit, я параллельно собирал собственную систему компонентов и дальше строил на ней все экраны. Часть задач была редизайном существующего, часть новыми флоу с нуля, и я держал их согласованными между собой и между каналами: основной сайт, Amazon, ко-брендинг с Best Buy, офлайн-розница.
Что сделано
Личный кабинет My LycaMobile: дашборд, пополнение для себя и других, авто-пополнение, тарифы и продление, оплата, история, управление аккаунтом и port-out PIN.
Воронки покупки тарифа и SIM/eSIM: чекаут, промо-страницы, промокоды, мультилайн-покупка с отдельным чекаутом.
Флоу добавления линии (Add a Line) с оплатой, подтверждением и промо приложения.
Упрощение активации SIM: лендинг активации, eSIM, перевод в приложение.
Мобильный флоу проверки покрытия и совместимости eSIM в ко-брендинге с Best Buy.
Доработка главной и конверсионных страниц, страница отзывов со сравнением операторов.
Витрина на Amazon Storefront.
UI-kit под бренд, собранный с нуля, и его масштабирование на весь веб.
Офлайн-материалы: 3D-модель стендов, упаковка SIM-паков, баннеры и промо.
Вся работа сделана как единственным дизайнером, в связке с менеджером.
Результат: переработанный веб и покупательские сценарии, в которых купить, активировать и обслуживать связь стало проще и понятнее для клиента. Отдельным результатом стала собственная дизайн-система, которой у оператора до этого на вебе не было.