large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Сычева Софья

Product Design

NRJ case mocap web2.mp4

Редизайн сайта радио ENERGY, одной из крупнейших радиостанций России.

 <img src="/uploads/29_1dc7233e90.png">
<div>
<h3>Заряжающее радио</h3> 
<p>Радио ENERGY наши ребята слушают на постоянной основе, поэтому мы с большим воодушевлением приступили к работе над проектом. И прежде чем приступить к редизайну, начали с переосмысления подачи контента на сайте. А контента очень много: песни, тексты песен, информация об исполнителях, новости, передачи, информационные и развлекательные выпуски. Море информации, в которой нужно помочь слушателю сориентироваться.</p>
</div>

  <img src="/uploads/NRJ_Tagline_02_81951fff7c.jpg?updated_at=2023-03-31T14:19:36.024Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_03_b6c67272e3.jpg?updated_at=2023-03-31T14:19:36.803Z" alt="enter image description here">
<div>
<h3>Куда все это девать?</h3>
<div>
<p>Мы&nbsp;много работали над систематизацией огромного количество контента. Простая система тегов помогает найти исполнителя по&nbsp;жанру, список его треков, а&nbsp;также клипов. Все дополнили текстами песен с&nbsp;переводами, а&nbsp;также дополнительной интересной информацией. При этом пользователи могут помочь улучшить контент, предложив что-то редакции.</p>
</div>
</div>
  <img src="/uploads/NRJ_Tagline_04_80b795058c.jpg?updated_at=2023-03-31T14:19:34.328Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_05_3210874302.jpg?updated_at=2023-03-31T14:19:34.788Z" alt="enter image description here">
  <div>
<h3>Плеер</h3>
<div>
  <p>Самая главная фишка в&nbsp;плеере — ни&nbsp;у&nbsp;кого такого плеера нет. Звучит амбициозно? Да. Но если посмотреть, то на&nbsp;сайтах радиостанций вообще редко размещают полноценные плееры, а для ENERGY мы сделали историю прослушивания, тексты песен, переключения потоков. </p>
</div>
</div>
  <img src="/uploads/NRJ_Tagline_06_f3dbdc6c9d.jpg?updated_at=2023-03-31T14:19:34.774Z" alt="enter image description here">
  <img src="/uploads/NRJ_Tagline_07_f510b09f01.jpg?updated_at=2023-03-31T14:19:36.366Z" alt="enter image description here">
    <div>
<h3>Что же в итоге?</h3>
<div>
  <p>Над этим кейсом у нас работали самые основательные и вдумчивые ребята, потому что продумать логику такого количества контента было по-настоящему непросто. Но мы с задачей справились, ко всему прочему прикрутив еще полноценный плеер. Все это позволяет очень долго удерживать пользователя на сайте и вовлекать его в новые активности, получать обратную связь и постоянно совершенствовать контент. </p>

NRJ case mocap gor 2_00.png

Радио ENERGY

NRJ case mocap render_00.jpg

Воронова Мария

Хамзин Эдуард

Цаголов Владимир

cover.webp

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

<div>
<h3>От порядка к порядку</h3>
<p>Заказчик пришел с&nbsp;задачей создать self-service портал для инвентаризации продуктов и&nbsp;управления их&nbsp;жизненным циклом. Система нужна, чтобы поддерживать продуктовый каталог в&nbsp;актуальном состоянии и&nbsp;получать дополнительную информацию о&nbsp;его элементах. С&nbsp;помощью системы сотрудники могут создавать типовые шаблоны, вычислять с&nbsp;их&nbsp;помощью показатели для индивидуальных программных сервисов, ĸомпонентов, продуктов и&nbsp;бизнес-активностей. Чем удобнее будет система, тем быстрее и&nbsp;легче пользователи получат удобный доступ к&nbsp;внутренней информации.</p>
</div>

<img src="/uploads/v_V_G_M_L_2a3b80e4ee.webp">

</div>
<div>
<h3>Что было не&nbsp;так с&nbsp;системой</h3>
<p>Это ее&nbsp;перегруженный и&nbsp;одновременно недогруженный интерфейс. Перегруженный с&nbsp;точки зрения чистоты дизайна, при этом недостаточно удобный с&nbsp;точки зрения UХ. А&nbsp;еще внутри системы недоставало важных функций и&nbsp;сценариев, которые&nbsp;бы охватывали все необходимые рабочие ситуации. Нам было важно это исправить. От&nbsp;изначальной версии оставили только верхнеуровневую навигацию&nbsp;&mdash; логику разделов. Остальное дополнили и&nbsp;разработали с&nbsp;нуля.</p>
</div>

<img src="/uploads/208189208176208187208190209129209140_74fb43bab6.webp">

</div>
<div>
<h3>Формирование логики</h3>
<p>Никто лучше заказчика не&nbsp;знает, что ему нужно получить в&nbsp;итоге. Никто лучше нас не&nbsp;знает, как прийти к&nbsp;идеальному результату в&nbsp;итоге. Поэтому всю внутреннюю логику системы мы&nbsp;разрабатывали вместе. Изначально нам предоставили пул неструктурированных данных, из&nbsp;которых должен получиться итоговый продукт. На&nbsp;совместных созвонах мы&nbsp;формировали логику и&nbsp;предлагали гипотезы. Затем дизайнеры отрисовывали интерфейс и&nbsp;передавали техническое задание разработчикам. Цикл продолжался раз за&nbsp;разом, пока все нужные фичи не&nbsp;были готовы. Он&nbsp;продолжается и&nbsp;сейчас: в&nbsp;ходе эксплуатации становится понятно, какие функции еще нужно добавить, а&nbsp;какие со&nbsp;временем оказываются не&nbsp;нужными.</p>
</div>

<img src="/uploads/4_208164208190209128208188209139_f03b3127cc.webp">

</div>
<div>
<h3>Этап разработки</h3>
<p>Команда дизайнеров предоставила внутреннему отделу разработки Mish готовый UI-Kit. Мы&nbsp;собрали библиотеку компонентов, чтобы можно было быстро собирать функциональный интерфейс. Для это выбрали решения React и&nbsp;Storybook. Основная сложность разработки была в&nbsp;интеграции и&nbsp;получении данных из&nbsp;внутренних систем заказчика и&nbsp;в&nbsp;обратной синхронизации. Для бэкенда выбрали next.js, express и&nbsp;базу данных postgreSQL. Чтобы взаимодействовать с&nbsp;серверной частью, использовали REST API. Так получилось забрать данные из&nbsp;нашего портала и&nbsp;предоставить другим системам заказчика получать обновленные данные. Дополнительно организовали ролевую модель для серверной и&nbsp;клиентской частей системы. Этим занимались тестировщики в&nbsp;команде&nbsp;&mdash; и&nbsp;в&nbsp;итоге за&nbsp;две недели плотной работы проверили каждую виртуальную щель на&nbsp;безопасность.</p>
</div>

<img src="/uploads/a_A_V_e4e839b082.webp">

</div>
<div>
<h3>Информационная структура</h3>
<p>Готовую админку мы&nbsp;взяли за&nbsp;основу&nbsp;&mdash; и&nbsp;полностью переделали. Отрисовали интерфейсы для трех ролей: самых частотных пользователей, которые имеют дело с&nbsp;системой. В&nbsp;итоге получилась многоуровневая структура с&nbsp;древом навигации, полноценной контентной частью и&nbsp;масштабным новым функционалом.</p>
</div>

<img src="/uploads/209131208186209130209131209128208176_5ffaff35e5.webp">

</div>
<div>
<h3>Дашборды</h3>
<p>Большая часть системы&nbsp;&mdash; это разнообразные таблички. Их&nbsp;создают сами пользователи, а&nbsp;потом к&nbsp;делу приступают архитекторы. Все дашборды отображаются в&nbsp;трех видах, и&nbsp;пользователи продукта могут сами выбрать, какое именно отображение им&nbsp;кажется более удобным. Мы&nbsp;привели все к&nbsp;единому виду, чтобы пользователи быстро считывали контент на&nbsp;разных продуктах и&nbsp;так&nbsp;же быстро получали нужную им&nbsp;информацию.</p>
</div>

<video
src="/uploads/6208177208190209128208180_60fps_v1_0_d80f6b9c35.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Сущности</h3>
<p>Так внутри компании называют информационные продукты, которые создают и&nbsp;затем курируют сотрудники. Чтобы запустить процесс, нужно заполнить очень сложные формы&nbsp;&mdash; но&nbsp;так, чтобы это было максимально просто. Мы&nbsp;сделали многоуровневую форму с&nbsp;разнообразными критериями, организовали удобное поэтапное заполнение, разделили критерии на&nbsp;шаги. Здесь&nbsp;же есть режим просмотра: в&nbsp;нем все, что внес в&nbsp;карточку пользователь, отображается в&nbsp;структурированном виде.</p>
</div>

<img src="/uploads/209137208189208190209129209130208184_cd5691dc2c.webp">

</div>
<div>
<h3>Взгляд в&nbsp;прошлое и&nbsp;будущее</h3>
<p>В&nbsp;августе 2020 года мы&nbsp;выиграли тендер по&nbsp;проекту, сама реализации идет с&nbsp;2021&nbsp;&mdash; и&nbsp;продолжается до&nbsp;сих пор. Сначала была полноценная разработка, а&nbsp;сейчас мы&nbsp;на&nbsp;поддержке и&nbsp;пилим новые фичи по&nbsp;запросу заказчика.</p>
</div>

Сычева Софья

The brief doesn't fill in on its own

hello@mish.design

Moscow

Nizhny Novgorod