BIRD LENS MOBILE WEBSITEUX CASE STUDY 2025

Build

BUILD | From Sketch to Screen 

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? I roughed them out on paper before making 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 focused on information hierarchy and flow. 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




Here the screens got real content: actual bird photos and camera settings data. The dashboard took shape around a card system, with its own entry point for each feature. This version went into usability testing.


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