### **[Ссылка на проект в Figma](https://www.figma.com/design/ZvKDSEIIGfITXiwY4NYWvb/Onyx?m=auto&t=hm9XeYr2j35ZwWe7-6)**

### Проект постоен на [дизайн-системе](https://read.cv/irinabogdanova/VK9TDDo4j88qACPBb0Ed)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F4cf00c02-d18c-4e57-af00-9a849a45216b.png?alt=media&token=d59e82e1-0e5e-4e8c-bdb0-f3ff58bf15e0","id":"4cf00c02-d18c-4e57-af00-9a849a45216b","width":2072,"height":716,"filename":"Снимок экрана 2024-10-07 в 18.48.36.png","type":"image/png","caption":"","border":false}]}
```

### **О проекте**

Единая платформа приема, обработки и представления данных. \
(NDA-проект, подробнее о котором готова рассказать на собеседовании).**\
\
Цель:** Найти информацию в загруженных документах, используя полнотекстовый поиск.

### **Моя роль в проекте**

* Работала по тз совместно с дизайн-лидом

* Участие в ежедневных синках команды для обсуждения плана работ \
  и презентация прогресса внутри команды

* Разработка новых сценариев и проработка user flow

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

* Взаимодействие с разработчиками и передача проекта на front-end

### **Основные сценарии поисковой системы**

**1. Пользователь заходит в сервис** \
\
Система отображает пользователю главную страницу поиска на которой отображены:

* поисковая строка

* кнопка \[Найти\]. Неактивна при пустой строке поиска

* общее количество проиндексированных системой файлов "Найдено: 123 493 из 853 537 документов”

* количество родительских файлов "Уникальных документов: 74

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2Fc4467c0f-64cf-43eb-9993-2e47c56e2ccb.png?alt=media&token=4a4316da-8fb0-45ff-9c5d-27cd9f4ba006","id":"c4467c0f-64cf-43eb-9993-2e47c56e2ccb","width":2600,"height":1480,"filename":"Frame 5735.png","type":"image/png","caption":"","border":false}]}
```

\
**2. Пользователь вводит запрос в поисковую строку.**

* Система предлагает автодополнение и подсказки на основе введенных данных

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F13830baf-db2f-4f26-a09e-18e9c7f0bd3a.png?alt=media&token=5e44d46e-b9f5-4ee8-a4c7-af5b42e07a94","id":"13830baf-db2f-4f26-a09e-18e9c7f0bd3a","width":1950,"height":1110,"filename":"Frame 5736.png","type":"image/png","caption":"","border":false}]}
```

\
**3. Пользователь нажимает кнопку "Найти" или нажимает ENTER.**

* Система производит поиск

* Система отображает результаты поиска по мере их обнаружения с подсветкой найденных объектов и фильтры (в правой части экрана).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F964fe284-1e53-4910-a898-ac38f2a34036.png?alt=media&token=caecc3c5-7671-4433-8b87-d2ef723c5887","id":"964fe284-1e53-4910-a898-ac38f2a34036","width":1300,"height":740,"filename":"Frame 5738.png","type":"image/png","caption":"","border":false}]}
```

**Система отображает:**

* поисковую строку с введенным объектом поиска

* результаты поиска с выделением найденного объекта в тексте найденные в документе именованные сущности под текстом документа, в котором был найден объект

* фильтры в правой части экрана, фильтры – список найденных сущностей для постфильтрации результатов поиска

* кнопки \[+\] напротив каждого фильтра

* кнопку скачивания документа рядом с кнопкой \[Предпросмотр\]

* в результатах parquet-файлов отображаются мини фотографии\\видео\\аудио, найденные в этом файле

**Фильтры** – это возможность сузить круг поиска выбрав интересующие именованные объекты, найденные при индексации документов. \
\
Объекты найденные при индексации:

* Уникальные документы

* Даты документов

* Люди

* Организации

* Номера телефонов

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2Fe1e7d581-8554-4145-bf37-f224ee4df3ec.png?alt=media&token=ef775667-5bc2-4b0a-8fea-6b1843e769b7","id":"e1e7d581-8554-4145-bf37-f224ee4df3ec","width":1476,"height":891,"filename":"Frame 6846.png","type":"image/png","caption":"","border":false}]}
```

Инструменты добавленные пользователем:

* Теги

Напротив каждого фильтра, в скобках, указывается количество раз, которое попадается в документах данная информация. Система отображает по 5 найденных объектов каждого типа и кнопки "Показать больше"/"Показать меньше".

Напротив названия каждого документа расположены кнопка скачивания.

**Важные достижения:**

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F4fab2a37-d0d5-4a16-8fa9-c5b8cc7a4bd5.png?alt=media&token=f9b07f30-2964-448e-8d19-5c84c2036637","id":"4fab2a37-d0d5-4a16-8fa9-c5b8cc7a4bd5","width":1360,"height":1060,"filename":"Frame 2000.png","type":"image/png","caption":"","border":false}]}
```

* Предпросмотр документа из результата поиска открывается по клику на название документа (вместо отдельной ссылки "предпросмотр")

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2Fc0ea0410-2f81-47d4-89da-791d51866911.png?alt=media&token=a8f40ffc-a534-4ae1-9b8f-2fd1cb6ea83a","id":"c0ea0410-2f81-47d4-89da-791d51866911","width":2600,"height":1480,"filename":"Frame 6847.png","type":"image/png","caption":"Кликаем на название документа","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2Fd4db14db-d8ac-4c18-b2c8-bc51c13e2575.png?alt=media&token=8a4b4821-22f4-4308-acb0-07758f439539","id":"d4db14db-d8ac-4c18-b2c8-bc51c13e2575","width":2600,"height":1480,"filename":"Frame 6848.png","type":"image/png","caption":"В новом окне открывается карточка совпадений","border":false}]}
```

* В фильтр результатов поиска добавила фильтр по списку уникальных документов, отсортированных по убыванию найденных в них совпадений в скобках (например, bukvoed.csv (20), ashan.csv (15), ...), что помогло ускорить процесс работы с фильтрами

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F4dd16b55-2549-42d4-95be-39654851cd14.png?alt=media&token=b9af1054-3312-473e-b320-b94f5592522a","id":"4dd16b55-2549-42d4-95be-39654851cd14","width":2600,"height":1480,"filename":"Frame 6849.png","type":"image/png","caption":"","border":false}]}
```

**Дополнительная информация\
\
Команда:**\
– Руководитель проекта\
– Дизайн-лид\
– Дизайнер (я)\
– Системный аналитик\
– Команда разработчиков

**Инструменты**

Adobe XD, Figma, Gitlab, Jira, Confluence.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FMzSan72uRgGhGE2sqQLQ%2F73041a6b-f67b-449c-810e-6c2e6571bbcf.png?alt=media&token=dce74184-a048-4b9c-aaff-01c7fee47690","id":"73041a6b-f67b-449c-810e-6c2e6571bbcf","width":964,"height":1216,"filename":"%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0_2024-07-11_%D0%B2_12.46.49.png","type":"image/png","caption":"","border":false}]}
```

Onyx

Дизайн-система содержит обширный набор компонентов и их описаний. \
На странице навигации можно увидеть детальное количество компонентов. \
\
[Ссылка на дизайн-систему в Figma](https://www.figma.com/design/mGBYnrC4UI3uIyV2UrJiqm/Design-system?node-id=3-28&t=jJqsVM1dFS1hL46D-1)\
\
Большая часть проектов в моем портфолио состоит из компонентов данной дизайн-системы:\
\
[Uploader](https://read.cv/irinabogdanova/x5AfV1wgpgrDlcilvVg4) \
[Hellbat](https://read.cv/irinabogdanova/eefhm66sbSU16UExiSQA)\
[Onyx](https://read.cv/irinabogdanova/MzSan72uRgGhGE2sqQLQ)\
\
Подробнее о системе готова рассказать на собеседовании.\
**\
Cодержание**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F48bf972f-7fdb-4dbe-aa71-9d08360eb8b9.png?alt=media&token=e918944e-a473-4997-ba43-784e812292c3","id":"48bf972f-7fdb-4dbe-aa71-9d08360eb8b9","width":1960,"height":1061,"filename":"Frame 6804.png","type":"image/png","caption":"","border":false}]}
```

В процессе разработки принимали участие три дизайнера. \
Больше всего я занималась следующими компонентами:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F7f063f66-ae83-4857-9e20-3ef445702d85.png?alt=media&token=6d95b996-536d-450d-a5f6-fe05aacaa9b7","id":"7f063f66-ae83-4857-9e20-3ef445702d85","width":1940,"height":2099,"filename":"Frame 6817.png","type":"image/png","caption":"","border":false}]}
```

**\
Собрала библиотеку цветов**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fbd38ec35-9cbe-448d-876b-7bdf501ebfb0.png?alt=media&token=5de0e9b2-156c-441a-b0da-a8c5a1221a04","id":"bd38ec35-9cbe-448d-876b-7bdf501ebfb0","width":2838,"height":4244,"filename":"Frame 6804.png","type":"image/png","caption":"","border":false}]}
```

**Иконки\
\
Проблема**\
Основная проблема заключалась в том, что мы переходили на новый дизайн. Тогда мы работали с фреймворком **blueprint.js**, и он не всегда отвечал требованиям. Также было желание сделать собственный пакет иконок, который можно было бы легко дополнять и изменять по мере необходимости.\
\
**Решение** \
Я разработала новые иконки (435шт), которые наша команда использовала и использует в своих проектах. По мере необходимости пак пополняется новыми иконками. Создание своих иконок помогло привести проекты к единой стилистики.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fb736cf7a-7f41-4f7f-8374-023e18e0750a.png?alt=media&token=0fb52a48-ca1f-42c3-9035-8c5bc438dd93","id":"b736cf7a-7f41-4f7f-8374-023e18e0750a","width":2838,"height":2748,"filename":"Frame 6804.png","type":"image/png","caption":"","border":false}]}
```

Каждую иконку я рисовала по сетке, толщина линий 20 px\
\
**После отрисовки иконки:**\
\- переводила ее в кривые \
\- создавала union selection \
\- переименовывала \
\- создавала компонент \
\- экспортировала в svg \
\- заводила задачу фронтам на gitlab и прикрепляла иконку

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F9c7ff7f5-1600-4533-9515-4861cd5e761e.png?alt=media&token=8832a43c-041d-4208-9491-c6e444518f41","id":"9c7ff7f5-1600-4533-9515-4861cd5e761e","width":2838,"height":1269,"filename":"Frame 6818.png","type":"image/png","caption":"","border":false}]}
```

Все рекомендации по использованию и размерам иконок подробно прописаны в дизайн-системе.

**\
Buttons\
\
Properties:**\
**color:** grey/blue/red/orange/transparent – выбираем в зависимости от ситуации (см описание компонента)\
**icon left:** false/true\
**icon right:** false/true\
**pick icon**\
**text:** false/true\
**large:** false/true\
**state:** default, hover, disabled, pressed (только для серой)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F046ddca1-7cc1-4a15-b9c5-010b893e268a.png?alt=media&token=68f86298-0eb3-4cf2-ad26-22d0a7ef784d","id":"046ddca1-7cc1-4a15-b9c5-010b893e268a","width":1805,"height":2517,"filename":"Frame 6804.png","type":"image/png","caption":"","border":false}]}
```

**Checkbox\
\
Properties:**\
**type:** checkbox/radiobutton\
**picked:** true/false\
**hover:** true/false\
**disabled:** true/false\
**tick** (для чекбокса) – галочка/минус в контейнере – если есть вариант “все варианты”, то, когда выбраны не все варианты, в контейнере не галочка, \
а минус\
**text:** true/false

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F389f6906-505d-4a72-9b97-b7ec242999e5.png?alt=media&token=d08e5996-9aa9-4439-9dd4-4794162a41b2","id":"389f6906-505d-4a72-9b97-b7ec242999e5","width":1254,"height":688,"filename":"Снимок экрана 2024-10-02 в 12.45.18.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F24e8b7bb-cee5-4e1e-95ff-a9b35766351a.png?alt=media&token=bf4f18b0-f7d1-4375-96f9-a67505b1ddd1","id":"24e8b7bb-cee5-4e1e-95ff-a9b35766351a","width":1800,"height":1463,"filename":"Frame 6804.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fbce26c6b-6121-4123-9a62-4be045b51c67.png?alt=media&token=cab146c1-a815-4ddc-8ce4-064e5af365d4","id":"bce26c6b-6121-4123-9a62-4be045b51c67","width":1320,"height":1686,"filename":"Frame 6821.png","type":"image/png","caption":"","border":false}]}
```

**Pagination\
\
Properties:**\
**pages** – компоненты страниц, выбираем свойства в зависимости от ситуации:\
отображение кол-ва строк или групп \
**size** – standard или mini\
**picked** – страница выбрана\
**pinned** – страница закреплена\
**pages** – количество страниц - до 8, до 88 , до 888 или до 8 888. \
Вручную скрываем лишние страницы \
**position** – выбираем расположение - первая страница, середина или последняя страница. Если нужна вторая страница, выбираем состояние страницы вручную\
**search** – если страниц до 7, поиск не показываем

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F9a686508-3fd0-4b99-b255-386f58b8ae48.png?alt=media&token=9849debe-7cc6-44eb-8029-452f4be2ae7e","id":"9a686508-3fd0-4b99-b255-386f58b8ae48","width":1841,"height":2195,"filename":"Frame 6827.png","type":"image/png","caption":"","border":false}]}
```

**Tags\
\
Properties:**\
**state** – состояние: дефолт, наведение, наведение на крестик (только для режима редактирования)\
**cross** – значение true при режиме редактирования\
**large** – true/false\
**inverse icon** – true/false\
\
Вручную ничего не красим и не скрываем\
\
**Основная проблема** при создании тегов заключалась в том, что они слишком похожи на кнопки. Это путало пользователей. \
\
**В качестве решения** я предложила скруглить углы на 4 px (было скругление 4, стало 8) и добавить иконку хэштега (опционально).

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Ff12568b2-6d95-4b53-802d-03b0117aaf0b.png?alt=media&token=08569150-9d0b-4a25-98cc-e8d2d3709845","id":"f12568b2-6d95-4b53-802d-03b0117aaf0b","width":1724,"height":905,"filename":"Frame 6822.png","type":"image/png","caption":"","border":false}]}
```

**Counter\
\
Properties:\
size:** 4 размера\
**colored:** true/false – если счетчик цветной, то выбираем true. \
Цвет выбираем вручную. Если счетчик серый, выбираем false\
**hover:** true/false. \
Для цветного и серого счетчиков наведение разное\
**disabled:** true/false

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F50f78166-5f79-4e92-a56e-8342dc9f4723.png?alt=media&token=81d9697c-5470-461e-81ec-1cc6ee1d7704","id":"50f78166-5f79-4e92-a56e-8342dc9f4723","width":1062,"height":1037,"filename":"Frame 6825.png","type":"image/png","caption":"","border":false}]}
```

**Tabs**\
\
**Properties:**\
**icon:** true/false\
**state:** дефолт, наведение, выбрана, недоступна\
\
Вручную ничего не скрываем и не красим\
Масштабируется в ширину

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F3010f032-4fa5-4f12-b5fb-8479df5f5153.png?alt=media&token=a484014e-3de5-42eb-8333-7f24966fe357","id":"3010f032-4fa5-4f12-b5fb-8479df5f5153","width":1841,"height":944,"filename":"Frame 6828.png","type":"image/png","caption":"","border":false}]}
```

**Image card\
\
Properties:**\
**hover** – true/false – наведение\
**pressed** – true/false – нажата\
**picked** – true/false – выбрана (зеленая галочка)\
\
Внутри компонент фото – можно менять фотографию\
При наведении появляется компонент control panel – внутри него свои настройки\
\
Масштабируется, внутри вручную ничего не красим

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F68f85fbc-9f76-4f7a-bf98-6ce9de0e1674.png?alt=media&token=4f207cf4-4e34-4cba-9621-07a6b808200b","id":"68f85fbc-9f76-4f7a-bf98-6ce9de0e1674","width":1841,"height":2274,"filename":"Frame 6824.png","type":"image/png","caption":"","border":false}]}
```

**Control panel\
\
Properties:**\
**checkbox, zoom, edit, delete - true/false** – выбираем набор иконок, необходимый на панели\
**picked** - определяет состояние чекбокса и отображение статуса “выбрано” (зеленая галочка)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F3c68d2f4-deea-4f3d-a1ba-7319b255395b.png?alt=media&token=24954c57-4158-4245-9e52-d0262c5def7c","id":"3c68d2f4-deea-4f3d-a1ba-7319b255395b","width":1841,"height":2391,"filename":"Frame 6826.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fc596220c-4831-4b64-97ff-ad4c1b0feefb.png?alt=media&token=ff6b6062-6587-45b2-9312-b60a4afb7e76","id":"c596220c-4831-4b64-97ff-ad4c1b0feefb","width":2531,"height":1620,"filename":"map 2.0.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F535baf51-f5f8-4dde-b080-098b9e63746e.png?alt=media&token=8cc58c0b-1c6a-481f-aeb0-89a858f674cc","id":"535baf51-f5f8-4dde-b080-098b9e63746e","width":3534,"height":1620,"filename":"map 2.0-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F1e773e53-8dfb-4041-b598-d5c0123365a1.png?alt=media&token=696d4d68-75bd-482a-9b83-07067b76329b","id":"1e773e53-8dfb-4041-b598-d5c0123365a1","width":3594,"height":1772,"filename":"map 2.0-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F2af2e209-3b99-4624-8a1c-38c6f64b0c81.png?alt=media&token=0d494bdb-29e9-4c5f-b37e-2a89bbaa9c65","id":"2af2e209-3b99-4624-8a1c-38c6f64b0c81","width":1679,"height":1620,"filename":"map 2.0-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F06e771ea-9b9b-48f4-9be1-03d3b39d75fd.png?alt=media&token=967a274e-68a3-449c-8fca-63e70f7192b3","id":"06e771ea-9b9b-48f4-9be1-03d3b39d75fd","width":3849,"height":1620,"filename":"map 2.0.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fcdc13701-37ed-4791-bd65-e42e7632d23a.png?alt=media&token=5121621a-2ea4-442f-979c-b507cf01d945","id":"cdc13701-37ed-4791-bd65-e42e7632d23a","width":6264,"height":1620,"filename":"map 2.0.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F37158dd1-d195-4bc6-b94c-b9fc413a61c0.png?alt=media&token=b6cef340-8ccc-42aa-a39d-8c947588a262","id":"37158dd1-d195-4bc6-b94c-b9fc413a61c0","width":8750,"height":2160,"filename":"map 2.00.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fb1884e1b-9d5d-4bd5-806e-192b7f6b997f.png?alt=media&token=af431285-83dc-49f5-912f-868160bab756","id":"b1884e1b-9d5d-4bd5-806e-192b7f6b997f","width":8562,"height":2160,"filename":"Frame 6817.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fd8f251bf-388d-4ed8-aa3d-ec5d4b363080.png?alt=media&token=f0a1b49f-7902-4e1e-a9e8-c64730f52ba6","id":"d8f251bf-388d-4ed8-aa3d-ec5d4b363080","width":3840,"height":2160,"filename":"Frame 6816.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F23edbc85-c71c-4c4b-b342-16b12e6fff9a.png?alt=media&token=8ca4d333-c40d-4260-b661-11342102eda1","id":"23edbc85-c71c-4c4b-b342-16b12e6fff9a","width":6500,"height":2160,"filename":"map.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2Fae0f5c96-97c4-44c1-87b8-0c08e9318c9a.png?alt=media&token=0753bb44-4251-4961-80dc-065bd0ec41ef","id":"ae0f5c96-97c4-44c1-87b8-0c08e9318c9a","width":5134,"height":2160,"filename":"mapо.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F51a597ff-56dc-4a97-824a-d090cbac78d5.png?alt=media&token=aa7d83f3-b77d-43f7-817e-a4ad8ebdbb7a","id":"51a597ff-56dc-4a97-824a-d090cbac78d5","width":6338,"height":2160,"filename":"map.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F6a185364-876c-465c-8f1a-f29eb871e96b.png?alt=media&token=a4dc6574-f3e1-4d72-8435-d8fa6c71f01f","id":"6a185364-876c-465c-8f1a-f29eb871e96b","width":5212,"height":2160,"filename":"map00.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F1f0ff3cb-f41c-4465-b84e-6cee126c9c0c.png?alt=media&token=bcc7eb0d-764d-44e6-857e-d45980b67d4d","id":"1f0ff3cb-f41c-4465-b84e-6cee126c9c0c","width":7050,"height":2160,"filename":"map98.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FVK9TDDo4j88qACPBb0Ed%2F7055da86-6ecf-4924-841e-015a43be61a2.png?alt=media&token=c84ec19d-e2e8-433a-935b-ce1f1f213dd5","id":"7055da86-6ecf-4924-841e-015a43be61a2","width":5580,"height":2160,"filename":"Frame 6852.png","type":"image/png","caption":"","border":false}]}
```

Design system

### **[Ссылка на проект в Figma](https://www.figma.com/design/rBwNW6yp4gdEzcLRixoNli/hellbat?node-id=1-22892&t=yxHamwN11Hflw372-1)**

### Проект построен на [дизайн-системе](https://read.cv/irinabogdanova/VK9TDDo4j88qACPBb0Ed)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F2f2e399d-0d99-4287-8dce-885fd162f63b.png?alt=media&token=242392a2-3450-44b4-b717-e1920c22c88f","id":"2f2e399d-0d99-4287-8dce-885fd162f63b","width":1950,"height":1110,"filename":"Frame 6839.png","type":"image/png","caption":"","border":false}]}
```

### **О проекте**

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

Помимо этого, сервис позволяет скачивать и сохранять полученный текстовый файл для дальнейшего использования.\
\
Я начала работу над проектом, когда он частично существовал в формате XD.

### **Моя роль в проекте**

* Перенос существующего проекта из Adobe XD в Figma

* Участие в ежедневных синках команды для обсуждения плана работ и презентация прогресса внутри команды

* Обновление старых компонентов на новые из дизайн-системы, создание новых компонентов и их вариаций для проекта

* Разработка новых сценариев и проработка user flow

* Взаимодействие с разработчиками и передача проекта на front-end

* Поддержка контроля качества

### **Анализ старой и новой версий:**

**\
Процесс загрузки файлов (листай –>)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F31eb3cd8-4e38-4381-841b-6ea8443fe112.png?alt=media&token=5effefa6-aa35-423a-8491-b0d26b50ce55","id":"31eb3cd8-4e38-4381-841b-6ea8443fe112","width":3900,"height":2220,"filename":"Frame 5339.png","type":"image/png","caption":"Было","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F7b826416-6b48-4e8e-8f5b-6ec90c2d5b38.png?alt=media&token=cdfffb6e-4ccc-4e93-a428-e095f0998c92","id":"7b826416-6b48-4e8e-8f5b-6ec90c2d5b38","width":3900,"height":2220,"filename":"Frame 5338.png","type":"image/png","caption":"Стало","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F65eb0985-fcd9-4418-be5b-cfcf225e66b6.png?alt=media&token=ffa15b7b-fb42-4311-a46d-4d938fbc0cde","id":"65eb0985-fcd9-4418-be5b-cfcf225e66b6","width":1995,"height":1583,"filename":"Frame 6831.png","type":"image/png","caption":"","border":false}]}
```

**Обработка файлов (листай –>)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2Ff10cf01b-219c-4b1a-a24f-2d4712775fd2.png?alt=media&token=e0484401-a7e0-4dd4-954b-af34cd315360","id":"f10cf01b-219c-4b1a-a24f-2d4712775fd2","width":3900,"height":2220,"filename":"Frame 6832.png","type":"image/png","caption":"Было","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F9379ceda-2f1e-4b77-acfd-798af1085ace.png?alt=media&token=48ceb88b-1b16-47e7-a2ba-f74648d359e5","id":"9379ceda-2f1e-4b77-acfd-798af1085ace","width":3900,"height":2220,"filename":"Frame 5339.png","type":"image/png","caption":"Стало","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F6c237f1b-c797-465c-a2d2-cf31752d49d1.png?alt=media&token=c50cdc65-f9b8-4580-9a87-669aace202ce","id":"6c237f1b-c797-465c-a2d2-cf31752d49d1","width":1995,"height":1583,"filename":"Frame 6833.png","type":"image/png","caption":"","border":false}]}
```

**Просмотр результата транскрибации (листай –>)**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2Fbf39cc3e-1434-4261-af90-618dfa9009d3.png?alt=media&token=f83fd0a7-0df9-4697-bee0-b35c950b5928","id":"bf39cc3e-1434-4261-af90-618dfa9009d3","width":3900,"height":2220,"filename":"Frame 6834.png","type":"image/png","caption":"Было","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F62496a30-f94b-45f0-8b9a-be346854a858.png?alt=media&token=138e7cf9-6847-4f82-993b-39042de6cc2d","id":"62496a30-f94b-45f0-8b9a-be346854a858","width":3900,"height":2220,"filename":"Frame 5340.png","type":"image/png","caption":"Стало","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F777c8c38-f387-4ce8-9762-b05b90af9316.png?alt=media&token=36db7f0b-f4ba-4b9e-8119-550c2fecccf7","id":"777c8c38-f387-4ce8-9762-b05b90af9316","width":1995,"height":1172,"filename":"Frame 6851.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F4a450618-cd84-49b5-a25a-a1408e606608.png?alt=media&token=bd147ab6-d9cc-4f15-9f33-20c9a4308510","id":"4a450618-cd84-49b5-a25a-a1408e606608","width":1995,"height":1337,"filename":"Frame 6854.png","type":"image/png","caption":"","border":false}]}
```

\
**Ещё несколько экранов обновленной системы:**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2Fa7b680c1-26a6-48f8-937e-390f6c4441ae.png?alt=media&token=9a5d630f-3b72-4707-9abb-2fed7f56befe","id":"a7b680c1-26a6-48f8-937e-390f6c4441ae","width":3900,"height":2220,"filename":"Frame 6838.png","type":"image/png","caption":"Удаление карточки результата","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F9a314025-ef85-4500-bc73-225fed51d97e.png?alt=media&token=ba4f3734-3ecf-43a3-b98d-fcc432ce9be7","id":"9a314025-ef85-4500-bc73-225fed51d97e","width":3900,"height":2220,"filename":"Frame 6837.png","type":"image/png","caption":"Сервис недоступен в процессе обработки файла. Повляется тостер","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F186cc151-9182-4c5b-bda4-2aa34841840a.png?alt=media&token=b771d3c7-f7c9-42ce-8059-f2a94aa2f760","id":"186cc151-9182-4c5b-bda4-2aa34841840a","width":3900,"height":2220,"filename":"Frame 5341.png","type":"image/png","caption":"Скачивание результата транскрибации. Появляется модальное окно ","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F90cb175a-ba04-4377-9931-1338db9c05fa.png?alt=media&token=bd315a5c-a8d8-43f8-80cb-9672d1c89eb0","id":"90cb175a-ba04-4377-9931-1338db9c05fa","width":3900,"height":2220,"filename":"Frame 6836.png","type":"image/png","caption":"Файлы выбраны для скачивания","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2Fc5f8af6c-40bd-49f6-a736-3947eb986fd8.png?alt=media&token=ef1e71f9-2183-4064-922e-0fb7a2f3a0f6","id":"c5f8af6c-40bd-49f6-a736-3947eb986fd8","width":3900,"height":2220,"filename":"Frame 5343.png","type":"image/png","caption":"Микрофон. Запись и обработка файлов","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Feefhm66sbSU16UExiSQA%2F8a4784ae-a88d-4113-b1ff-672f8d5188da.png?alt=media&token=1e7c30bf-092e-408c-a836-b60f92b1b76d","id":"8a4784ae-a88d-4113-b1ff-672f8d5188da","width":3900,"height":2220,"filename":"Frame 5344.png","type":"image/png","caption":"Просмотр транскрибации записи","border":false}]}
```

### **Результаты**

* Повышение удовлетворенности пользователей на 30%

* Снижение показателя оттока пользователей на 15%

* Обеспечение единого стиля и визуальной идентичности продукта компании

### **Вывод**

Это был мой первый опыт работы над проектом в качестве продуктового дизайнера после долгих лет в графическом дизайне. \
Мне удалось погрузиться в процессы разработки и активно участвовать в развитие и поддержке проекта. Несмотря на ограниченный доступ к информации из-за особенностей проекта (гос. заказчик), я смогла добиться успешного результата.\
Я спроектировала сложные интерфейсы, проработала путь пользователя, обновила аудиоплеер и компоненты дизайн-системы. Также, улучшила внешний вид платформы и описала компоненты, чтобы разработчикам было удобнее с ними работать.

### **Дополнительная информация**

**Команда:**\
– Руководитель проекта\
– Дизайн-лид\
– Дизайнер (я)\
– Системный аналитик\
– Команда разработчиков

### **Инструменты**

Adobe XD, Figma, Gitlab, Jira, Confluence. \
Смотрела **[element.eleme.io](https://element.eleme.io/) , [uidesign.tips](https://www.uidesign.tips)**

\
\
**[Подробнее о проекте в Figma](https://www.figma.com/design/rBwNW6yp4gdEzcLRixoNli/hellbat?node-id=1-22892&t=yxHamwN11Hflw372-1)**

Hellbat

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2F829ada89-15f5-4e3d-8722-15f15e0cb2d2.png?alt=media&token=7cf98006-65a1-4af4-8f00-9094cb93bd7c","id":"829ada89-15f5-4e3d-8722-15f15e0cb2d2","width":1440,"height":900,"filename":"%D0%9C%D0%B0%D0%BA%D0%B5%D1%82_1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2Ff88aba08-1997-437c-9e03-a83992a3981d.png?alt=media&token=98e84742-6b0d-4e1e-a371-b0e243d46c39","id":"f88aba08-1997-437c-9e03-a83992a3981d","width":1920,"height":2109,"filename":"abc.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2F96de2d7c-b149-4d20-91a9-6136d02848ec.png?alt=media&token=e709b10e-e11d-46f7-90cb-abe12b09a010","id":"96de2d7c-b149-4d20-91a9-6136d02848ec","width":1920,"height":2227,"filename":"Design_school.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2Fa469f83c-8416-40b3-be3b-df129ca65069.png?alt=media&token=e281a909-54a9-4dd6-9981-c3d405d20f49","id":"a469f83c-8416-40b3-be3b-df129ca65069","width":1920,"height":2623,"filename":"Frame_1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2Fd541afb5-9582-4da8-a117-99749e208f8e.png?alt=media&token=5f436dca-ef39-41cc-a78d-9374d1642888","id":"d541afb5-9582-4da8-a117-99749e208f8e","width":1920,"height":2553,"filename":"Inspace.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2F13def5bb-e123-4d35-b506-891429c676b2.png?alt=media&token=5b524d79-130a-46f2-9052-60c07a29d66b","id":"13def5bb-e123-4d35-b506-891429c676b2","width":1920,"height":1975,"filename":"Models.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FglrwpM2RXjWxrDM5Sh3w%2Fe1d593be-4a8d-46e5-b97c-95024f91e452.png?alt=media&token=0d10497b-d0f7-4131-8023-e9f17103d9ab","id":"e1d593be-4a8d-46e5-b97c-95024f91e452","width":1920,"height":1946,"filename":"Museum.png","type":"image/png","caption":"","border":false}]}
```

Сборная солянка красивых картинок

**[Ссылка на Figjam](https://www.figma.com/board/q4cPBn9YI2lLiDHsrnyvC2/%D0%94%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0-%D0%B5%D0%B4%D1%8B_%D0%91%D0%BE%D0%B3%D0%B4%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0-%D0%98%D1%80%D0%B8%D0%BD%D0%B0?node-id=0-1&t=r2SsovBSpuAQYkjX-1)\
[Cсылка на Figma](https://www.figma.com/design/4uHEQ1iiGAEQkSs6KpmfIb/Tasty-Delivery_%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0-%D0%B5%D0%B4%D1%8B?node-id=74-606&t=EO9HJqLsAt7WxCBv-1)**

## **О проекте**

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

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

💡 **Доставка для тех, кто не знает, что хочет**

Я работала над учебным приложением по доставке еды. Для меня это важная тема, так как регулярно пользуюсь пободными сервисами и мне хотелось понять и улучшить внутреннюю «кухню».

Я провела discovery-исследования, собрала дизайн, провела юзабилити-исследования, написала тексты, собрала редполитику. ([FigJam](https://www.figma.com/board/q4cPBn9YI2lLiDHsrnyvC2/%D0%94%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%BA%D0%B0-%D0%B5%D0%B4%D1%8B_%D0%91%D0%BE%D0%B3%D0%B4%D0%B0%D0%BD%D0%BE%D0%B2%D0%B0-%D0%98%D1%80%D0%B8%D0%BD%D0%B0?node-id=0-1&t=r2SsovBSpuAQYkjX-1))

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FrXf9cSZA4qR9cm59x69o%2F7d67cea7-0ca8-4e65-98cb-daa1027e9769.png?alt=media&token=b471926d-ce25-4de6-9048-718c07bd3e1a","id":"7d67cea7-0ca8-4e65-98cb-daa1027e9769","width":2238,"height":614,"filename":"Снимок экрана 2024-10-07 в 12.30.41.png","type":"image/png","caption":"","border":false}]}
```

**Моя задача** — довести до этапа разработки минимальный продукт и подтвердить или опровергнуть гипотезу: использование недельных подборок блюд на основе имеющегося опыта пользователей, тем самым информировать их о вкусовых привычках.

Оповещения/сторис (например, вы заказывали 7 раз цезарь). Пользователи смогут отслеживать повторяющиеся паттерны.\
\
**Метрики**\
Ключевыми метриками после запуска продукта я бы выбрала конверсии и операционные процессы\
\
**Использование конверсии :**\
Конверсия при отклике на сторис о недельной подборке блюд и повторная конверсия, если подписываться можно на определенный период\
Подписка на месяц, в течение месяца 1 раз в неделю будет приходить уведомление.   Таким образом, мы сможем понять, сколько человек первый раз подписалось  и переподписалось снова.  Добавить отслеживание неделю, месяц + отслеживать отписку/подписку, удержание. \
\
**Job stories**\
На этапе Job Stories я нашла респондентов, провела с ними 5 онлайн-интервью и выяснила, что \
4 из 5 респондентов хотели бы больше знать про свои вкусовые привычки. На основе этих данных я решила протестировать сторис/оповещения с подборкой блюд, которые регулярно заказывает пользователь. \
Эти и другие данные потом помогли мне спроектировать логику приложения и тексты.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FrXf9cSZA4qR9cm59x69o%2F96f2549b-7089-47ca-b56d-31e28e6717ab.png?alt=media&token=5f740b65-ea39-465b-9bbb-cf2fe324ead9","id":"96f2549b-7089-47ca-b56d-31e28e6717ab","width":3038,"height":2064,"filename":"Frame 6850.png","type":"image/png","caption":"","border":false}]}
```

**Выводы:**\
– Хотелось бы видеть количество сахара в продуктах/блюдах, а не только бжу\
– Разделение блюд по категориям: веганское/безлактозное и тд\
– Калорийность+ бжу\
– Маркер постных продуктов\
– Рейтинг блюд, состав продуктов (без E)

\
\
В рамках обучения на курсе “UX-писатель” я научилась:

* прототипировать дизайн мобильного приложения

* создавать пользовательские сценарии (анализировать их в user flow и делать выводы)

* формулировать микротексты из 5-6 точных слов (с соблюдением Tone of Voice и согласованием синтаксиса всех элементов)

* проводить исследования (формировать гипотезы и тестировать продуктовые тексты)

* собирать макеты приложений (редактировать тексты в программах проектирования интерфейсов Figma и FigJam

* оценивать эффективность контента (работа с метриками, улучшение продукта с помощью текста

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2FrXf9cSZA4qR9cm59x69o%2F736f511b-2c09-4bfb-b26b-490bc9e0e335.png?alt=media&token=eebeed6b-4851-453a-9490-c84d783816c2","id":"736f511b-2c09-4bfb-b26b-490bc9e0e335","width":1280,"height":3841,"filename":"Frame_24.png","type":"image/png","caption":"","border":false}]}
```

Tasty delivery (учебный проект)

Ссылка на проект в [Figma](https://www.figma.com/design/f9jmDI2VZ9cOF0p2RH2cDV/Uploader?node-id=15-8035&t=z71Ssh3mPBo07lIX-1)\
\
Проект постоен на [дизайн-системе](https://read.cv/irinabogdanova/VK9TDDo4j88qACPBb0Ed)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F98eca4f5-bb18-4999-9953-d6dd75f9b817.png?alt=media&token=0d34de60-1d41-41e1-a57c-c4224cddd2fe","id":"98eca4f5-bb18-4999-9953-d6dd75f9b817","width":4486,"height":2776,"filename":"Frame 5734.png","type":"image/png","caption":"","border":false}]}
```

**\
Uploader (Универсальный загрузчик)** позволяет пользователям загружать как один, так и несколько файлов. Возможна загрузка с компьютера пользователя или через хранилище S3.

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

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

### **Моя роль в проекте**

* Поддерживала и дорабатывала проект

* Активно взаимодействовала с аналитиками и разработчиками

* Участвовала в ежедневных синках с дизайн лидом для обсуждения плана работ и презентации прогресса

* Создавала новые компоненты и их вариации для проекта

* Разрабатывала новые сценарии и user flow

* Поддержка контроля качества 

### **Компоненты под проект**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F551c676d-0f2c-4879-89f6-0460643d3254.png?alt=media&token=b3949c67-dc56-403f-af1e-91895395a154","id":"551c676d-0f2c-4879-89f6-0460643d3254","width":1866,"height":830,"filename":"Frame 6833.png","type":"image/png","caption":"","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F24d1e8bf-f676-49ab-a871-bd8ea037f240.png?alt=media&token=139c1e29-da34-49fd-ad62-c0b1b15e5a80","id":"24d1e8bf-f676-49ab-a871-bd8ea037f240","width":2700,"height":1493,"filename":"Frame 5749.png","type":"image/png","caption":"","border":false}]}
```

### **Шаг 1. Базовый вид загрузчика**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F46a10938-ae2d-4d32-aff8-e3927c817b45.png?alt=media&token=cf45e1c3-b606-44dd-93eb-3a27b0d4e98d","id":"46a10938-ae2d-4d32-aff8-e3927c817b45","width":1950,"height":1110,"filename":"Frame 6840.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F1b3c94be-a620-4744-aa1c-979578eb4f34.png?alt=media&token=8843576b-da1c-43ef-95ec-07ebf117a8b9","id":"1b3c94be-a620-4744-aa1c-979578eb4f34","width":1950,"height":1110,"filename":"Frame 6843.png","type":"image/png","caption":"Файл выбран и подгрузился с ПК в штатном окне браузера. После выбора – кнопка «Следующий шаг» становится доступной","border":false}]}
```

### **Шаг 2. Загрузка файла завершена**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F11450db2-49cb-4273-8928-27fddb69dadd.png?alt=media&token=02db905b-a692-4fd4-8a4c-95a00e45e30a","id":"11450db2-49cb-4273-8928-27fddb69dadd","width":1950,"height":1110,"filename":"Frame 6844.png","type":"image/png","caption":"Прогрузились «Предпросмотр данных» и «Настройка данных». Добавляется кнопка «предыдущий шаг», на тех этапах, где возможно вернуться назад и «Отменить загрузку».","border":false}]}
```

### **Шаг 3. Форма заполнения общих данных**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F844b9efa-6f7f-40e9-a4b9-d304748d6bfd.png?alt=media&token=7944d55d-c81f-4abd-a779-1d5ca67b6127","id":"844b9efa-6f7f-40e9-a4b9-d304748d6bfd","width":1950,"height":1110,"filename":"Frame 5348.png","type":"image/png","caption":"Прогрузилась форма настройки «Общих данных». После заполнения данных клик на «Загрузить»","border":false}]}
```

### **Шаг 4. Процесс загрузки**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F9e4f400b-8a1d-47ef-95a6-f89ea667a63c.png?alt=media&token=6f3d51ce-f481-493d-afe3-592fe266d8b3","id":"9e4f400b-8a1d-47ef-95a6-f89ea667a63c","width":1950,"height":1110,"filename":"Frame 5353.png","type":"image/png","caption":"","border":false}]}
```

### **Шаг 5. Загрузка завершена**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2Ff2692552-2427-4bae-a3c0-2ac561d0cf48.png?alt=media&token=6e5f5331-eb12-442f-bb56-801a24263f78","id":"f2692552-2427-4bae-a3c0-2ac561d0cf48","width":1950,"height":1110,"filename":"Frame 5349.png","type":"image/png","caption":"Автопереход на последний шаг – Загрузка завершена","border":false}]}
```

### **Процесс загрузки файла S3**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F9e041fed-6a32-4dda-9fcb-121f6b46f9f8.png?alt=media&token=58730bbc-f966-42bb-8094-442a74087c28","id":"9e041fed-6a32-4dda-9fcb-121f6b46f9f8","width":1950,"height":1110,"filename":"Frame 5350.png","type":"image/png","caption":"","border":false}]}
```

### **Добавление столбцов данных**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FDB3ZEfLxfGhFRUPoyIXosu8jpku2%2Fx5AfV1wgpgrDlcilvVg4%2F3fe926e7-69ce-464f-aa6e-5fe34d2bce4a.png?alt=media&token=97f33615-601d-4d48-8815-0d76c41b12aa","id":"3fe926e7-69ce-464f-aa6e-5fe34d2bce4a","width":1950,"height":1110,"filename":"Frame 5351.png","type":"image/png","caption":"","border":false}]}
```

### **Результаты**

* Повышение удовлетворенности пользователей на 20%

* Обеспечение единого стиля и визуальной идентичности продукта компании

### **Дополнительная информация**

**Команда:**\
– Руководитель проекта\
– Дизайн-лид\
– Дизайнер (я)\
– Системный аналитик\
– Команда разработчиков

### **Инструменты**

Adobe XD, Figma, Gitlab, Jira, Confluence. \
Смотрела **[element.eleme.io](https://element.eleme.io/) , [ag-grid](https://www.ag-grid.com)**

Uploader

Открыта к новым карьерным возможностям!

Product designer

1. [Foundations of User Experience (UX) Design](https://coursera.org/share/70ab394081307859d7af9dc7fb856276)

2. [Start the UX Design Process: Empathize, Define, and Ideate](https://coursera.org/share/6edbf5114dfcf519de18bc6bffe2b5f7)

UX-писатель

Дизайн-система

Tasty delivery

Kryptonite

Поддерживала и развивала 4 SaaS проекта, дизайн-систему и сайт компании\
\
Задачи

* Разработка дизайн-систем

* Рефакторинг дизайн-системы из формата Adobe XD в Figma

* Дизайн-ревью

* Разработка пользовательских интерфейсов (UI) для веб-платформы

* Работа в кросс-функциональной команде

* Подготовка макетов для передачи разработчикам

* Адаптация дизайна для различных типов устройств и платформ

* Разработка страниц сайта [компании](https://kryptonite.ru/?ysclid=lyh38mbnml656934299)

  \
  Результаты

  * Перенос проектов в Figma из Adobe XD повлиял на дальнейшую имплементацию новых функций в продукт (переверстка компонентов, создание новой дизайн-системы)

  * В условиях кризиса удалось сохранить бизнес-процессы компании, повысить эффективность работы и облегчить совместную деятельность с другими участниками проекта

Продуктовый дизайнер

Развивала визуальную коммуникацию в компании\
\
Задачи

* Разработка публикаций для соц. сетей, рекламных материалов, брошюр, баннеров, сертификатов в соответствии с брендом KPMG. Создание дизайна для внутренних отчетов, писем, презентаций, поздравительных открыток, раздаточных материалов для конференций и благотворительного фонда «Уверенное начало»\
  \
  Результаты

* Улучшение визуального образа бренда KPMG благодаря единообразному стилю дизайна всех публикаций, рекламных материалов, брошюр и баннеров, что повысило качество внутренних и внешних коммуникаций

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

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

Дизайнер

Разрабатывала визуальные материалы для внутреннего использования компании, навигацию для экранов в вагонах метро\
\
Задачи

* Разработка визуальных материалов для внутреннего использования компании (флаеры, наклейки, презентации, соц. сети и тд) в Figma

* Разработка социальной рекламы «Московского метрополитена» и навигации для экранов в вагонах метро

* Создание презентаций о цифровых продуктах компании для «Департамента образования и науки», «Роснефть», «Трансмашхолдинг» и других клиентов

Результаты

* Привлечение новых клиентов с помощью создания дизайн-решений

* Повышение узнаваемости бренда компании на рынке

* Оптимизация пользовательского опыта при создании навигации на экранах в вагонах московского метро

* Монетизация информационно-развлекательной системы (реклама в wi-fi сервисы, реклама на медиаэкранах)

Ирина Богданова

2024