CODESNAP APP
From Whiteboard to Workflow: Leveraging OCR for Seamless Code Capture
You’ve just solved a tough problem with your team, sketching out ideas in real time. But once the meeting ends, that clarity disappears—lost in blurry photos and broken workflows.
As a hybrid-remote worker, I relied heavily on in-person whiteboarding to problem-solve with my team. When we shifted online, the spontaneity stayed—but the structure didn’t. Snapped photos of whiteboards landed in Slack threads and digital spaces, but they often lost context, readability, and momentum.
During a design sprint, I uncovered just how widespread this pain point was: developers were spending valuable time translating messy whiteboard captures back into usable code, disrupting their flow. Recognising this gap, I teamed up with two developers who had faced the same friction. Together, we designed CodeSnap—a tool that transforms whiteboard code into clean, actionable digital snippets, bridging the gap between physical collaboration and remote work.
How might we capture the energy of whiteboard problem-solving—and make it seamless across remote teams?
ROLE
Product Designer
TOOLS
Figma, Figjam
TIMEFRAME
Ongoing
TEAM
Chris McHugh, Simon Waldron
Ruth O'Donoghue
Short on time? Go straight to High-Fidelity vertical slice →
01. CONTEXT
Hybrid Workflows, Analog Challenges
When we first started exploring CodeSnap, we knew whiteboards were essential in technical workflows. However, we needed to understand exactly how and when developers used them and what became of their ideas after brainstorming.
To ensure CodeSnap would address real user needs, I conducted foundational research through a survey of 30 targeted users and held in-person interviews with developers and a product owner. This research helped our team understand how often developers used whiteboards, what they used them for, and how valuable a whiteboard tool would be in their daily work.
02. EMPATHISE
Whiteboard Usage
The survey research showed that 90% of developers rely on whiteboards regularly, with 14 out of 24 participants using them every week.
Whether it’s designing system architecture, working through complex algorithms, or collaborating with a team, whiteboards remain a go-to tool for fast, flexible thinking.
Decoding Whiteboard Habits
Whiteboards remain an essential thinking tool for developers. Their speed, flexibility, and accessibility make them ideal for problem solving, collaborative planning, and technical interviews - whether in-person or hybrid.
In my survey, developers cited whiteboards as their go-to space for working through logic, designing flows, and aligning quickly with teammates. Unlike more formal documentation tools, whiteboards support fast iteration without the overhead of formatting or version control.
Even in remote settings, many developers continue to rely on physical whiteboards, often supplementing them with makeshift solutions like whiteboard photos or transcriptions, highlighting the gap between physical ideation and digital capture.
Validating a Solution
Once we understood the problem, we asked developers: Would you find an app that converts whiteboard images to editable text or code useful?
The response was overwhelmingly clear:
20 out of 24 said yes - this was something they actively needed.
Only 1 said no, while 3 were unsure.
For us, this was a defining moment. The problem wasn’t just theoretical—it was something developers actively struggled with, and they were eager for a solution.
That’s where CodeSnap comes in.
By leveraging OCR technology, CodeSnap aims to bridge the gap between in-person and remote collaboration, making whiteboard sketches as searchable and editable as any other digital asset. No more lost notes, unreadable photos, or redundant rework—just a seamless way to capture and continue technical discussions
"Whiteboarding helps me think out loud with my team, but once the meeting ends, all that context gets lost. Photos help, but they’re messy—and I usually end up rewriting everything anyway."
— Survey Participant, Senior Back-End Developer
03. DEFINE
Two Personas, Shared Frustrations
With a clearer understanding of the pain points around whiteboarding in hybrid teams, we needed to ensure CodeSnap wasn’t just solving a problem—it was solving the right problem for the right people.
Jordan - Software Engineer
Struggles to turn whiteboard captures into organised, actionable code—especially when juggling multiple projects across remote and in-office workflows.
Emma - Product Owner
Needs to turn brainstorm sessions into structured tasks quickly—balancing hybrid collaboration with clear team alignment and momentum.
04. IDEATE
Turning Whiteboard Snaps into Structured Code
Once we defined the core experience for CodeSnap, I mapped the full user flow to ensure every step felt fast, intuitive, and natural for hybrid teams.
The journey begins with a simple action: capture a whiteboard photo.
From there, users are guided through lightweight steps—reviewing the image, parsing it into editable text, tagging important snippets, and saving them for future use.
By combining familiar gestures (snap, tag, save) with smart automation (OCR parsing), CodeSnap keeps the momentum of collaboration alive—without adding friction or slowing teams down.
05. LOW-FI PROTOTYPE
Low, Fidelity, High Clarity
Before moving into high-fidelity design, I created low-fidelity wireframes to map the core functionality and validate the user journey end-to-end.
Every step - from capturing a whiteboard photo to saving a structured code snippet - had to feel fast, natural, and purposeful.
Keeping the UI minimal at this stage helped spotlight potential friction points early. By focusing on layout, navigation, and how actions matched user mental models, I was able to iterate quickly, test assumptions, and align closely with developers on what truly mattered for an MVP.
The goal wasn’t polish. It was clarity—and making sure every interaction served the user’s momentum, not slowed it.
06. VERTICAL SLICING
From Flow to Function: The Vertical Slice
Once the core workflow was mapped out, I moved into high-fidelity prototyping to create a vertical slice - a fully designed, end-to-end experience that developers could start building against.
This slice captures the key functionality of CodeSnap:
Capture – A clean, focused interface for snapping whiteboard content.
Confirm – A review step to ensure image clarity before processing.
Convert – Integration of OCR technology to extract handwritten code.
Edit & Organize – A structured editor where users can tweak, categorize, and store their snippets.
The goal here wasn’t to design every screen in the app, but to create a realistic and usable slice that communicates the visual language, UX patterns, and technical requirements of the product. This gave the development team a concrete foundation to begin implementation while still allowing space for iteration and feedback.
07. TEST
Usability Testing Snippets
Before building out more features, we tested a vertical slice of CodeSnap with real users to validate the core experience. The goal wasn’t perfection—it was clarity: Would users intuitively understand the flow? Where would friction emerge? What moments felt surprisingly delightful?
These early testing sessions gave us sharp, actionable insights that helped us shape the next iteration of the app:
Review Flow Felt Too Fast
"It’s great that it’s quick, but I almost missed the chance to retake the photo. I’d like a slightly clearer review step before it moves on."
OCR Parsing Felt Surprisingly Accurate
"I expected to have to fix a lot more mistakes. It got the basics right, even with messy handwriting."
Tagging Was a Major Mental Shift
"Tagging sections helped me organise my thoughts better. Normally, I just snap photos and forget about them—this made me slow down and actually process the notes."
Frustration When Retaking a Photo
"When I retook a photo, it felt like I had to start over from scratch. Would love if it just replaced the image but kept me in the same flow."
08. PROTOTYPE
Vertical Slice Prototype
What’s Next?
While the backend is still in development, these tests have already shaped refinements in the interface and user flow. Engineers are currently focused on:
Optimizing OCR accuracy for different handwriting styles and lighting conditions
Implementing cloud-based storage to sync snippets across devices
By grounding every decision in real-world usage, CodeSnap is evolving from a concept into a tool that truly fits into the daily lives of hybrid teams. As development continues, the next phase will focus on refining edge cases, improving performance, and expanding features based on further user insights.
CodeSnap is still a work in progress, but each iteration brings us closer to solving the problem it set out to tackle—bridging the gap between physical and digital collaboration for developers everywhere.