Продукт мав об'єднати одразу кілька різних механік — соцмережу, короткі відео, Q&A з системою голосування та керування авто — залишаючись простим і звичним для мобільних користувачів. Головним викликом було вибудувати інтуїтивну навігацію та єдину візуальну мову навколо профілю автомобіля, водночас забезпечивши безшовну адаптацію інтерфейсу під два напрямки читання (RTL та LTR).
Snobar — дизайн мобільного застосунку для автоспільноти
Простір для тих, хто захоплюється авто: стрічка новин, короткі відео, Q&A-дискусії та профілі машин в єдиній екосистемі.
- Роль
- UX/UI дизайнер
- Період
- 2023
- Платформа
- iOS / Android
- Навички
- Візуальний дизайн та взаємодія, первинні дослідження, аналіз конкурентів, створення вайрфреймів і прототипів, адаптація під RTL/LTR
Контекст
Snobar — це мобільна соціальна мережа для автовласників та автоентузіастів, створена для ринку Саудівської Аравії. Продукт поєднує знайомі соціальні формати — стрічку дописів, короткі відео (Wheels) та Q&A-форум із голосуванням — з особистим віртуальним гаражем, де користувачі створюють і ведуть профілі своїх авто.
На відміну від типових соцмереж, автомобіль тут є центром усього досвіду: контент, профілі та взаємодія в спільноті будуються навколо машини користувача. Як UX/UI дизайнерка, я спроєктувала застосунок комплексно — від онбордингу, стрічки, Wheels і Q&A до гаража та профілю — перетворивши концепцію продукту на логічні користувацькі сценарії та цілісну візуальну систему з повною підтримкою RTL (арабська) та LTR (англійська) форматів.
Створити зрозумілий і послідовний мобільний UX/UI для всіх сценаріїв (спільнота, контент та гараж), де профіль авто об'єднує всі частини продукту, а гнучка дизайн-система однаково природно працює як в LTR, так і в RTL форматах.
Підхід
Як вирішувалась задача
Перш ніж переходити до роботи над UI, я спроєктувала ключові сценарії у вайрфреймах — стрічку, Wheels, Q&A, віртуальний гараж та профіль. Це допомогло вибудувати чітку інформаційну архітектуру, продумати навігацію та врахувати неочевидні сценарії (edge cases) на старті, не витрачаючи час на деталізацію інтерфейсу.
На основі цих напрацювань ми провели внутрішнє тестування. Воно підсвітило слабкі місця в логіці переходів та ієрархії екранів саме тоді, коли внести зміни було найпростіше і найшвидше.
Лише затвердивши структуру, я перейшла до UI та паралельно зібрала єдину візуальну систему й бібліотеку компонентів (для LTR та RTL) — щоб рішення, знайдені для одного екрана, послідовно працювали в усьому продукті.
01 / 05
Онбординг та персоналізація
Щоб знизити бар'єр входу, користувач може авторизуватися за номером телефону чи через Apple/Google, або ж пропустити цей крок і одразу переглянути контент.
Під час створення профілю система допомагає автоматично згенерувати унікальний нікнейм, а на фінальному кроці пропонує обрати до 10 цікавих тем (від тюнінгу й дрифту до електрокарів) та улюблені марки авто — це дозволяє одразу сформувати релевантну стрічку без «порожніх» станів.
02 / 05
Спільнота: стрічка, Q&A-хаб та навігація за темами
Соціальний простір поєднує три формати контенту — дописи, короткі відео (Wheels) та розділ запитань і відповідей (Ask). Щоб об’єднати ці формати в єдину систему, я спроєктувала наскрізну категоризацію за темами й хештегами: перейшовши в будь-який топік (наприклад, Fuel чи Parking), користувач може підписатися на нього й перемикатися між постами, відео та дискусіями в один клік.
У розділі Ask реалізована механіка форуму з фільтрацією, системою голосування та статусами вирішених питань (Answered). При цьому біля імені кожного автора в стрічці та коментарях відображаються іконки авто з його гаража — це додає контексту та експертності під час обговорень.
03 / 05
Wheels — створення та перегляд коротких відео
Оскільки автомобільний контент є максимально візуальним та динамічним, розділ Wheels дає змогу ділитися короткими вертикальними відео — від оглядів тюнінгу до звуку вихлопу чи поїздок. Я спроєктувала інтуїтивний флоу запису та публікації відео з прив’язкою роликів до конкретних хештегів, тем та авто користувача.
04 / 05
Віртуальний гараж
Гараж перетворює автомобіль із простого підпису під фото на повноцінну частину профілю користувача. Власники можуть детально налаштувати картку своєї машини — від характеристик двигуна й трансмісії до точного відтінку кузова через кастомну палітру.
05 / 05
Профіль як хроніка авто
Висновок
Робота над Snobar стала для мене крутим уроком системності в умовах високої складності продукту. Коли в одному застосунку перетинаються стрічка новин, короткі відео, Q&A-форум та детальні профілі авто — кожен із цих форматів легко міг перетягнути увагу на себе й розбити інтерфейс на окремі частини.
Для мене справжня цінність дизайну полягає не в тому, наскільки ідеально виглядає один окремий екран, а в тому, як уся система працює в масштабі. Ті самі компоненти, стани та логіка взаємодії мають залишатися цілісними на десятках екранів, у всіх edge cases та в обох мовних форматах (LTR і RTL) — аж до фінальних іконок і графіки для App Store та Google Play.
Інші роботи
0301RozetkaPayФінтех / B2CДослідження причин, чому покупці кидають express-checkout RozetkaPay, і перетворення 12 інтерв'ю, usability-аудиту та конкурентного аналізу на зрозуміліший шлях до покупки.02DramoxРозваги / UXПеретворюємо дослідження на зрозуміліший досвід пошуку — і створюємо цикл зворотного зв’язку для безперервного покращення.03InvestFlowФінтех / Веб + мобільний застосунокРозробка MVP екосистеми для інвестицій у нерухомість та активи: від мобільного застосунку інвестора й кабінету фандрейзера до внутрішньої адмін-панелі керування операціями