Locale — Case Study
Local Events Discovery App

discover
locale.

Your city's social calendar. Explore local events, discover hidden gems, make plans with friends, and create events for your community — all in one place.

Product Designer Next.js 14 · TypeScript Live APIs MVP In Development
2
Live API Sources
5
Screens Built
V4
Roadmap Scoped
0
Blank States Allowed
01 — What it does

Built for spontaneous discovery

Three modes for three moments — browsing what's on, exploring where things are, and tracking what you're doing.

🔍
Discover

Tonight strip surfaces same-day events. Trending pills show what's buzzing. Category and date filters cut through the noise.

Tonight StripTrendingDate FiltersCategory Pills
🗺️
Map

Color-coded teardrop pins by category. Bottom sheet lists nearby events. Links to Apple Maps or Google Maps based on device.

Category PinsBottom SheetPlatform Maps
📅
Plans

14-day calendar strip with event dots. Going tab tracks RSVPs. Saved tab holds your watchlist. Tap any day to filter.

14-Day StripGoing / SavedRSVP System
02 — Screens

Three views, one experience

Each screen is tuned for a distinct moment in the discovery journey. Click any phone to pause the demo.

DEMO
9:41●●●
Good evening 👋
What's On
🔍
Finding events…
9:41●●●
Good evening 👋
What's On
🔍
🔥 TonightSee all →
🎵
Jazz on K St.
Free
🎨
Art Walk
Free
🍽️
Food Trucks
Free
All
Today
Weekend
All
Music
Food
Art
🎸
River City Roots Fest
📍 Waterfront
Free
Buzzing
0.8 mi
+ Going
🎨
Midtown Art Walk
📍 R Street
Free
1.2 mi
✓ Going
9:41●●●
Good evening 👋
What's On
🔍
All
Today
All
Music
Food
🎸
River City Roots Fest
📍 Waterfront
Free
Buzzing
0.8 mi
✓ Going
🎵
Jazz on K Street
📍 Sofia Theater
Free
0.4 mi
✓ Going
DiscoverTonight · Trending · Feed
DEMO
9:41●●●
MIDTOWN
EAST SAC
All
Music
Food
Art
🌿
🎵
🎨
🎸
🍽️
↑ 5 events nearby
Show all
9:41●●●
MIDTOWN
All
Music
Food
🌿
🎵
🎸
All Events · 5 nearby
🎸
River City Roots Fest
Waterfront · 12 PM
Free
🎵
Jazz on K Street
Sofia Theater · 7 PM
Free
🎨
First Friday Art Walk
R Street · 6 PM
Free
MapPins · Filter · Sheet
DEMO
9:41●●●
My Plans
2 going · 3 saved
✓ Going (2)
♡ Saved (3)
Mo19
Tu20
We21
Th22
Fr23
Sa24
Su25
12
PM
Midtown Farmers Market
W 20th St · Free
🌿
7
PM
Jazz on K Street
Sofia Theater · Free
🎵
Saved
Fri
First Friday Art Walk
R Street · Free
🎨
9:41●●●
My Plans
2 going · 3 saved
✓ Going (2)
♡ Saved (3)
🎨
Midtown Art Walk
📍 R Street
Free
1.2 mi
+ Going
🎸
River City Roots Fest
📍 Waterfront
Free
0.8 mi
✓ Going
PlansCalendar · Going · Saved
03 — Design Direction

Crafted with intention

Every visual and interaction decision was grounded in a specific intent — from the colour of a dot to the shape of a map pin.

●●●
Dark Canvas

The dark-first design ensures event imagery, emoji, and category colours pop. Built mobile-first at 390×844px.

Background #080810 · Surface #10101C
The Green

The accent colour evolved from #7CFF6B (electric, harsh) to #5DD44A (organic, warm).

#7CFF6B → #5DD44A · electric → organic
🌈
Category Colours

Eight distinct hues, one per event type, used consistently across cards, map pins, and filter pills.

8 categories · consistent across all surfaces
Music
Food
Art
Sports
Comedy
Film
Markets
All
Signature decisions
📹
Tonight Strip — Story Format

Cards borrowed from the social story format. Widened to 150×190px after testing narrower cards felt cramped.

📍
Teardrop Map Pins

border-radius: 50% 50% 50% 4px — directional, distinct from generic circles.

🏷
Source Badges

Every card shows where the event came from — Reddit, Meetup, Local News, Community.

Going / Saved Duality

Two distinct states of intent: Going (committed RSVP) and Saved (soft wishlist, no pressure).

Tried & reverted
Removed
Wordmark in header

App identity comes from the product, not logo repetition.

Removed
Shimmer loading bar

Felt deceptive. Replaced with an honest spinner.

Removed
Borderless search

Minimalism at the cost of affordance. Border was restored.

Removed
Capacity indicator

Added anxiety before users even decided they were interested.

04 — End User & Research

Designed for the Friday-evening scroll

Research was conducted entirely online — listening to where residents actually talk about events, and auditing what existing platforms get wrong.

👤
Alex Chen
27 · Works remote · City dweller
The moment

“It's 6pm Friday. I want to do something tonight — not just scroll. But I don't know where to start looking.”

City residentFree eventsSpontaneous plansCommunity-minded
Method 01 · Community Listening
Reddit & Local Groups

Every Friday, local subreddits see the same post: “What's happening this weekend?” The community does the curation work by hand because no tool does it for them.

“The discovery experience shouldn't require a Reddit thread.”
Method 02 · Competitive Audit
Eventbrite, Meetup, Facebook Events

None of them surface the category Locale is built for: free, community-driven, spontaneous local happenings. The gap is structural, not accidental.

Free festivals, gallery nights, pop-up markets — no existing platform owns this.
Method 03 · Behavioural Mapping
The “Scroll & Connect” Pattern

Users open social apps in the evening to decompress — but that scroll habit sits right next to a latent desire for real-world connection. Locale intercepts that exact moment.

Same UX pattern as social media. Outcome is a night out, not more screentime.
The core insight

“The most underserved use case in local discovery isn't finding the next concert — it's finding something worth leaving the couch for, tonight, that doesn't cost anything.”

Cities have hundreds of free community events every week. Locale pulls them into one scrollable surface — and makes the discovery feel as effortless as checking Instagram.

05 — Process

From vision to working product

“Every design decision was validated before moving forward. If something felt off, it was revisited — not rationalized away.”

Phase 01

Desktop Prototype — Establishing the Core Experience

Built the first interactive prototype as a desktop layout to establish the foundational information architecture: map/list dual-view, category filter pills, and event cards.

Map / List ToggleCategory FiltersEvent CardsInformation Architecture
Phase 02

Mobile Prototype — Designing for the Real Use Case

Rebuilt entirely for mobile (390×844px). Introduced the Tonight strip, Trending pills, Plans tab with a 14-day calendar strip, and a map view with colour-coded teardrop pins and a sliding bottom sheet.

Tonight StripPlans + CalendarTrending SectionMap + Bottom Sheet
Phase 03

Live API Integration — Wiring Real Data

Connected to Ticketmaster Discovery API and Anthropic's web search tool, with multi-source merge architecture, deduplication, server-side caching, and hardcoded fallback events.

Ticketmaster APIAnthropic Web SearchSource DeduplicationFallback Events
Phase 04

Production Scaffold — Building for Scale

Full Next.js 14 / TypeScript backend with modular source architecture, parallel fetching via Promise.allSettled, and Vercel deployment.

Next.js 14TypeScriptREST API RoutesVercel
06 — Key learnings

What the process revealed

🔄

Two-Turn API Flows Are Non-Obvious

Anthropic's tool-use pattern requires a two-turn conversation loop. A single-turn implementation silently returns nothing.

🛡️

Fallbacks Are a Feature, Not a Crutch

Hardcoded events ensure users never see a blank screen. Resilience is designed in, not bolted on.

✂️

Editing Is a Design Discipline

A wordmark, shimmer bar, borderless search input, and capacity indicator were all built and deliberately removed.

07 — Technology

Built with

Frontend / BackendNext.js 14
LanguageTypeScript
Events DataTicketmaster API
Community EventsAnthropic Web Search
DeploymentVercel
Caching (planned)Redis / Vercel KV
locale.
Product Design & Development
MVP In Development