City Bird: The App
- Type
- Self-initiated
- Role
- UX design, UI design, research, illustration
- Platform
- Android
- Design tools
- Figma, GIMP, paper
Designing a web interaction tool to help foster a sense of sustainability and responsibility towards the environment.
City Bird started as a web experience for helping people discover and understand the natural environment around them.
I wanted to explore what that experience could become when it moved beyond the screen and into the places people actually live, walk, and explore. The app is a continuation of the original idea, reimagined for a more immediate and personal mobile experience.
From Website to App
The website was designed primarily as a space for exploration. Users could take their time discovering trees, birds, and the relationships between them.
The app introduced a different context. Instead of sitting down to explore their environment, users could discover it while they were already out in it.
This meant rethinking the experience around proximity, movement, and immediacy. Location could become part of discovery, the camera could help identify what users encounter, and observations could be captured as they happen.
The challenge wasn't to simply shrink the website into a mobile interface. It was to ask:
What does City Bird become when the experience moves with you?
Reframing The Experience
The website allowed users to explore City Bird from anywhere. But for the app, I wanted the experience to encourage people to actually step outside and engage with their surroundings.
That meant changing the way users discover content. Instead of selecting a tree from a map or browsing through a database, users have to encounter something in the real world first.
The camera becomes the starting point: spot a tree, leaf, fruit, or flower → take a picture → discover the tree → learn its story → meet the birds that depend on it → add those birds to your collection.
The bird cards become more than information. They become a reward for paying attention to the environment around you.
Designing The Core Loop
With the new direction established, I focused on making the journey from observation to discovery to reward feel natural.
The camera became the app's starting point rather than a secondary feature. From there, each step builds on the last: identifying what the user has encountered, revealing its ecological story, and gradually connecting it to the birds and other life around it.
This shaped the core experience:
Observe → Identify → Learn → Discover → Collect → Connect
Visual Design
The app inherits the visual language established for the City Bird website, including the nature-inspired palette, paper-cut illustrations, League Spartan typography, and reusable component system.
The Finished App
The final app brings the City Bird experience into the real world, turning everyday encounters with nature into opportunities to discover, learn, and collect.
Here’s the finished experience.
Final Notes
Designing the app made me realise that the most interesting part of City Bird isn't the information itself, but the experience of discovering it.
Moving from a website to an app gave me an opportunity to make that discovery more tangible. Instead of asking users to browse their environment from a screen, the app gives them a reason to look up, notice something, and interact with the world around them.
There is still a lot to explore—from improving species recognition to making the collection system more meaningful and eventually allowing users to contribute their own observations. But the foundation is simple:
Get people to notice what is around them, and give them a reason to keep looking.