Urbana - UI/UX

Urbana - UI/UX

Urbana Mockup
Urbana Mockup

PROJECT

Urbana - UI/UX

WORK

Branding – UI/UX

Branding – UI/UX

PROGRAMS

Figma - Adobe After Effects

Figma - Adobe After Effects

ABOUT

At the Playful NYC Creative Technology Hackathon, our team developed Urbana, an app that helps users discover NYC events and encourages participation with digital collectibles. The project was awarded the Futures Award by the Parsons Innovation Center.

YEAR

2026

Moonwalk Sneakers on the moon
Moonwalk Sneakers on the moon

Made in collaboration with Joyce Garcia and Aina Ramolete

It's Selena's second weekend in NYC after moving here.

She sees posts of things to do this weekend on Instagram, but the 30-second video showcasing the events moves on quickly without any detail on location, duration, or whether she needs to RSVP.

She goes through the process of looking up the location and time of the events, and finally finds one that fits her schedule, she realizes that none of her friends were free during that time.

Selena is still wants to go somewhere, but doesn't want to go through the process of finding all the event details just for it to not work out, so she decides to stay home instead.

what if Selena could:

  • See the full details of events displayed in both map and calendar format, with quick links to RSVP or buy tickets if needed?

  • Earn location-specific collectibles that encourage her to step out of her comfort zone and attend new events?

  • Earn points based on events she attends and compete on the leaderboard with friends?

Research interviews:

Due to the short duration of the hackathon, we conducted casual interviews with 3 people who are new NYC residents about their habits in going out and finding local activities and events to attend.

We found that people often want to engage in local events, but the process of having to browse for an event, check for all the details and find sufficient motivation to go alone blocks these people from actually going.


Urbana shortens the frustrating process of searching for and choosing an event, allowing users to focus their energy on actually going out.

Structural Design

Sitemap 1:

Sitemap 2:

We initially envisioned a multiplayer mode, but realized that it was not too relevant to the problem we were trying to solve. We removed the multiplayer challenges and kept only the leaderboard and points system for the social component.

Low-fi Wireframes:

We quickly made some rough low-fi wireframes in Figma to map out where we wanted different components to go.

Design System and Branding

Inspired by the iconic NYC public transportation network, our initial inspiration came from the visual aesthetic of the NYC subway and Metrocard.

Urbana mainly targets people from 18 to 25 years old, representing the age group of students and young professionals who move into the city. We initially wanted a more friendly look, but realized that it made the app seem like it was designed for children.

Based on our demographic and current trends, we iterated on our designs and made the branding and interface dark, clean and bold.

design system:

Prototyping

We featured screens for our three core features in our final prototype:

  • Map and calendar: Easily discover events and event details

  • AR camera: Capture location-based digital artwork collectibles

  • Profile Collection: View collected stamps and photos taken in profile tab to share with friends

Conclusion

The Hackathon was only a day and a half, but I learned so much about rapid ideation and prototyping. For short design sprints, spending more time on identifying a problem and specifying our target demographic made making creative decisions much easier, so we didn't have to make and major design changes close to the deadline.


If we got more time to work on the project, we would create a working prototype and gather feedback from user testing, allowing us to further refine our features and understand how Urbana could be used.