Підвищуємо продажу завдяки розвитку сайту та створення мобільного застосування

1. Функціонал «Вибір міста»
2. «Плаваюча» корзина замовлень
3. Універсальний фільтр підбору продуктів
4. Мобільні додатки
5. Додатковий інструмент аналітики користувачів
6. Мобільний додаток - не просто данина моді чи іграшка
7. висновок

Компанія Sushi & FRIES з Красноярська розробила інтернет-магазин з продажу суші, ролів та інших страв. Через півроку клієнт захотів поліпшити ресурс, щоб підвищити конверсію сайту, і створити мобільні додатки.

Які завдання стояли перед фахівцями технічної підтримки?

Що треба було зробити відділу розробки мобільних додатків?

Розробити програми під мобільні платформи Android і iOS, щоб компанія могла:

Функціонал «Вибір міста»

При першому заході на сайт з комп'ютера або мобільного пристрою можна побачити спливаюче вікно з вибором міста. Користувач повинен один раз вибрати своє місто і при повторному заході на сайт вікно вже не відображається, інформація зберігається в cookie браузера.

Для кожного міста виводитися унікальна інформація: змінюється номер телефонів в шапці сайту, а також номери телефонів і іконки з посиланнями на групи в соціальних мережах в підвалі сайту. Крім того, змінюються дані розділів «Відгуки», «Акції та спецпропозиції», «Вакансії» і «Контакти».

Також для кожного міста можна налаштувати адресу електронної пошти, на який буде відправлятися інформація про замовлення страв на сайті.

Для зв'язку функціоналу «Вибір міста» з мобільними додатками був розроблений спеціалізований API.

«Плаваюча» корзина замовлень

Доопрацювання проведена для спрощення процесу замовлення страв та зручності користування корзиною. Дизайн був виконаний з використанням елементів логотипу компанії, для розміщення нового кошика виділена ліва колонка тематичної області сторінки. На головній сторінці виведений повний список продуктів з розбивкою за категоріями. Кошик відображається не тільки на головній сторінці, а й на всіх сторінках сайту, де виводиться каталог страв.

Для того щоб додати страву до списку покупок, досить просто натиснути кнопку «В кошик». При цьому в «плаваючою кошику» буде автоматично перерахована і відображена підсумкова сума замовлення.

«Плаваюча кошик» називається так тому, що вона завжди в полі зору користувача, незалежно від того в якій позиції каталогу він знаходиться.

При наведенні курсора миші на зображення кошика вона автоматично відкривається і відображається список страв, причому в будь-який момент можна відредагувати їх кількість за допомогою кнопок «+» і «-». Для того щоб список страв не розтягувався по вертикалі ми додали до нього смугу прокрутки.

Функціонал «Плаваюча кошик» реалізований тільки в версії сайту для ПК.

Універсальний фільтр підбору продуктів

Доопрацювання призначена тільки для підбору суші та ролів, також нам вдалося створити окремий модуль універсального фільтра, для того щоб мати можливість використовувати його в інших проектах.

Дизайн фільтра дуже лаконічний, ми бачимо на малюнку назви дев'яти інгредієнтів, які можуть входити до складу продуктів, стилізовані зображення сердечок над ними і зображення хрестиків під кожним інгредієнтом. Також можна помітити кнопку скидання налаштувань фільтра.

У разі кліка лівої кнопкою миші по серцю, воно буде підсвічено, і це означає, що даний інгредієнт зобов'язаний входити до складу страви. Відповідно, якщо ми вибираємо хрестик, то інгредієнт не повинен входити до складу продукту. У такій «подвійності» підбору продуктів і полягає головна особливість нашого фільтра.

Налаштувати теги фільтра для кожного блюда просто, для цього в адміністративній панелі сайту необхідно встановити галочку «Включити» навпроти назви інгредієнта, якщо він входить до складу.

Набір інгредієнтів також можна редагувати за допомогою спеціального довідника, і це дає можливість використовувати модуль підбору продуктів в інших проектах, необхідно лише змінити дизайн фільтра. Він володіє достатнім швидкодією, щоб вибирати з декількох сотень продуктів без помітного зниження швидкості завантаження сторінок.

Мобільні додатки

Додаток запущено під мобільні платформи Android і iOS

Подивитись додатки можна по сссилкам:

Розробка мобільних додатків велася паралельно з розробкою сайту, вони інтегруються з існуючими сайтами, що розробляються компанією WebCanape, за допомогою підключення API для роботи з мобільними додатком.

Процес розробки мобільного застосування пройшов ті самі етапи, що і створення сайту:

• розробку технічного завдання,
• отрисовку дизайн-макетів,
• верстку макетів,
• програмування функціональної частини програми і інтеграцію з сайтом,
• тестування додатка,
• викладку додатки в сторі.

У процесі розробки програми в ньому були реалізовані наступні розділи:

• Головна сторінка. На головній сторінці представлені банери з останніми акціями, а також відображено основні розділи каталогу, представлені хіти продажів і новинки.
• Каталог. В каталозі є навігація по розділах товарів, можливість подивитися детальний опис і додавати вподобані товари в обране або в кошик. У детальному описі страв реалізований вибір супутніх товарів.
• Кошик. Для оформлення замовлення користувач переходить в кошик, де оформляє замовлення і вказує адресу доставки. Якщо користувач авторизувався через особистий кабінет, то дані останніх параметрів замовлення підставляються автоматично.
• Вибране. У цьому розділі зберігаються обрані товари, наявність цього розділу спрощує пошук улюблених товарів на просторах додатки.
• Особистий кабінет. У додатку є можливість реєстрації і входу в свій особистий кабінет, в якому відображаються історія замовлень і їх статус.
• Новини. В цьому розділі розміщуються новини про акції, новинки і гарячих пропозиціях.
• Контакти. Контактні дані магазину.

Дані про товари, новини і текстові розділи завантажуються в мобільний додаток в режимі online з сайту за допомогою API. Замовлення з мобільного додатка потрапляють в систему управління замовленнями сайту. Замовлення приходить на обробку точно так же, як і замовлення, зроблене через сайт, а також позначається в системі, що замовлення зроблено через мобільний додаток.

Відмінною особливістю стало впровадження додаткового функціоналу, як в API, так і в додатки.

Спершу була реалізована можливість додавати до замовлення супутні товари. Наприклад, в розділі «Френч фрайз» користувач може вибрати один соус до замовлення.

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

Додатки поширюються через маркети додатків iTunes і Google Play. Для збільшення установок мобільного додатка на сайті розміщені клікабельні бейджі, які ведуть в маркети.

Підігріти інтерес користувачів до новинок, акцій та спеціальних пропозицій, а також повідомити про вигідному замовленні можна за допомогою PUSH-повідомлень. Цей інструмент здорово допомагає збільшити кількість замовлень.

Можливості налаштування повідомлень допомагає сповіщати користувачів про конкретний товар (наприклад, додаванні нового виду ролів або знижку на них), категорії або новини в мобільному додатку. При кліці на повідомлення користувач потрапить на екран саме того товару, новини або категорії, який вказаний при відправці повідомлень.

Додатковий інструмент аналітики користувачів

Серед плюсів мобільного додатка є ще один - додатковий інструмент аналітики вашої аудиторії.

Сервіс Firebase, інтегрований в мобільні додатки під обидві платформи, дозволяє збирати і вимірювати підлогу аудиторії і її вік.

Цілком очікувано, що вік аудиторії, що використовує мобільні додатки для замовлення суші, від 18 до 35 років. Дивним відкриттям стало те, що жінок серед користувачів програми більш 60%. Це означає, що вони набагато активніше, а значить в додаток потрібно надсилати повідомлення більш привабливі для жіночої аудиторії, щоб збільшити ще більше конверсію і середній чек.

Мобільний додаток - не просто данина моді чи іграшка

Це повноцінний інструмент, який допоможе вам:

• вибудувати довгострокові відносини з клієнтами,
• підвищити лояльність користувачів,
• налаштувати новий канал комунікації з клієнтами,
• спростити процес замовлення послуг і продуктів,
• «Оселитися» в мобільному пристрої клієнта і стати ближче до нього.

висновок

Якщо у вас є сайт, розроблений в компанії WebCanape, і ви хочете підключити до нього функціонал «Вибір міста», розробити «Плаваючу» кошик, додати фільтр підбору продуктів або виконати будь-які інші доробки, то відправте заявку на доопрацювання, заповнивши форму .

Дізнайтеся про розробку мобільного додатку для вашого сайту, відправивши запит >>