Какво създадох
Проектирах Pet Hub Zone като обща платформа за осиновяване, обяви, услуги, продукти, полезни локации и общност от хора, които обичат животните.
SOFTUNI CREATIVE · UX/UI CASE STUDY
Виж Figma ↗ИЗПИТЕН ПРОЕКТ · МАЙ 2026
PET HUB
ZONE
Създадох тази платформа от любовта си към животните и от желанието грижата за тях да започва с по-малко търсене и повече доверие.
01 КОНТЕКСТ
ВСИЧКО ЗА
ЛЮБИМЕЦА.
НА ЕДНО МЯСТО.
Избрах Pet Hub Zone, защото исках да превърна любовта си към животните в полезен и реалистичен дигитален продукт.
Докато развивах темата, видях основния UX проблем: информацията за осиновяване, услуги, продукти и общност е разпокъсана между различни места. Затова проектирах една свързана система с последователна навигация, ясни категории, доверени профили и кратки пътища до действие.
ПРОЕКТНА РАМКА · МОЯТА ПОСОКА
ОТ ЕДНА ЛИЧНА ИДЕЯ ДО
ЦЯЛОСТНА PET ЕКОСИСТЕМА.
Започнах с прост въпрос: как мога да събера всичко важно за домашния любимец на едно място, без преживяването да стане претрупано и объркващо?
За кого
За настоящи и бъдещи стопани, доброволци и специалисти, които имат нужда от бърз достъп до надеждна информация и лесна връзка помежду си.
Моята цел
Да превърна сложната екосистема от грижи и услуги в спокойно, последователно и човешко преживяване, което изгражда доверие още от първия екран.
ОСИНОВЯВАНЕОБЯВИУСЛУГИМАГАЗИНКАРТАОБЩНОСТ
ЛИЧНАТА ИДЕЯ
ПРОЕКТ, РОДЕН ОТ
ЛЮБОВТА МИ КЪМ ЖИВОТНИТЕ.
Животните не са просто визуална тема в този проект. Те са причината да търся решение, което е едновременно красиво, спокойно и наистина полезно за хората, които се грижат за тях.
Исках един стопанин да може да намери услуга, обява или подкрепа, без да обикаля много различни сайтове. Исках и човекът, който търси нов дом за животно, да има по-ясен и човечен начин да разкаже неговата история.
Това лично отношение ме водеше във всяко решение — от топлата оранжева палитра до картите с ясни снимки, видимото местоположение и профилите, които помагат за изграждане на доверие.
- 01Формулирах проблема
Подредих реалните нужди около осиновяване, услуги, обяви и общност в една обща продуктова цел.
- 02Изградих потоците
Начертах кратки маршрути от началната страница до намиране, сравнение, контакт, резервация или публикуване.
- 03Създадох системата
Разработих токени, типография, компоненти и state variations, за да остане интерфейсът последователен.
- 04Приложих и проверих
Пренесох системата в реални desktop, tablet и mobile екрани и полирах йерархията и контраста.
02 СТРАТЕГИЯ
HERO’S
JOURNEY
Използвах Hero’s Journey като UX рамка, за да преведа човека от конкретна нужда до уверено действие — без излишно търсене и без загуба на контекст.
Героят
Собственик на домашен любимец, който търси услуга, животно за осиновяване или подкрепяща общност.
Проблемът
Разпръсната информация, трудна проверка на доверието и липса на централизирано място.
Водачът
Pet Hub Zone подрежда категориите, сравненията и връзката с хора и доставчици в един продукт.
Успехът
Потребителят намира, сравнява, резервира, осиновява или се свързва с общността.
КЛЮЧОВИ ПОТОЦИ
01
Намиране на услуга
Начало → Търсене → Резултати → Доставчик → Резервация
02
Осиновяване
Начало → Осиновяване → Обява → Контакт
03
Публикуване
Начало → Добави обява → Форма → Публикуване
04
Карта
Начало → Карта → Маркер → Детайли
05
Общност
Начало → Общност → Публикация / Коментар
03 ВИЗУАЛНА СИСТЕМА
ТОПЛА
ИДЕНТИЧНОСТ.
ПРОДУКТОВА ЯСНОТА.
Оранжевото носи енергия и човечност, кремавите повърхности успокояват, а тъмният ink цвят държи интерфейса четим и уверен.
Pet Orange#FF7F24
Sun Yellow#FFC21C
Ink#222222
Cream#FFF7EE
ТИПОГРАФИЯ
Inter
Чиста, достъпна и гъвкава система за съдържание с различна плътност.Display / 72AaHeading / 40
Pet care, simplified.
Body / 16Ясна йерархия, четими действия и предвидим ритъм.
КОМПОНЕНТНА БИБЛИОТЕКА
ЕДИН ЕЗИК.
ВСИЧКИ СЪСТОЯНИЯ.
BUTTONS
Реалните Primary, Secondary, Text и Icon варианти от PetHub с техните default, hover и disabled състояния.
INPUTS
Търсене, местоположение, select и checkbox, пресъздадени от реалните полета и филтри в основните екрани.
NAVIGATION
Реалната desktop навигация на продукта, с PetHub бранда, основните секции и действията за вход.
CONTENT
Оригиналните category и listing cards от Figma проекта — със снимки, рейтинг, метаданни, любими, основно действие и споделяне.
01DESKTOPширок продуктов контекст
02TABLETадаптивни решетки
03MOBILEфокус върху задачата
04 ПРОДУКТ
11 ОСНОВНИ
ЕКРАНА.
ЕДНА СИСТЕМА.
Приложих компонентите и токените последователно във всяка основна задача — от търсене и филтриране до контакт, резервация и публикуване.
01Начало
02Резултати
03Детайли на обява
04Добави обява
05Маркетплейс
06Услуги
07Резервация
08Интерактивна карта
09Общност
10Профил
11Съобщения
РЕАЛНИ ЕКРАНИ ОТ FIGMA
ОТ СИСТЕМАТА ДО
РАБОТЕЩИТЕ СТРАНИЦИ.
Тук показвам три от ключовите desktop екрани в проекта. Всеки е изграден с общите компоненти и правила на дизайн системата, но решава различна потребителска задача.
HOME · DESKTOPОтвори целия екран ↗
Начална страница
Започнах с голямо търсене и две ясни посоки — намиране на любимец или услуга. Така човекът още в първите секунди разбира какво може да направи и не се губи в многото възможности на платформата.
DISCOVERY · DESKTOPОтвори целия екран ↗
Категории и обяви
Подредих категориите визуално, а филтрите оставих близо до резултатите. Исках сравняването да бъде спокойно и бързо, без човек да губи контекста на търсенето си.
TRUST · DESKTOPОтвори целия екран ↗
Детайл на обява
В детайла изведох снимките, основната информация, човека зад обявата и местоположението. За мен доверието е най-важно, когато става дума за животно, затова контактът и контекстът са видими и лесни за проверка.
UX РЕШЕНИЯ
- Направих навигацията ясна, за да намаля когнитивното натоварване.
- Избрах картов интерфейс, за да ускоря сканирането и сравнението.
- Добавих карта, защото местоположението е реална част от избора.
- Изведох ревюта и профили, за да подкрепя доверието между хората.
- Съкратих потоците, така че всяка нужда да води директно до действие.
05 РЕЗУЛТАТ
ФИНАЛЕН РЕЗУЛТАТ
6.00
/ 6.00
UI Design Systems · SoftUni Creative · май 2026
Коментар (изпит практика): Отличен проект! Демонстрирали сте силно разбиране на материала с добре структурирана Figma библиотека, включваща всички задължителни компоненти (бутони, inputs, навигация) с пълни state variations. Дизайн токените са отлично документирани с семантично именуване, цветови палитри и типографски скала. Документацията е добре разработена с три размера устройства и ясни UI patterns. Проектът включва 8+ екрана с последователно прилагане на компонентите, добра типографска йерархия и контраст. Препоръчваме да обърнете внимание на разстоянието между елементите в някои секции за още по-полиран вид. Страхотна работа!
СЕРТИФИКАТ
UI DESIGN
SYSTEMS
Успешно завършен курс в SoftUni Creative с максимална оценка. Сертификатът включва и пълната учебна програма на втора страница.
Отвори сертификата ↗Провери валидността ↗