Египетская сила: 130k юзеров за первые полгода. Как мы разработали We’re all winners — приложение со скидочными купонами и розыгрышами призов для заказчика из Египта
Жесткий дедлайн и челленджи в разработке - но результат того стоил! Уже в первые месяцы после релиза в приложении было продано 5708 купонов на сумму $64,5K, а число активных юзеров перевалило за 130 тысяч. В этом кейсе расскажем, как успели сделать все в два раза быстрее, чем планировали, и за что заказчики благодарны нам.
Привет, на связи Purrweb — студия дизайна и разработки для бизнеса и стартапов. Нам везет на крутые проекты для рынка Ближнего Востока. Например, мы делали финтех-приложение KEM для Кувейта — оно привлекло $1 млн инвестиций на первом этапе и более 100k пользователей.
Похоже, успех ждет и наш новый проект We’re all winners — приложение для покупки скидочных купонов, ориентированное на рынок Египта.
Мы так думаем не потому, что отвечали за его дизайн и разработку 🙂 Цифры говорят сами за себя.
Работу с We’re all winners мы начали в прошлом году. Жесткий дедлайн, переделки первоначального дизайна, работа с чужим фронтендом и написание бэкенда на новой для нас технологии… словом, чек-лист идеального проекта Purrweb 😄 Но результат того стоил.
Содержание
Приложение, где покупка скидочного купона дает шанс на выигрыш приза
Весной 2023 года к нам обратились Хешам, инженер из Нью-Йорка, и Мухамед, владелец бизнеса, который жил в Каире. Вместе со своей командой они делали приложение для продажи скидочных купонов, ориентированное на рынок Египта. В мире существует сотни аналогичных онлайн-сервисов, но наши заказчики придумали, как выделиться на их фоне.
Киллер-фича приложения — это розыгрыши среди покупателей купонов. В большинстве подобных сервисов все ограничивается только скидками, а здесь у людей есть возможность выиграть призы. Отсюда и название: We’re all winners, или WAW.
Кстати, как вообще работает эта тема с купонами? Если вы хоть раз гуглили «купоны на скидки» в своем городе, то примерно представляете 🙂 Если нет, объясним на примере WAW.
WAW заключает контракты с вендорами — магазинами, ресторанами, клубами и так далее. Затем в приложении продаются предоплаченные купоны, которые позволяют юзерам приобретать товары или услуги от вендоров с хорошими скидками.
Все остаются в выигрыше👌 Юзеры экономят, бизнесы получают дополнительный канал рекламы или возможность продать излишки товаров, а наши заказчики зарабатывают свой процент.
Кроме того, вендоры спонсируют розыгрыши в We’re all winners, и это помогает привлекать новых пользователей и повышать их лояльность.
Когда заказчики обратились к нам, у них были наработки по фронтенду и готовый дизайн, который им не нравился. Они искали опытную команду, которая возьмется его переделать и довести до ума.
Этой командой стали мы, Purrweb. Хотя мы были не единственными кандидатами, заказчики в итоге выбрали нас: подкупила наша вовлеченность и структурированный подход — мы подробно объяснили, как будем работать, сделали понятный роадмап проекта, который попадал в сроки и бюджеты заказчика.
Не будем голословны, а просто покажем слайд из презентации для заказчиков — подробно расписываем все этапы работы и что конкретно делаем на каждом из них.
А вот и роадмап — четко декомпозировали задачи по спринтам:
Поначалу речь шла только о создании UI/UX дизайна для WAW. Но в итоге клиенты решили доверить нам еще и разработку бэкенда для приложения.
Об этом позже, а пока расскажем про фичи WAW, чтобы было понятно, как там все устроено.
Фичи WAW: как тут все устроено
Флоу приложения We’re all winners выглядит так:
Нам предстояло разработать удобный и простой дизайн, который бы соответствовал логике приложения, ожиданиям заказчика и потребностям целевой аудитории. Сейчас расскажем (и покажем!), как справились с этой задачей 🙌
Дизайн: подбираем палитру для яркого египетского солнца
Задача усложнялась тем, что у заказчика не было макетов в Figma, так что нам пришлось практически создавать дизайн с нуля — будем считать, что старого дизайна и не было 🙂
Тем не менее, кое-какие наработки заказчиков мы смогли использовать. Это некоторые компоненты из UI-kit, например, цветовая палитра для купонов. Еще был логотип, который мы взяли за основу и доработали по просьбе заказчика: им не нравилось прежнее визуальное решение.
Прежде чем лететь в разработку полноценного UI/UX, мы готовим дизайн-концепт: собираем референсы, определяем цветовую палитру, дизайним несколько ключевых экранов, чтобы отразить логику и визуальные решения.
Дизайн-концепт нужен для синхронизации с заказчиком: мы должны быть уверены, что находимся с клиентами на одной волне — это сократит количество правок, а значит, сэкономит бюджет заказчика.
Так выглядел наш дизайн-концепт.
А вот что получилось в итоге. Максимально близко к концепту: заказчику понравилось наше видение и реализация.
Эти же экраны в темной теме.
В качестве основного цвета интерфейса выбрали темный оттенок. Он хорошо контрастирует с белым фоном, не отвлекает внимание, а также будет заметен на экране даже в яркий солнечный день — актуально для Египта ☀ Акцентным выбрали мягкий оранжевый цвет.
Приложение доступно на двух языках, английском и арабском, поэтому создание UI на арабском могло бы стать челленджем. Но не стало 🙂 Это не первый наш заказчик из арабского мира, и мы уже знали, что нужно делать.
Мы адаптировали текст для чтения справа налево, увеличили кегль: в арабском нет заглавных букв, и шрифт может выглядеть мельче, чем на английском языке. Но это только часть работы 🙂 Мы учли много других важных деталей — подробнее о них рассказали в нашей статье про халяльный дизайн. На адаптацию интерфейса на арабский у нас ушло 20 часов.
Еще мы сделали дизайн для лендинга приложения, включая респонсив-версию, и собрали гайдбук по стилю.
В гайдбуке собрали правила корпоративного стиля и айдентики, например, допустимое использование логотипа и цветовой палитры.
На создание дизайна мобильного приложения, лендинга и гайдбука у нас ушло около 4 месяцев. Когда отдали готовый дизайн, заказчик принял решение остаться с нами 😀
Разрабатываем бэкенд на новой для нас технологии в супер-ускоренном режиме
За фронтенд-часть отвечала команда клиента, а нам предстояло взять на себя задачи по разработке бэкенда и админ-панели, хотя чаще всего мы делаем весь продукт целиком.
Конечно, работа с чужим кодом — это всегда немного вызов: кроме технической части, нужно еще наладить коммуникацию с разработчиками из команды клиента. Но для нас так работать не впервой — уже отточили подобный флоу на других проектах. Например, когда разрабатывали приложение для умных холодильников Vendify и CRM-систему для работы в полевых условиях (буквально!) для Koblik Group.
Сначала мы хотели делать бэкенд приложения WAW на своем обычном стеке NestJS. Но заказчик сказал, что так будет долго — не успеем. А успеть было важно: дата релиза уже объявлена, к ней привязывались маркетинговые активности и договоренности с вендорами.
Чтобы ускорить разработку, заказчик предложил использовать стек Firebase: он предлагает готовые решения. Мы никогда прежде не делали бэкенд на Firebase и решили, что это шанс освоить новую технологию.
Было одно но. Такое большое НО: мы оценили, что разработка займет 7 месяцев. Даже с учетом готовых решений от Firebase. И тогда…мы не успеем к дате, нужной клиенту. Как быть, что делать?
Нам невероятно нравился этот проект и мы не собирались сдаваться. Поэтому стали думать: а как еще возможно ускориться? И нашли решение.
Чтобы успеть к дедлайну, мы договорились с клиентом, что разделим все функции приложения на несколько фаз. Кроме того, мы сильно вывозили проект на своем энтузиазме и когда было необходимо, подключали еще ребят на помощь.
Времени глубоко погружаться в ресерч новой технологии не было, поэтому наши разработчики от теории тут же переходили к практике: изучили — внедрили, и это позволяло поддерживать быстрый темп.
Команда сплотилась и работала как конвейер. Забегая вперед, скажем: мы за 4 месяца успели то, что изначально оценивали в 7 месяцев.
Мы ожидали, что могут возникнуть сложности: все-таки работаем с новым стеком для бэкенда и новым типом базы данных Firestore. Но все прошло отлично и проблем не возникло.
Быстро разобраться с новой технологией нам помогла отличная коммуникация с командой клиента: с нами делились опытом и подсвечивали важные нюансы.
Инициативу проявил наш техлид — он выстроил регулярное общение с ответственным за техническую часть со стороны заказчика, который консультировал нас.
Еще плотно общались с фронтенд-разработчиками со стороны клиента, потому что было важно синхронизироваться в разработке. Конечно, это накладывало свои ограничения, но в итоге мы наладили хорошую коммуникацию, разделили зоны ответственности и вместе делали все, чтобы быстро разработать приложение.
Как все успеть к сроку и не выкидывать фичи? Расставить их по приоритетам
У заказчиков было много пожеланий по фичам, и если бы мы бросились разрабатывать все, везде и сразу, рисковали бы не успеть к дате релиза. Как все это учесть и не профакапить сроки?
Выкидывать фичи мы не могли, поэтому предложили другое решение, которое всех устроило: обозначили приоритет по каждой фиче, и на основе этого разделили версии приложения на четыре фазы.
Объясним, как это работает. На этапе первой фазы, или тизер-версии приложения, мы запланировали всю базовую функциональность, с которой будем делать релиз. А дополнительные функции, у которых не такой высокий приоритет, решили добавлять потом, попутно получая фидбек от пользователей и хорошо понимая, как ведет себя приложение, что называется, в боевых условиях.
В релиз мы запускали именно тизер-версию приложения WAW. А затем перешли к разработке фич для второй фазы.
Пока основная команда работала над функциями второй фазы, мы подключили других наших ребят для разработки отдельного приложения-сканера купонов. Разделение труда позволило нам за это же время сделать дополнительный продукт — при этом не пришлось жертвовать разработкой новых фич для WAW.
Приоритизация задач сыграла ключевую роль: мы оптимизировали фич-лист, выделили необходимые функции для релиза, остальное перенесли на потом, чтобы успеть в срок.
Распутываем сложный флоу в админке
Создание админ-панели оказалось одним из главных вызовов на проекте, хотя, как говорится, ничего не предвещало 🙂
Обычно мы делаем админки на стеке React Admin. Это конструктор с готовыми решениями, из которого можно максимально быстро собрать админ-панель. Быстро — значит, с экономией денег заказчика.
Так что преимущества такого подхода очевидны. Но есть и свои ограничения: у любого конструктора только базовый набор функций. Например, React Admin позволяет сделать админ-панель с такими фичами как управление пользователями, контроль прав доступа и менеджмент контента. Как правило, этого будет достаточно. Но если в админке нужно решать более сложные задачи, понадобится кастомная система.
Да, вы правильно поняли, к чему мы клоним 🙂 Именно такую кастомную систему нам пришлось пилить, используя при этом возможности конструктора React Admin для скорости.
Для начала объясним, почему в админке WAW такая сложная логика, а потом расскажем про наше решение. Обещаем, что не будем грузить вас всякими непонятными деталями!
WAW продает купоны, но условия их продажи могут сильно различаться. Чтобы описать эти условия, в системе создаются контракты — такие цифровые версии договоров. Контракт определяет все юридические аспекты продажи купонов в приложении — это важно для соблюдения законодательства.
Задача заключалась в том, чтобы все параметры контракта правильно отображались в приложении через админ-панель. У нас было 5 типов контрактов, каждый со своими уникальными условиями, которые нужно было корректно настроить в админке.
Сначала пошли по стандартному пути: сделали экраны админки на React Admin, но быстро поняли, что его возможностей недостаточно.
Чтобы сократить часы на разработку кастомной админки, решили сделать дизайн и разрабатывать по нему. Этот вариант позволил бы учесть всю сложную логику с контрактами.
Обычно мы не отрисовываем экраны админки — берем готовые компоненты из React Admin, поэтому на этапе работы с дизайном не думали, что нам понадобится подготовить макеты.
Подключили UI/UX дизайнеров. Чтобы ребята учли все нюансы системы и ничего не пропустили, им помогали фронтенд-разработчик, системный аналитик и бэкенд-разработчики. В итоге не только справились с задачей, а еще и научились делать кастомные админки и выжимать максимум возможностей из конструктора React Admin 🤘
Без лишних апрувов и блокеров: как мы выстроили коммуникацию с заказчиком
На проекте мы выстроили четкую систему коммуникации с заказчиком и его командой разработки — это помогало двигаться с хорошей скоростью и не срывать дедлайны.
Нужно было держать клиента в курсе всех наших шагов и согласовывать решения, чтобы укладываться в сроки и соответствовать ожиданиям по бюджету.
Мы понимаем, что не всегда у клиента есть возможность оперативно выходить на связь, моментально отвечать на наши вопросы или давать апрув. Но если просто сидеть и ждать, когда клиент ответит, есть риск застопорить проект — совсем не то, чего мы хотим. Как быть? Действовать проактивно! 😼 Поэтому мы договорились с клиентом, что:
- Часть неключевых решений проджект-менеджер может принимать самостоятельно.
- Стратегические вопросы выносим на обсуждение с заказчиками.
- При необходимости проектный менеджер идет напрямую к главному лицу со стороны заказчика.
Если на этапе активной разработки коммуникация шла гладко, то на саппорте возникли сложности, и вот почему: человек из США, который принимал ключевые решения, отошел от дел. Арабская сторона порой медлила с принятием решений и не всегда была готова брать на себя ответственность. Это осложняло процессы.
Мы работаем с клиентами из самых разных стран, и понимаем, что у всех свои особенности менталитета и стиль ведения бизнеса. Так что мы выдохнули, приняли это как данность и стали думать, как нам быть. И нашли выход 🙂
Чтобы ускорить работу и меньше зависеть от согласований, мы договорились с основным лицом, принимающим решения, какие вопросы можем решать самостоятельно, без апрува.
We’re all winners растет очень быстро, а проблем с масштабированием нет
Мы не ожидали, что приложение окажется таким популярным и придет столько много пользователей — жители Египта оказались фанатами купонов.
Только в первые два месяца после релиза у нас было 73 тысячи активных юзеров. С каждым днем их становилось все больше — примерно на 500 человек в день.
Круто! Но мы опасались проблем с масштабированием — готовились к тому, что нужно будет больше мощностей. В итоге инфраструктура работает стабильно и выдерживает нагрузку. У нас ни разу не упал бэкенд, даже в самый пик. А заказчика настолько поразил наш профессионализм, что он отправил своего DevOps’а к нам на обучение на полгода 😀
Небольшие трудности все-таки возникли, но мы нашли выход. Из-за стремительного роста популярности приложения у заказчика резко увеличились расходы на использование Google Auth — сервиса для отправки SMS-кодов при регистрации пользователей. Поэтому решили от него отказаться.
В сжатые сроки мы переписали функциональность авторизации, заменив Google Auth на интеграцию с местным SMS-провайдером. Так мы снизили затраты клиента и обеспечили стабильную работу системы без зависимости от сторонних сервисов.
За 4 месяца сделали то, что оценивали в 7 месяцев
Активную разработку мы начали в ноябре 2023 года, а первый релиз приложения в сторах состоялся в марте 2024 года — мы полностью уложились в сроки.
Помните, что изначально мы оценили работу в 7 месяцев? В итоге справились за 4 месяца — почти в два раза быстрее. Не в последнюю очередь благодаря мега-энтузиазму команды и огромной вовлеченности ребят, которые тащились от проекта 🤘
Заказчик был настолько доволен результатом, что мы смогли расширить объем работы и удвоить количество часов проекта.
Сейчас мы вышли в саппорт приложения — допиливаем фичи и фиксим мелкие баги.
Результат: 100k+ скачиваний, 130к юзеров за первые полгода и благодарные заказчики
Приложение We’re all winners доступно во всех сторах. WAW всего полгода, но за это время только в Google Play его скачали более 100 тысяч раз, а число активных пользователей перевалило за 130 тысяч.
Заказчик планирует расширяться и выходить на рынок Саудовской Аравии, в перспективе еще и Турция.
Недавно команда WAW приняла участие в масштабной конференции в Египте, где общалась с потенциальными вендорами и инвесторами — проект привлек много внимания.
И поблагодарили нас за огромный вклад: посмотрите, какие теплые слова написал клиент нашей команде!
Этот проект наша гордость. Еще бы: и бизнес-задачи клиента круто решили, и сами прокачались как команда разработки 💪
Вот чему мы научились:
делать архитектуру приложений на Firestore, с которым раньше не работали
по максимуму использовать возможности React Admin — теперь сделаем любую кастомную админку
подключать египетские платежные системы — а их тут было целых три, так что +3 в наш опыт работы с интеграцией локальных платежек
и, как просили передать наши QA-инженеры, «выстраивать эффективное взаимодействие с Firebase через Postman и интегрировать это в наши автотесты», чтобы это не значило).
И напоследок еще одно сообщение от клиента — чтобы растопить ваши сердца 😭 ❤
Мы в Purrweb обожаем искать решения для нестандартных задач. А про то, как справлялись с челленджами, рассказываем в кейсах. Еще больше историй о дизайне и разработке классных продуктов для бизнеса и стартапов - читайте в нашем блоге.
А пока поделитесь в комментариях: какое решение вам удалось найти, когда задача была масштабной, а сроки поджимали?
Я создателей kem видел в списке форбс 30 до 30. А это вы оказывается делали приложение. Прикольно.
Forbes еще отдельно писали про KEM, когда они привлекли инвестиции на первом этапе, и сообщили, что приложением пользуются более 100 000 человек. Сейчас, наверное, эта цифра еще больше.
Как будто тема с купонами уже неактуальна нет?
Смотря где и на что купоны :) Например, нашли такие данные, что в России в этом году люди стали покупать больше скидочных купонов на развлечения, чем несколько лет назад. Хотя раньше, действительно, число продаж было ниже. В что касается WAW, то цифры показывают, что аудитории интересно это приложение.
Классная история. Получается за все время не разу не было конфликтов с заказчиком?
Спасибо! Нет, ничего такого: мы были словно в одной лодке. Заказчики очень крутые и вовлеченные: и про бизнес думают, и про техническую сторону не забывают.
Какая-та прям сильно счастливая история, все у вас тут так классно…неужели никаких трудностей не было?