Разработали космический портал для немецкой фармацевтической компании

Привет, это студия веб-разработки GRCH! Мы разрабатываем, поддерживаем и масштабируем цифровые продукты. Компания Woerwag пришла к нам за закрытым корпоративным порталом. Цель — довольные и сплочённые сотрудники. Эта задумка показалась нам очень милой и классной, поэтому тут же начали работу над проектом. Рассказываем, как сделали портал и дошли от идеи до целого космоса — со своими кораблями и пилотами 🛸.

Woerwag — международная фармацевтическая компания. Начала свой путь более 50 лет назад в Германии, а сейчас предлагает лекарства и БАДЫ в 35 странах, включая нашу. Например, Цинкит, Магнерот, Д3-Гамма и другие препараты.

Создать закрытый портал для проведения активностей, чтобы сблизить сотрудников.

Какие возможности должны быть в системе:

— проведение викторины и опросов,

— загрузка пользовательского контента,

— награждение по итогам активностей.

Заказчики не хотели, чтобы «Woerwag Game Project» была связана с брендом и направлением компании. Вместо этого осталось пожелание — взять тему космоса и сделать это креативно. Что мы и сделали :)

Сейчас расскажем, как прошли путь от концепции до реализации 🚀

Мы пошли нестандартным путём — начали не с разработки прототипа, а с концепции. За референс взяли атмосферу игр 2000-х и подготовили несколько вариантов.

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

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

Мы хотели, чтобы сотрудники с первых касаний погружались в космическое пространство. Поэтому стилизовали регистрацию под анкету пилота.

Когда ты логинишься, то видишь на экране визуал и текстовый контент в стиле платформы. Ты не просто пользователь, а пилот. Больше нет имени и должности! Есть позывной.

Для входа пользователь вводит логин и пароль, выбирает свой корабль (подразделение компании). И начинает прохождение.

Для каждой команды придумали свои корабли, которые делятся по подразделениям.

Пилоты летают на кораблях по планетам и выполняют задания. Чтобы было удобно перемещаться по страницам, мы продумали меню.

Заказчик хотел добавить функционал загрузки фотографий на портал. Мы посмотрели разные варианты и предложили ориентироваться на механику запрещенной социальной сети.

Так у нас получился свой бортовой журнал с событиями и лайками.

Мы разработали платформу с планетами: Меркурий, Марс, Венера и Юпитер. У каждой есть своя активность и назначение. Например, на Венере и Юпитере реализовали загрузку пользовательского контента с лайками.

У каждой планеты есть свои отличия. Сейчас расскажем.

Меркурий — планета с квизами

В каждой викторине есть 5 вопросов, на которые дается 30 секунд.За каждый правильный ответ пилот получает баллы. Мы добавили вопросы о компании, чтобы сотрудники больше узнали о месте, где работают.

Марс — планета предложений

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

Венера — планета фото

Клиент задает тематику, а сотрудники делают фото в рамках заданной темы и получают за них лайки.

Юпитер — планета активности, похожая на Венеру

Это командный блок, где сотрудник публикует предложение, но баллы получает вся команда.

Чтобы активностями и контентом было удобно управлять, мы настроили административную панель на базе Django.

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

Вовлечь пользователей

В этом нам помогли игровые механики типа квиза или командных блоков с баллами.

Унифицировать способы взаимодействия

Кроме игрового взаимодействия мы сделали стандартное, поэтому аудитория любого возраста может участвовать в игре :)

Настроить административную панель

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

На проекте мы использовали React JS + Python.

С самого начала общения с клиентом мы предполагали, что сайт получится достаточно динамичным — с плотным насыщением различного рода 2D-анимациями. На самом проекте мы уже учитывали масштабирование — клиент планировал добавлять новые планеты, активности и решения по анимации.

React позволяет удобнее управлять локальным состоянием

Также, закрывает вопрос оптимизации, за счёт «умной» отрисовки/перерисовки компонентов. Благодаря этому, приложение откликается быстрее и пользователю визуально приятнее.

Django CMS же упрощает и ускоряет разработку веб-приложения

Сама структура проектов на Django имеет достаточно модульную систему. Это позволяет разбить проект на компоненты и разрабатывать каждый отдельно. Так мы убираем путаницу в проекте и переписывание одного и того же кода.

Разработчики следят за безопасностью, а это значит, что в проектах Django изначально есть различного рода защиты безопасности.

А ещё поделитесь, что бы вы улучшили в проекте и почему? Будет интересно узнать ваше мнение со стороны дизайна и разработки :)

Приходите к нам за разработкой и тестированием. Мы подумаем о реализации, подскажем технические моменты и займемся разработкой. Пишите нам на почту hello@grechka.digital или сразу оставьте заявку на сайте.

Заглядывайте в наш телеграм канал, где мы пишем о работе с клиентами, кейсах и внутрянке студии.