---
updateDate: 2026-02-05T00:00:00Z
publishDate: 2025-01-28
publishYear: 2021
name: Omnitopic
title: Дизайн MVP агрегатора IT-конференций
excerpt: Дизайн MVP для стартапа, который разрабатывает агрегатор IT-конференций
context: |
Команда заказчика создает агрегатор IT-конференций Omnitopic — сервис, в котором можно найти и выбрать IT-события по времени и локации. Предполагается продавать его по подписке.
Совместно с командой клиента мы создали основу для MVP, учитывая технические ограничения и ограниченный бюджет на его создание.
isNew: true
logo:
src: ~/assets/images/portfolio/omnitopic/logo.svg
alt: Omnitopic • Логотип
image: ~/assets/images/portfolio/omnitopic/main.png
imageAlt: Собака Павлова • Omnitopic • Дизайн MVP агрегатора IT-конференций
thumbnail:
src: ~/assets/images/portfolio/cards/omnitopic.svg
alt: Собака Павлова • Omnitopic • Дизайн MVP агрегатора IT-конференций
tags:
- it
- ed
- product-team
- prototype
- mass
relatedPages:
- text: |
### Вам нужен интерфейс?
#### Заказать дизайн
Напишите нам на [we@sobakapav.ru](mailto:we@sobakapav.ru)
#### Что мы можем сделать?
[Работа в продуктовой команде](/services/product-team) и [прототип под инвестиции](/services/prototype), как в этом кейсе, и [многое другое](/services).
collection: services
page: prototype
- collection: services
page: product-team
- text: |
### Хотите уметь так же?
Научим создавать хорошие интерфейсы.
collection: promo
page: mio
- collection: promo
page: uc
relatedPages2:
- text: |
### Похожие проекты
collection: portfolio
page: pushkin-digital
- collection: portfolio
page: prozhito
- collection: portfolio
page: jetlearn
- collection: portfolio
page: math
- collection: portfolio
page: tigitl
- collection: portfolio
page: korochka
result:
- src: ~/assets/images/portfolio/figma.svg
text: Покажем из рук в руки и расскажем ещё больше
link: "mailto:we@sobakapav.ru"
budget: "260 000 ₽"
time: "2 месяца"
director: "Хороший проект и потенциально классный продукт. Надеемся, у заказчика получится вывести его на рынок."
outcome:
title: Некоторые цифры
numbers:
- title: Исследовали
number: 10 похожих продуктов
text: в поисках инсайтов
- title: Предоставили
number: 5 визуальных концептов
text: на выбор
- title: Спректировали
number: 6 разделов приложения
text: во всех состояниях
metadata:
canonical: https://sobakapav.ru/portfolio/omnitopic
title: Дизайн интерфейса • Дизайн MVP агрегатора IT-конференций
description: "Создали дизайн интерфейса для стартапа, который разрабатывает агрегатор IT-конференций"
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/omnitopic/badge.png'
width: 1200
height: 630
---
import Image from '~/components/common/Image.astro';
import TOC from '~/components/widgets/TOC.astro';
import PhoneMockup from '~/components/widgets/PhoneMockup.astro';
<TOC>
[Бизнес-задача](#anchor1) • [Дизайн-задача](#anchor2) • [Процесс](#anchor3) • [Результат](#anchor4) • [Отзыв, цены, сроки](#anchor5)
</TOC>
## <a name="anchor1" />Бизнес-задачи
Создать агрегатор IT-конференций.
<a href="/images/portfolio/omnitopic/1.png" target="_blank"></a>
_Десктопная версия_
## <a name="anchor2" />Дизайн-задачи
Разработать интерфейс MVP агрегатора конференций, в котором можно найти и выбрать события по времени и локации.
<a href="/images/portfolio/omnitopic/23.png" target="_blank"></a>
_Главная страница в разных цветовых решениях_
## <a name="anchor3" />Процесс
Создали визуальное решение приложения. Предложили референсы, отрисовали наброски визуальных решений.
<a href="/images/portfolio/omnitopic/22.png" target="_blank"></a>
_Один из референсов_
Сделали несколько вариантов палитры на выбор. Обсудили с командой заказчика варианты визуального стиля и выбрали рабочий.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/26.png" />
<PhoneMockup image="/images/portfolio/omnitopic/27.png" />
</div>
<em>Выбор цвета: поспокойнее, поярче</em>
Однако визуальное решение — отнюдь не главное при создании MVP.
Вначале нужно выбрать сценарии для MVP, то есть, фактически, определиться с набором страниц для отрисовки. Закладываем ли в MVP авторизацию, личный кабинет, возможность предложить мерепоприятие или податься на конференцию спикером?
>Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть [модуль дизайн-задачника «Сценарии взаимодействия»](https://www.eduhund.ru/program/usecases/?utm_source=sobakapav&utm_medium=site&utm_campaign=page) для тех, кто хочет научиться их использовать в дизайне интерфейсов.
Затем — вот оно, вот это самое важное! — нужно принять ряд UX-решенимй о содержательном воплощении выбранных сценариев. Собственно эти решения и их воплощение и есть в конечном итоге создание MVP.
Напрмер, на стартовой странице:
- Карточки в листинге: календарные или горизонтальные?
- Форма подписки: на весь проект Omnitopic или еженедельная подписка на отфильтрованные ивенты?
- Коллекции: делать на этапе MVP или нет? Если делаем, то отображаем на стартовой странице или убираем в бургер-меню?
- Футер: легкий (“© 2021-2022 Omnitopic” и все) или нужны дополнительные ссылки на Terms of Service, Cookies Policy, Privacy Policy?
- В целом направление концепта: текстовый или с выбором через кнопки?
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/24.png" />
<PhoneMockup image="/images/portfolio/omnitopic/25.png" />
</div>
<em>Общая подписка в футере. Листинг с вынесенными датами</em>
Поскольку мы взяли для воплощения в MVP сценарий поиска и выбора конференции, основные выборы были связаны с фильтрацией и поиском. Очевидно, необходим фильтр по месту, где проводится событие, и фильтр темы конференции, а какие еще закладываем в MVP (по дате, цене, языку конференции)? Как в целом будут работать фильтры?
1. Общая логика фильтров.
Предложили два концепта. В первом есть страница со всеми фильтрами и возможны быстрые переходы на отдельные страницы фильтров для локаций и топиков. Во втором — фильтры для локаций и топиков, есть страница с дополнительными фильтрами.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/2.png" />
<PhoneMockup image="/images/portfolio/omnitopic/7.png" />
</div>
<em>Стартовые страницы в первом и втором случае</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/3.png" />
<PhoneMockup image="/images/portfolio/omnitopic/4.png" />
</div>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/5.png" />
<PhoneMockup image="/images/portfolio/omnitopic/6.png" />
</div>
<em>В этом концепте под кнопкой фильтров предполагалось размещать все фильтры, а локацию и топики в оснофной форме дублируются, вынесены как самые важные</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/8.png" />
<PhoneMockup image="/images/portfolio/omnitopic/9.png" />
</div>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/10.png" />
<PhoneMockup image="/images/portfolio/omnitopic/11.png" />
</div>
<em>Фильтры локации и топиков самостоятельны, под кнопкой “фильтры” только прочие/дополнительные фильтры.</em>
2. Фильтры локации
Разделы: Near( определяем дистанцию в km) , Popular cities ( где чаще всего проходят мероприятия), Countries, Continents/World regions?
Логика внутри фильтра:
- 1 вариант: распределяем разделы (Near , Popular cities, Countries и т.п.) по табам
- 2 вариант: все разделы вынесены на одну страницу и предраскрыты по 3-5 вариантов + есть возможность нажать “view all” и провалиться внутрь определенного раздела?
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/12.png" />
<PhoneMockup image="/images/portfolio/omnitopic/13.png" />
</div>
<em>1 вариант</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/14.png" />
<PhoneMockup image="/images/portfolio/omnitopic/15.png" />
</div>
<em>2 вариант</em>
3. Фильтры топика
Сколько разделов с топиками закладываем? Какова будет логика внутри фильтра:
- 1 вариант: все разделы вынесены на одну страницу и предраскрыты 3-5 вариантов. Есть возможность нажать “view all” и провалиться внутрь определенного раздела.
- 2 вариант: на первом уровне видим только названия разделов топиков, на втором уровне вложенности раскрываются варианты.
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/16.png" />
<PhoneMockup image="/images/portfolio/omnitopic/17.png" />
</div>
<em>1 вариант</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/18.png" />
<PhoneMockup image="/images/portfolio/omnitopic/19.png" />
</div>
<em>2 вариант</em>
<div class="flex gap-2 flex-wrap mb-2">
<PhoneMockup image="/images/portfolio/omnitopic/20.png" />
<PhoneMockup image="/images/portfolio/omnitopic/21.png" />
</div>
<em>Общие для обоих вариантов экраны</em>
## <a name="anchor4" />Результат
Передали заказчику:
- Кликабельный прототип в Figma для интерактивного опыта
- Полную библиотеку используемых компонентов дизайна
## <a name="anchor4" />