UI-дизайн · Автомобільна тематика · Соціальна мережа

Snobar — соціальна мережа для власників авто

Мобільний UI-дизайн соціального застосунку для власників авто та автоентузіастів — об'єднання спільноти, контенту та профілів авто в один продукт.

Три екрани Snobar під кутом на темно-синьому тлі: заставка SNOBAR, повноекранне відео дрифту у Wheels і допис у стрічці про Civic Type R

Контекст

Snobar — соціальна мережа для власників авто та автоентузіастів, створена для ринку Саудівської Аравії. Продукт поєднує звичні соціальні функції — стрічку, короткі відео та Q&A — з окремим гаражем, де користувачі можуть створювати й вести профілі своїх авто.

На відміну від типової соціальної мережі, авто тут — центральна частина досвіду. Контент, профілі та взаємодія у спільноті завжди пов'язані з авто користувача. Як UI-дизайнер, я спроєктувала інтерфейс продукту від початку до кінця — від онбордингу через стрічку, Wheels і Q&A, до гаража та профілю — переклавши концепцію продукту в послідовну візуальну систему на кожному екрані.

Роль: UI-дизайнер
Період: 2023
Платформа: iOS / Android
Напрямки: Спільнота · Гараж · Соцмережа · UI

Проблема

Продукту потрібно було об'єднати кілька різних досвідів в один — соціальний контент, короткі відео, Q&A, профілі користувачів і керування авто — зберігаючи простоту та звичність для мобільних користувачів, і зробивши при цьому саме авто невід'ємною частиною продукту.

Ціль

Дати концепції продукту чіткий, послідовний мобільний UI для спільноти, контенту та гаража — так, щоб профіль авто візуально пов'язував різні частини продукту між собою.

Підхід

Як вирішувалась задача

Я спроєктувала UI для основних екранів продукту — онбординг, стрічка, Wheels, Q&A, гараж і профіль — вибудовуючи спільну візуальну систему по ходу роботи.

Коли основні екрани були готові, я зібрала повний UI kit продукту та всі візуальні ассети, потрібні для App Store і Google Play.

Карта застосунку: заставка розгалужується на онбординг, стрічку, Wheels, Q&A, гараж і профіль, а під кожним — свої кроки: вхід, допис, створення відео, запитання, додавання авто, редагування даних — **Огляд екранів** — ключові екрани, спроєктовані для основних флоу продукту.

01.

Спільнота

Шар спільноти об'єднує три види контенту: стрічку, короткі відео та Q&A.

П'ять екранів телефона: вхід за номером або через Apple і Google, код підтвердження, особисті дані, вибір імені користувача та вибір тем і автомобільних марок — **Онбординг і вибір тем** — вхід через телефон/OTP, а одразу після welcome-екрана — вибір тем.

Шість екранів телефона: допис у стрічці, список Q&A з фільтрацією, допис із коментарями, сторінка хештега із сіткою відео, сторінка теми з кнопкою підписки та список тих, хто вподобав допис — **Стрічка, теми та хештеги** — звичні соціальні взаємодії (лайки, коментарі, згадки, репост), поєднані з підписками на теми та хештегами, а також Q&A — окремий формат питань і відповідей із фільтрацією, сортуванням і можливістю редагувати відповіді.

Wheels — окремий формат коротких відео зі своїм флоу створення, налаштуваннями приватності та тегами тем і хештегів.

02.

Гараж

Гараж робить авто постійною частиною профілю користувача, а не просто підписом до допису.

П'ять екранів телефона: форма додавання авто з маркою, моделлю, роком, двигуном і коробкою, список кольорів, підбір власного кольору, готова сторінка Nissan Skyline GT-R R33 і це ж авто, прив'язане до профілю — **Життєвий цикл авто** — додавання авто зі структурованими характеристиками (двигун, коробка передач, привід, колір), редагування та архівація.

Профіль — поєднує соціальну присутність користувача з його гаражем, тож у профілі одразу видно, хто ця людина і яке авто вона водить.

Висновок

Snobar — один із проєктів, які найбільше навчили мене тримати єдину візуальну мову в умовах реальної складності: стрічка, короткі відео, Q&A і структуровані профілі авто — кожен із цих напрямків міг легко потягнути UI в свій бік.

Для мене саме тут і є справжня майстерність: не в тому, наскільки відполірований окремий екран, а в тому, наскільки послідовно тримається система — ті самі компоненти, ті самі стани, та сама логіка — на десятках екранів і edge cases, аж до іконок та ассетів для App Store і Google Play.

Портфоліо