Некоторое время назад мы запустили презентационный сайт приложения NFC Mobile Key. К сожалению, не всегда получается с первого раза выбрать удачное решение, тем более, когда условия меняются в процессе работы. Поэтому спустя некоторое время решено было сделать редизайн этого сайта.

Проблемы и причины редизайна

1. Сложность восприятия текстов

Когда мы только начинали работать над первой версией дизайна, предполагалось, что на сайте будет мало текста, и значительная часть информации будет преподноситься в графическом виде. Поэтому для оформления была выбрана темная цветовая гамма.

Первый вариант дизайна сайта NFC Mobile Key Первый вариант дизайна сайта NFC Mobile Key

Но по мере того, как сайт развивался, оказалось, что картинок недостаточно, текста стало много, и его стало сложно читать. В особенности это касалось главной страницы. Именно это и стало основной предпосылкой редизайна.

Много текста на темном фоне В таком виде это читать тяжело

2. Отсутствие мобильной версии

Вторая проблема — сайт изначально разрабатывался традиционный, для персональных компьютеров. Но поскольку приложение NFC Mobile Key предназначено для мобильных телефонов, целевая аудитория сайта — владельцы мобильных устройств, и заходят они на сайт со своих смартфонов. А на них сайт отображался не очень корректно.

3. Низкая конверсия

И третья проблема, которую предстояло решить в процессе редизайна — это недостаточный уровень конверсии.

Основная цель сайта — побудить посетителя скачать приложение NFC Mobile Key. Но тонкость тут в том, что когда разрабатывалась первая версия дизайна, было еще неизвестно, на какой платформе будет работать приложение. Поэтому мы сделали кнопку «Скачать» с нейтральным оформлением, а между тем, пользователи каждой мобильной платформы ожидают увидеть вполне конкретную кнопку, к которой они привыкли. Так что универсальность тут работала плохо.

Страница скачивания Страница скачивания

Пути решения проблем

Когда проблемы были достаточно четко сформулированы, решение пришло само собой.

Трудности с читаемостью текстов были решены заменой фона на более светлый.

Страница вопросов и ответов Страница вопросов и ответов: на светлом фоне текст читать гораздо легче

На главной странице мы сделали слайдер, который разгрузил ее и позволил представить информацию в более удобном для восприятия виде.

Слайдер на главной странице Слайдер на главной странице

Чтобы сайт нормально отображался на мобильных устройствах, мы сделали адаптивную верстку. Теперь на экранах с малым разрешением элементы сайта автоматически перекомпоновываются более удачным образом.

На малых разрешениях Примерно так сайт выглядит на экранах с малым разрешением

И, наконец, когда стало ясно, что приложение NFC Mobile Key будет работать на платформе Android, мы заменили кнопки «Скачать» на традиционные для этой платформы кнопки «Get it on Google play».

Get it on Google play