Gen Z isn't allergic
to touching grass.
They just don't know it's there.
How might we make Yerba Buena Gardens a place 18-25 year olds actively seek out, not just stumble upon?
How might we make Yerba Buena Gardens a place 18-25 year olds actively seek out, not just stumble upon?
Yerba Buena Gardens sits in the middle of SoMa, next to Metreon and a cluster of museums and the age group it needs most has no reason to know it exists. There's no social proof and poor presence on TikTok, the channel Gen Z actually uses to find things to do in SF.
So I designed a companion app that makes the Gardens discoverable and worth coming back to.
Interview-backed from day one with a working MVP in Lovable and Cursor.
Main concept, at a glance
Creator Feed
A TikTok-style scrollable feed of Gardens content; visitor-generated and creator content, so discovery happens in a format Gen Z already trusts.
Vertical, endless-scroll layout — the format with the lowest friction to keep watching, chosen to maximize time-in-app on first open.
RSVP
Social proof event RSVPs that show who's going, lowering the social risk of showing up alone that came up repeatedly in interviews.
Map + Badges
A consolidated map surfacing hidden gems, amenities, and much more, with badges earned by exploring, redeemable for real rewards like free bowling.
Badges use exploration-triggered reward, the same loop that drives return visits in habit-forming apps, not a fixed points system.
Nudges
SMS and push notifications written in a Gen-Z-coded voice, designed to turn a one-time visit into a repeat habit rather than a single event attendance.
Testing confirmed this directly, event notifications were one of the top reasons participants said they'd reopen the app.
HOVER OVER THE SCREENS TO SEE THE FLOW IN MOTION
Creator feed
Event RSVP
Consolidated Map
Badge & reward
SMS nudge
The app only works if people find it. Three entry points were designed to meet 18–25 year olds exactly where the research said they already are.
A QR code on a physical art piece or event flyer opens straight into the app-download flow, turning a moment of curiosity in the Gardens into an install, not a missed opportunity.
For anyone who lands on YBG's site directly, a dedicated signature accent CTA, to get users to download the app, turning the gardens to an exciting experience.
User Generated Content posts, partnering with creaters who have already posted about YBG and Tiktok ads, meeting the discovery channel every non-visitor named in research. "Video displayed is an example, has been edited"
YBG's own Executive Director, across 33 years and seven different parks & recreation departments, named 18–25 year olds as the one demographic recreation programming has never cracked.
The Gardens aren't invisible because they're boring. They're invisible because they have no digital footprint in the one place this age group actually looks.
Synthesized from staff & visitor interviewsThe infrastructure is slow to change, the marketing is printed flyers and neighborhood organizations, and the audience it's built for skews older — while the people it needs to reach live on TikTok.
Interviews with the people who run the Gardens and the people who are supposed to show up to them — to find out where the disconnect actually lives.
“That's the one group we've never figured out the magic bill for — at seven different parks and recreation departments, seven different cities.”
Executive Director, YBG“I don't think people are going on our website to look things up. People go on social media to look things up.”
Special Projects Manager, YBG“There's a reason to come here. They just don't know.”
Special Projects Manager, YBG
Affinity map — synthesized from interviews
Staff confirmed marketing is still print-first: posters and flyers passed through neighborhood organizations. The audience that reaches skews older by default.
Non-visitors said they'd never been because none of their friends go — and without an "internet-adjacent" hook, there's no reason to be first.
Every non-visitor interviewed named TikTok as their default source for "free things to do" — not YBG's website, not Google.
Interview data clustered into five HMW statements — each one tested against sticky-note feature brainstorming before any screen was drawn.
Built from the 11 interviews. One has never set foot in the Gardens. The other has and doesn't even know it.
Maya Hernandez · 20
Key insightHas never visited, with no social proof from her friend group, YBG doesn't register as a real place worth going.
Josh Richardson · 20s
Key insightVisits regularly and likes it, but never knew it was called Yerba Buena Gardens due to poor digital footprint.
Mapping the journey before and after the app makes the gap concrete, where the friction actually sits today, and what changes once discovery are designed in.
Physical-space competitors are seasonal, have no digital layer, or price Gen Z out. Digital-native apps aren't built around a physical destination at all.
| Space / App | Free to Access | Digital Discovery Layer | Year-Round | Built-in Incentive |
|---|---|---|---|---|
| YBGC App | Yes | Creator feed + QR + web | Yes | Badges → real rewards |
| SFMOMA | $30–40 | Owned channels only | Yes | None |
| Dolores Park | Yes | None | Yes | None |
| Stern Grove | Yes–Lottery | None | Seasonal | None |
| Partiful / Posh | Yes | Yes | Yes | Not destination-tied |
| Luma | Yes | Tech-event skewed | Yes | Not destination-tied |
Each competitor app was printed, screen by screen, and annotated by hand to pull out exactly what worked, what didn't, and what YBGC's app could borrow or avoid.
Early sketches moved into mid-fidelity wireframes, then into a visual system built inside a real constraint: YBG's own existing brand guidelines.
Wireframe sketches - Discovery + Short-form videos
Wireframe sketches - Events + Badge-earning
Mid-fidelity wireframes - Events + Explore
Mid-fidelity wireframes - Consolidated + Badges
The visual system had a real constraint: it had to work within YBG's existing brand, so the direction leans on their approved system, pushed just far enough to feel native to a feed.
Design system — color & type, within YBG's brand
Figma file — local styles & auto layout
Handing a file to Lovable and Cursor is unforgiving in a way clicking through Figma prototypes isn't, nothing carries over automatically. That pushed me to build proper text styles, color styles, and auto layout with proper naming across every screen instead of one-off frames, so the file could actually hold up as a system engineering could build from.
Moderated usability testing on the first prototype surfaced four issues before the design ever reached a high-fidelity build.
My notes, round 1
The badge flow lacked hierarchy. Users couldn't tell which badge to go for, how to actually earn one, or how badges connected to the map.
Added color and micro-animations to make progress and next steps legible, and tied badge-earning to the map so the two flows connected.
Icons across the events page: events icon and calendar view felt too visually similar to distinguish at a glance.
Differentiated the icon set between calendar view and events navigation bar page icon.
The option to post a video to the creator feed wasn't visible or clear, users didn't realize they could contribute content, only consume it.
Added a persistent feature CTA to the feed, mirroring the TikTok's own post button and added occasional get featured ad while scrolling.
An accessibility list-view was added for the map, but in testing it felt confusing due to many buttons and it competed with the main map view instead of supporting it.
Simplified to a single map view with accessible list content accessed via a toggle, rather than as a separate competing mode, accessibility additions still need their own usability pass.
This is an ongoing project. These iterations reflect the move from round-one testing into the high-fidelity build validated in round two, below.
Six participants completed five core tasks on the high-fidelity prototype, measured on success rate, time on task, and error count, plus an A/B test on the RSVP confirm gesture and a System Usability Scale survey.
My notes, round 2
| Task | Success | Avg. Time | Avg. Errors | Ease (1–7) |
|---|---|---|---|---|
| Onboarding / download | 83.3% | 32.5s | 0.67 | 5.58 |
| RSVP to an event | 91.7% | 31.7s | 0.17 | 5.83 |
| Discover via explore feed | 100% | 35s | 0 | 6.0 |
| Earn a badge | 53.3% | 76.7s | 1.83 | 4.67 |
| Explore the map | 95.8% | 100s | 0.83 | 5.17 |
The explore feed was the strongest flow in the entire study, no zero errors. Badge-earning was the clear weak point on every metric, confirming the round-one finding above as the single highest-priority fix before this ships further.
Asked what would make them open the app again, not just what would bring them back to the Gardens. Half of participants pointed to upcoming events first. Badges, the map's accessibility for newcomers, and event notifications followed close behind.
Above the 68-point average-usability benchmark, from a 4-participant SUS survey.
“I didn't want to truly explore.” — flagged as a note on map engagement.
Round-two testing participantLovable and Cursor let me take this from Figma to a working, testable product fast enough to prove the concept, but a prototype and a production system for a public institution aren't the same thing. From here, it's formally handed off to YBGC's internal IT team, who already maintain their live website, to make it secure and ready for real users. The Beta version addressed all usability issues for the second usability study.
Figma's prototypes fake state — code has to actually remember it. Building this in Lovable and Cursor, not just Figma, meant the app had to behave like real software. Small interaction bugs that survived two rounds of usability testing became obvious the moment I could truly interact with it.
AI was a way to move faster on execution, not a substitute for the design decisions themselves. The clearest example was working inside strict token limits while building in Cursor and Lovable.
Strict token limits while building the MVP in Cursor and Lovable.
Used Claude to engineer high-density, precise prompts that cut token usage.
Shipped the full functional MVP inside the resource constraints.
Repo — file structure
Repo — README
Micro-animations gamify the experience, and a worm mascot keeps it feeling personable rather than transactional.
Prompt structure matters, tokens run out fast, and getting Lovable and Cursor to produce something usable meant learning to scope and sequence prompts deliberately, not just describe a feature and hope.
Owning a project this size as the only designer was, at points, overwhelming. It reinforced how much a project like this actually needs cross-departmental collaboration — you can't design something this big in isolation.
Building a functional MVP was about generating evidence; usable, testable proof the concept works and not about producing something ready for the public. Knowing that line is part of the design job too.
Badges got the most design effort and were the hardest feature to use in testing and when I asked what would actually bring people back, events beat rewards. A reminder to validate the core assumption early, not just the usability of it.