Hoot App - Designing a world that feels small and friendly by Goran BabarogicHoot App - Designing a world that feels small and friendly by Goran Babarogic

Hoot App - Designing a world that feels small and friendly

Goran Babarogic

Goran Babarogic

Overview

Role: Design Lead Timeline: 12+ months Platform: iOS & Android (React Native / Expo) Scope: 0 → 1 — brand identity, illustration system, design system, UX/product design
HOOT is a location-based social platform that connects people through physical presence, not followers or feeds. Think Pokémon Go meets Reddit meets real life. I joined when the product was still a concept and led every design layer through V1 — from initial user research to shipped app.
The core challenge wasn't just building a product. It was designing a trust system, a behavior model, and a visual world that all had to feel like one coherent thing — while moving fast enough to actually ship.

Problem

Real life is happening. Digital is missing it.
People are physically surrounded by community, but digitally isolated from it. Every existing platform rewards performance and popularity — not presence. Gen Z is exhausted by curated feeds. They want to know what's happening around them right now, not what someone staged three days ago. Local businesses have no organic channel to reach people physically walking past their door.
The opportunity: build a social layer on top of the physical world, where proximity earns access, presence earns trust, and real-world activity earns rewards.
Key tensions we had to resolve:
Users want to be social but dread the performative pressure of posting
Trust between strangers in physical proximity requires strong credibility signals
A brand new platform has no activity — the cold-start problem is the product's most critical UX moment
The app needed to feel local and human without tipping into childish or corporate

Research & Discovery

4 primary personas, grounded in behavioral frameworks.
We built full persona profiles using motivation mapping, Fogg Behavior Model analysis, and journey mapping across four archetypes:
Mia — Gen Z Campus Explorer. Wants low-stakes ways to connect where she physically is.
Alex — Urban Nomad. Wants trustworthy local insight without planning ahead.
Lena — Local Connector. Wants playful, real-time ways to feel her community impact.
James — Hyperlocal Entrepreneur. Wants simple tools to attract locals and see real engagement.
Journey mapping revealed three high-ROI moments that shaped every design decision after:
The Jump — Seeing live activity or shared Feathers nearby. The hook that converts curiosity to action.
The Peak — Earning a first Landing and growing Wingspan. The reward loop that creates habit.
The Pit — The moment before the first Echo post. No friends visible, unsure if it's safe or worth it. This is where we lose users if the prompt or reward isn't clear.
Core insight: Mia doesn't need more features. She needs emotional permission to act. That means low-friction entry, real-time proof that others are nearby, and fast feedback when she contributes.

Process

6 phases, running in parallel — not in sequence.
01 — Discovery & Research Persona development, journey mapping, behavioral analysis. Identified the three high-value moments and the emotional arc that the product needed to support.
02 — Information Architecture & System Design Mapped the full product ecosystem before touching UI: Canopy types, Feather tiers, Wingspan scoring logic, Egg collection, Paths, and HootCoin utility. The architecture had to carry the trust model — so we designed behavior first.
03 — Brand Identity Built HOOT's visual language from zero: wordmark, Owlvatar system, illustration direction, color palette, and tone of voice. The brand reference: Lyft, not LinkedIn. Friendly guide, not corporate tool.
04 — Design System Built a component library in Figma covering design tokens, typography scale, spacing, color modes, and all core UI components. Authored the full Copy & Style Guidelines, UX Writing & Tone Guide, Feed/Notification Schema, and Activity History Framework — so any designer, writer, or AI tool could produce consistent in-app copy.
05 — Product Design & Iteration Designed all major flows: onboarding, map, Canopy entry, Echo creation, Nest profile, Feather/Landing system, Paths, Feed, notifications. Multiple lo-fi to hi-fi cycles with rapid stakeholder feedback. Hard edge cases solved: empty Canopy state, first-post hesitation, emergency content flows.
06 — Handoff & Documentation Spec-ready Figma deliverables with annotated flows, copy frameworks, ARIA accessibility labels, and edge case logic for every screen. Engineering had enough to build without a designer in the room for every decision.

Key Design Decisions

No followers. No feed. Removing follower counts and algorithmic feeds was the most radical decision — and the most important. Proximity and presence drive relevance. This single constraint shaped every downstream social layer decision.
The empty Canopy state What does a first-time user see inside a Canopy with zero activity? We designed a low-pressure prompt system surfacing HootBuddy suggestions, nearby Feather matches, and a single soft nudge to post — creating just enough social proof without fabricating it.
The trust system Wingspan (a 1–100 trust score earned through real behavior) + Feathers (up to 6 ranked interest/credibility markers, three tiers: self-attested, user-attested, platform-attested) + Landings (GPS-verified physical check-ins). These three mechanics work together — credibility earned through presence, not self-declaration.
30-minute grace period After physically leaving a Canopy, users retain access for 30 minutes. This preserves social continuity without forcing physical lock-in. A small rule with a big behavioral impact.
Emergency as a distinct mode Full separate design pattern for emergency states: red background, no emoji, ARIA assertive alerts, direct language. The visual shift needed to be visceral and immediate — HOOT stopping playing around, visually.

Deliverables

Brand identity (wordmark, color system, type system, illustration direction)
Owlvatar system and Feather/Egg iconography
Full Figma component library with design tokens
Copy & Style Guidelines v1
UX Writing & Tone Guide v1
Feed & Notification Modular Schema
Private Activity / History Framework (30+ event types)
Canopy Description Input System
80+ screens across all core flows (lo-fi through hi-fi)
Annotated handoff specs with ARIA labels and edge case documentation

Like this project

Posted Apr 22, 2026

HOOT is a location-based social platform that connects people through physical presence, not followers or feeds.