Orbiter — стартапи теж можуть бути стильними
UI/UX-дизайн • 2024 • orbiter.io
Бачення проєкту
Цей проєкт закриває реальну прогалину на ринку: продукт для професіоналів, які постійно нетворкають, шукають нові бізнес-контакти й будують стосунки як основний робочий інструмент. Так, є LinkedIn, але чесно — ніхто не любить його шаблонні пости й незграбний UX. Є й CRM-системи, але вони зазвичай перевантажені й розраховані на великі компанії.
А що, як створити сервіс, де можна підтримувати бізнес-стосунки, знаходити нові контакти, відстежувати якість зв'язків — і все це в красивому дизайні? Саме це ми й узялися зробити.
Початок роботи
Клієнт уже працював з іншими дизайнерами, але їхні шаблонні рішення його не влаштували. Тоді він і звернувся до нас. У тестовому завданні я запропонував концепцію орбіти замість звичної стрічки. Ідея така: усі нові активності ваших контактів з'являються на орбітальному інтерфейсі. Достатньо навести курсор, щоб побачити, що відбувається з контактами, й отримати контекстні сповіщення — листи, події тощо.
Концепція так зачепила, що стала основою для цілого року співпраці.
Еволюція дизайн-системи
Почнімо з основ. Такий амбітний проєкт потребує надійної дизайн-системи, щоб зберігати цілісність і спрощувати подальшу розробку. Наша дизайн-система з'явилася не за один день — вона органічно росла разом із кількістю компонентів і стилів.
І тут почалося найцікавіше: поки я вибудовував дизайн-мову, розробники взялися за альфа-версію. Через прогалини в комунікації ми отримали дві паралельні дизайн-системи — мою і їхню. Це стало серйозною загрозою для цілісності проєкту.
Рішення? Повна переробка. Я систематизував усі компоненти, стилі й шрифти в одному файлі та активно використав дизайн-токени — і глобальні, і компонентні. Це забезпечило консистентність і водночас дало змогу швидко ітерувати. Така гнучкість виявилася критичною для стартапу, де деталі постійно змінюються.
UX-дизайн
Тут довелося створити багато екранів і сценаріїв, яких просто не існувало деінде. UX-задачі були серйозні: передбачити поведінку користувачів, вибудувати ієрархію інформації та з нуля придумати інтуїтивні взаємодії.
Кожне рішення мало бути виваженим, кожен сценарій — природним, а кожна функція мала заслужити своє місце в інтерфейсі.
UI-дизайн
Клієнт хотів чогось виняткового — по-справжньому красивого інтерфейсу. Ми обрали темну тему за замовчуванням, доповнену глассморфізмом і градієнтними акцентами. Результат говорить сам за себе. Я щиро пишаюся тим, що вийшло.
Така естетика з'явилася не одразу. За рік стиль помітно еволюціонував — і, як на мене, на краще.
Це ще не кінець
Цей кейс навмисно оглядовий, без детальних екранів і глибоких розборів. Причина проста: наша співпраця триває. Проєкт ще в активній розробці й не запущений, тож багато деталей під NDA.
У міру розвитку проєкту, коли можна буде показати більше, я доповнюватиму кейс новими інсайтами, детальними екранами й глибшими розборами дизайн-рішень.
Якщо цікаво, що буде далі, стежте за моїми соцмережами — я ділитимуся оновленнями, щойно зможу відкрити завісу над цією роботою.
Додаткова робота
Дизайн лендингу
Класний застосунок заслуговує на класний лендинг. Я спроєктував його в тій самій візуальній мові, що й застосунок, показавши ключові переваги продукту.
Тут знадобився мій досвід у 3D та анімації. На першому екрані — інтерактивні 3D-елементи, а далі сторінкою йдуть плавні Lottie-анімації. Сьогодні я б, мабуть, обрав Rive і запропонував зібрати лендинг у Framer для більшої гнучкості. Але результат вийшов добрий — можете переконатися самі за посиланням.
3D та анімація
Цей проєкт дав ідеальну нагоду глибоко зануритися в анімацію Rive, яку я досі активно використовую (зокрема на цьому сайті-портфоліо). А ще він дозволив проявити мої навички в 3D, про які йшлося вище.
Ці технічні експерименти були не про візуальні прикраси, а про запам'ятовуваний, захопливий досвід, що допомагає користувачам емоційно зв'язатися з продуктом.