Разработали космический портал для немецкой фармацевтической компании
Привет, это студия веб-разработки GRCH! Мы разрабатываем, поддерживаем и масштабируем цифровые продукты. Компания Woerwag пришла к нам за закрытым корпоративным порталом. Цель — довольные и сплочённые сотрудники. Эта задумка показалась нам очень милой и классной, поэтому тут же начали работу над проектом. Рассказываем, как сделали портал и дошли от идеи до целого космоса — со своими кораблями и пилотами 🛸.
Клиент
Woerwag — международная фармацевтическая компания. Начала свой путь более 50 лет назад в Германии, а сейчас предлагает лекарства и БАДЫ в 35 странах, включая нашу. Например, Цинкит, Магнерот, Д3-Гамма и другие препараты.
Задача
Создать закрытый портал для проведения активностей, чтобы сблизить сотрудников.
Какие возможности должны быть в системе:
— проведение викторины и опросов,
— загрузка пользовательского контента,
— награждение по итогам активностей.
Заказчики не хотели, чтобы «Woerwag Game Project» была связана с брендом и направлением компании. Вместо этого осталось пожелание — взять тему космоса и сделать это креативно. Что мы и сделали :)
Сейчас расскажем, как прошли путь от концепции до реализации 🚀
Концепция
Мы пошли нестандартным путём — начали не с разработки прототипа, а с концепции. За референс взяли атмосферу игр 2000-х и подготовили несколько вариантов.
Клиент полностью доверял нашему опыту в веб-дизайне, поэтому мы с первого раза выбрали и согласовали концепцию.
После этого перешли к разработке функционала и дизайна. Сейчас расскажем, что именно мы детально прорабатывали, чтобы вписаться в концепцию космоса.
Космическое пространство
Мы хотели, чтобы сотрудники с первых касаний погружались в космическое пространство. Поэтому стилизовали регистрацию под анкету пилота.
Когда ты логинишься, то видишь на экране визуал и текстовый контент в стиле платформы. Ты не просто пользователь, а пилот. Больше нет имени и должности! Есть позывной.
Для входа пользователь вводит логин и пароль, выбирает свой корабль (подразделение компании). И начинает прохождение.
Уникальные корабли
Для каждой команды придумали свои корабли, которые делятся по подразделениям.
Пилоты летают на кораблях по планетам и выполняют задания. Чтобы было удобно перемещаться по страницам, мы продумали меню.
Горизонт событий
Заказчик хотел добавить функционал загрузки фотографий на портал. Мы посмотрели разные варианты и предложили ориентироваться на механику запрещенной социальной сети.
Так у нас получился свой бортовой журнал с событиями и лайками.
Планеты
Мы разработали платформу с планетами: Меркурий, Марс, Венера и Юпитер. У каждой есть своя активность и назначение. Например, на Венере и Юпитере реализовали загрузку пользовательского контента с лайками.
У каждой планеты есть свои отличия. Сейчас расскажем.
Меркурий — планета с квизами
В каждой викторине есть 5 вопросов, на которые дается 30 секунд.За каждый правильный ответ пилот получает баллы. Мы добавили вопросы о компании, чтобы сотрудники больше узнали о месте, где работают.
Марс — планета предложений
Пилот рассказывает, что полезного и инновационного он придумал для компании. И если предложение набирает больше всего лайков, то рейтинг пилота повышается вместе с шансом стать руководителем.
Венера — планета фото
Клиент задает тематику, а сотрудники делают фото в рамках заданной темы и получают за них лайки.
Юпитер — планета активности, похожая на Венеру
Это командный блок, где сотрудник публикует предложение, но баллы получает вся команда.
Панель администратора
Чтобы активностями и контентом было удобно управлять, мы настроили административную панель на базе Django.
Теперь без нашего вовлечения клиент может модерировать викторины и фото челленджи, управлять персональным и командным рейтингами портала.
Что получилось в итоге
Вовлечь пользователей
В этом нам помогли игровые механики типа квиза или командных блоков с баллами.
Унифицировать способы взаимодействия
Кроме игрового взаимодействия мы сделали стандартное, поэтому аудитория любого возраста может участвовать в игре :)
Настроить административную панель
Клиент может самостоятельно модерировать викторины и фото челленджи, управлять персональными и командными рейтингами портала.
Что про нашу работу думает клиент
За время совместного сотрудничества сотрудники Web-студии «GRCH.Digital» продемонстрировали высокий уровень профессионализма, безукоризненное соблюдение профессиональной этики и широкий спектр компетенций, оказывая нам активную и результативную поддержку в решении текущих задач. Выражаем уверенность в сохранении профессиональных взаимоотношений, надеемся на продолжение плодотворного сотрудничества!
Стек
На проекте мы использовали React JS + Python.
С самого начала общения с клиентом мы предполагали, что сайт получится достаточно динамичным — с плотным насыщением различного рода 2D-анимациями. На самом проекте мы уже учитывали масштабирование — клиент планировал добавлять новые планеты, активности и решения по анимации.
React позволяет удобнее управлять локальным состоянием
Также, закрывает вопрос оптимизации, за счёт «умной» отрисовки/перерисовки компонентов. Благодаря этому, приложение откликается быстрее и пользователю визуально приятнее.
Django CMS же упрощает и ускоряет разработку веб-приложения
Сама структура проектов на Django имеет достаточно модульную систему. Это позволяет разбить проект на компоненты и разрабатывать каждый отдельно. Так мы убираем путаницу в проекте и переписывание одного и того же кода.
Разработчики следят за безопасностью, а это значит, что в проектах Django изначально есть различного рода защиты безопасности.
Пишите в комментариях, какой корабль бы выбрали и на какую планету полетели?
А ещё поделитесь, что бы вы улучшили в проекте и почему? Будет интересно узнать ваше мнение со стороны дизайна и разработки :)
Приходите к нам за разработкой и тестированием. Мы подумаем о реализации, подскажем технические моменты и займемся разработкой. Пишите нам на почту hello@grechka.digital или сразу оставьте заявку на сайте.
Заглядывайте в наш телеграм канал, где мы пишем о работе с клиентами, кейсах и внутрянке студии.