Why TRUE-See?
Current photo-taking and management practices in healthcare are overly complex and risk HIPAA violations. Doctors either use their personal phones, which is fast but risky, or struggle with outdated EHR systems that make uploading images slow and frustrating.
Our challenge was to build on TRUE-See’s existing foundation in secure clinical photography and design a faster, more intuitive way for physicians to capture, store, and analyze medical images — as seamless as a smartphone, but built for clinical care.
Video 1: How EHRs currently manage photo taking & assigning.
Image 1: 2x2 matrix of TRUE-See's competitors.
Crafting our unique value proposition
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.
Laying the groundwork for quick implementation
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.
Dev Test
Midway through the design process, we ran a dev test to understand just how easily the Bootstrap implementation would be. Initially, we tried exporting code directly from Figma, but the output didn’t follow Bootstrap's syntax, causing issues for the devs. The unfortunately reality of tech is that "design to code" is just not fully there yet.
After a few syncs with engineering, we decided that one of the engineers would be handling the frontend implementation, while the other two focused on the backend work. Our collaboration consisted of syncs every other day to check in on progress and blockers coming from the designs.
Image 4: Responsive designs to tests with Bootstrap CSS using out-of-the-box components.
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.
Feedback Implementation
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 the discoverability of the Share action. During the usability test, the user was instructed to share a patient with a specialist. They were unable to do so because they couldn't find the Share button, despite it being on the home screen.
After the call, we collaborated on what the best approach could be for the next usability test. I shared four variations during our internal design critique session.
Image 4:Â Making the Share action more discoverable
Image 3: Virtual usability test with a user
Increasing visibility
We A/B tested all four versions of the Share action and it became apparent that the icon + name combination provided physicians with the visibility necessary to take action quickly.
After implementing these changes, all future participants were able to locate and successfully use the Share feature within seconds. It was a clear signal that these improvements weren’t just aesthetic; they meaningfully reduced friction and improved task completion.
Tying it back to the TRUE-See brand
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.
.png)
Image 5: Chat with the developer to see if the UI translated correctly.
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 (Coming Soon)
LinkedIn for investors.
Square (Coming Soon)
Email design system.