BIRD LENS MOBILE WEBSITEUX CASE STUDY 2025

Build

BUILD | From Sketch to Prototype 

From Sketch to Screen



Sketches v0 

My Bird Log
Logging photo details + exif data
Photography Lesson
community photo feed

I started with pencil sketches to figure out the core screens: What does logging a bird photo look like? How does the feed work? What's a lesson? These were the four things Julia needed, roughed out on paper before any decisions about layout or interaction.


Lo-fi wireframes v1 
Logging photo details + exif data
community photo feed
Photography Lesson
My Bird Log

I scanned the sketches into Figma to start working out the structure. At this stage I was focused on information hierarchy and flow, not visual design. What fields does the photo log need? What order should the feed display in? Where do the lessons live?


Mid-fi wireframes v2 
Log A Bird Photo w/ Exif data sharing enabled
Community Bird Photo Feed
Birding + Photography Lessons
Bird Log Photo view




This is where the screens started feeling like a product. Real content, actual bird photos, camera settings data. The dashboard took shape here, built around the card system where each feature gets its own entry point. This is the version that went into usability testing.

Log a Bird Photo
w/EXIF toggled off
Bird Lens Home Page
Bird Log Map view
Bird Lens Dashboard