Challenge
Medical photos are critical for documentation, diagnosis, and collaboration—but most of the tools doctors use today are outdated, clunky, or insecure. In fact, many doctors still resort to taking photos on their personal phones and texting them to specialists—despite this being a major HIPAA violation—because it’s still faster than going through their EHR.
TRUE-See saw a chance to fix that. With a handful of patents and a strong foundation in clinical photography, the team set out to build something modern, seamless, and secure—something that felt as intuitive as a phone camera, but built specifically for healthcare.
While TRUE-See already had a working integration with an EHR, it came with limitations. The experience felt boxed in, weighed down by legacy systems and red tape. The next big step was to break out of that mold—to build a standalone app that other systems could integrate with instead. This shift would let us reimagine the experience from the ground up and give us the freedom to design something doctors actually wanted to use.
Video 1: How EHRs currently manage photo taking & assigning.
Research &Â Discovery
To understand where TRUE-See stood in the market, I downloaded and evaluated every medical photo app I could find. I tracked their features in a comparison doc and paid close attention to what worked and what didn’t.
Some apps had amazing photo-taking UX, but lacked medical context. Others had great medical context, but subpar photo organization capabilities. This research phase allowed us to borrow the best parts of their UI while staying focused on clinical accuracy and HIPAA compliance.
Image 1: PhotoDoc app's photo-taking features.
Image 2: eKCare's photo-taking features.
Early Wireframes
Using insights from our research, I sketched out an early concept for a “Quick Photo” flow designed to mimic the speed and simplicity of a smartphone camera.
At the same time, I learned the team was migrating the app from Xamarin to .NET MAUI—a perfect opportunity to redesign the UI with a modern tech stack in mind. We aligned on using Bootstrap for frontend styling, which also meant I could use Bootstrap’s official Figma UI kit to speed up the transition from wireframes to styled mid-fidelity designs.
Image 3: Virtual usability test with a user
"Aha" Moments
We began moderated usability testing using our mid-fidelity screens. Knowing how limited physicians’ time was, we skipped low-fi sketches and tested with polished flows to get the most value out of each session.
From our first round of interviews, a few key insights stood out:
- Epic EHR was the standard for storing and sharing patient data.
- Physicians typically shared images to the same 2-3 specialists.
- Organizing and finding wound images was painstakingly tedious.
UIÂ Refinements
Based on the feedback received during our user interviews, we were able to make UX adjustments that ultimately improved the experience for the user.
One specific example was around the hashtags concept. One major win came when we showed our concept of hashtags to her. She got really excited about the opportunity to organize and group similar images because she frequently lectures and wanted a way to group similar images for teaching. That insight opened the door to explore tagging even further, as it proved to be a key value proposition for us moving forward.
Image 4: UIÂ Refinements
Dev Test
Once we understood the general workflow and the required screens, we ran a dev test to validate how easily our components could be implemented in Bootstrap. Initially, we tried exporting code directly from Figma, but the output didn’t follow Bootstrap's syntax, causing issues for the devs.
After a few syncs with engineering, we decided that I would be handling the frontend development and providing that to the devs, while they focused on the backend work. I chose to use Cursor to help me refactor the vanilla HTML into proper syntax code, which I could then handoff to the developer to hook up business logic.
Image 4: Responsive designs to tests with Bootstrap CSS using out-of-the-box components.
.png)
Image 5: Chat with the developer to see if the UI translated correctly.
Final UIÂ Refinement
With a backlog of user feedback ready for the next implementation, we made final cosmetic updates to the UI before handing off the designs to the development team.
Additional notes on interactions, state changes, and loading behaviors were all documented in Figma and discussed multiple times a week. This helped bridge the gap between design intent and implementation.
We kept TRUE-See’s existing brand identity for consistency, but layered in modern UI patterns to improve usability and flow.
Video 2: Making subtle changes to the UI to modernize it.
Development &Â Implementation
With a handoff strategy already in place from our initial dev test, we began translating everything into code and testing in a staging environment.
By this point, most of the heavy lifting was done thanks to the AI assistance from Cursor to help with the frontend code. I stayed closely involved to make sure the final product matched our design intent and interacted as expected.
Results
The updated app hasn’t officially launched yet, so usage data is still in the works. However, early feedback from physicians has been positive—especially around the ease of use and speed of the new photo-taking flow.
Once live, we plan to track how many photos are taken per session, and how often they’re analyzed and shared. These metrics will help us measure the real impact of our design decisions over time.
more Projects
Promontory
LinkedIn for investors.
Square
Email design system.