Streamlining the Clinical Logging Workflow
A custom photo-based transcription platform designed for medical students to convert, manage, and export handwritten clinical logs.
Role
Product Designer
Timeline
Sep 2024 - Apr 2025
Team
2 Designers, 2 Tech Leads, 8-9 Developers
BACKGROUND
FlowLeaflets–an organization started by medical students, for medical students
FlowLeaflets, founded by medical students in July 2023, prints surgical logbooks with uniform templates to aid in detailed case planning across various surgeries. They currently have a total of five different logbook templates,
What are Clinical Logbooks Used For?
Clinical logbooks are often used by medical students to record surgical cases that they’re working on. Institutions and programs often request digital versions of these logbooks (e.g., Excel spreadsheets) when evaluating medical students for further education or employment.
THE PROBLEM
Paper Logbooks Pile Up—And So Does the Work
Managing physical logbooks presents several challenges:
MANAGEMENT ISSUES AS LOGBOOKS BUILDUP
Logbooks accumulate in quantity over time, making it difficult to organize and easy to misplace.
DIGITAL CONVERSION OF CLINICAL LOGS TAKES TIME AND EFFORT
Manually converting detailed information from these logs into digital formats is both tedious and time-consuming—not ideal given how busy medical students already are.
PROBLEM STATEMENT
How might we design and develop a digital system that enables medical students to efficiently convert clinical logs into consistent, digital formats?
OUR SOLUTION
Streamlining Digital Logbook Creation and Management
Optimizing Focus and Flow
The clean, bento-style landing page highlights essential details at a glance. A prominent CTA encourages users to create a new log, reinforcing the app’s core purpose.
Each logbook also includes a detailed view for quick access to key info.
Efficient Log Creation
Photo transcription automates the process of entering information by hand, providing an efficient way to convert handwritten clinical notes into a standardized, exportable digital format.
Organize, Manage, and Export Logs with Ease
The “All Logs” page allows users to keep digital records of their clinical logs in one place, reducing clutter and eliminating the risk of losing physical logbooks. Logs can be easily exported from the actions menu, and filters support effective log management.
ACTIONS MENU EDGE CASES
THE PROCESS
Our Journey from Conception to Execution
An overview of what we've done and what's to come.
RESEARCH
Secondary Research
Empathize with target users
DEFINE
Problem Definition and Scoping
User Journey
User Persona
ITERATE
Wireframing
Design
Prototyping
Refine User Flows
TEST
Participatory Design
Feedback from Design Leads
Future Usability and A/B Testing
LAUNCH
Promotional Marketing
Monitor user metrics
Post-launch iteration & testing
RESEARCH
Understanding the User Through Stakeholder Insight
We gained valuable insight into the challenges and needs of medical students through our conversations with the stakeholders—a team of medical students themselves. Their lived experience helped us identify key pain points, which we captured in the following user persona.
Meet Andy, Our Target User
USER JOURNEY MAPPING
Visualizing the Overall Flow and Features
I drew out initial sketches to visually highlight key functionalities such as signup/login, photo transcription, and log history.
These sketches were then translated into a user flow diagram to gain a holistic view of the program’s functionality from start to finish.
DESIGN ITERATION
Snapshots of How our Design Evolved Over Time
With no established brand guidelines, our initial designs followed FlowLeaflets’ existing grey and dark blue palette. While functional, this color scheme lacked accessibility and visual appeal.
Subsequent iterations focused on improving layout, visual hierarchy, and overall aesthetics.
The final homepage design reflects a clean, minimalist look with stronger visual hierarchy, enhancing clarity and usability.
Deep Dive: Evolution of the Log Creation Flow
I focused on designing the transcription flow to help medical students digitize handwritten logbooks efficiently. Users can either (1) upload photos for auto-transcription or (2) manually enter data into a structured form, both of which export to a standardized .xlsx format for easy sharing.
I initially explored a transcription table to auto-populate log data, aiming to mirror the structure of physical logs. However, it lacked clear hierarchy and proved difficult to implement.
The original manual entry form was paginated into five steps aligned with sections of the adult cardiac case log. While conceptually clear, the step distribution created usability issues—some steps were overly sparse, others were dense and required excessive clicking.
Final Designs: A Clean, Form-Based Approach
The final design consolidated the form into a single scrollable page, preserving structure while improving flow. Since users are already familiar with the log format’s length, scroll-based navigation felt intuitive and reduced cognitive load. Key features include:
Steppers to indicate progress and allow users to jump between sections.
Inline error handling that highlights unfilled required fields, with a dropdown summary to help users locate and fix issues.
I designed five log form variations—one for each logbook type. Each log form follows the same interaction pattern, tailored with fields specific to the logbook type.
These iterations reflect a thoughtful balance between technical feasibility, user needs, and efficiency—resulting in a smoother, more intuitive core experience.
DESIGN SYSTEM
Building for Consistency, Scabaility, and Speed
As the application grew, we needed a more systematic way to ensure visual consistency and improve handoff efficiency. I helped build the design system from the ground up, focusing on customizability, reusability, and flexibility across core components. Key components included:
Text Fields
Dynamic field states (default, focus, error) support accessibility and clear user input.
Buttons
Designed in multiple sizes with defined hover and pressed states, ensuring consistent interaction feedback across the app.
Modals
Adaptable content layout provides a clean, predictable user experience for confirmation and alert flows.
These components not only streamlined development and reduced inconsistencies, but also made future iterations and new feature design faster and more scalable.
REFLECTIONS
Lessons in Collaboration and Design Systems
STAKEHOLDER COMMUNICATION
DESIGN SYSTEM
NEXT STEPS
Where do we go from here?
User Testing
Conduct usability testing with medical students to evaluate both the visual design and core user flows. Plan to run A/B tests pre-launch to validate key interaction patterns.
Product Launch
PROMOTIONAL MARKETING
Collaborate with our stakeholder to create marketing assets and help the product reach its target audience effectively—primarily medical students undergoing surgical rotations.
MONITOR METRICS
Track key performance indicators (KPIs) such as user engagement, log creation rates, and overall usability to assess product impact and performance.
POST-LAUNCH ITERATION & TESTING
Gather user feedback and conduct follow-up usability tests to identify improvement areas, refining the product in response to real-world usage and support broader adoption.
BONUS
Meet the Team
The Clinical Logging team at UBC LaunchPad’s Final Showcase (Spring 2025), presenting our work after 8 months of design and development.
Check out my other works
Relationship Management
A digital tool designed to help students abroad stay better connected with family.
COMING SOON
Homemade, Reimagined
Rebranding the visual identity and story of a local homemade pet treats business.