GlobalSurgBox: Dashboards for Surgical Trainees

Team

1 Software Team Lead

3 Designers

5 Software Engineers

My Role

Lead Product Designer

Tools/Skills

UI Design

User Interviews

Timeline

Fall 2023

11 weeks

OVERVIEW

GlobalSurgBox↗ was founded to fill the gap in accessible surgical training. Their eponymous GlobalSurgbox (see right) is a portable, adaptable, and affordable surgical trainer designed for use across various skill levels, from medical students to surgical fellows. Their website also has instructional videos that users reference to practice different surgical techniques.

In Fall 2023, I joined Engineering World Health↗ as a Product Designer in their Software sub-team. We were tasked to design student and instructor-style dashboards to efficiently provide instructor feedback and student insights.

THE CHALLENGE

How might we create a supplemental learning tool to improve students’ surgical techniques?

THE SOLUTION

CREATING THE DASHBOARDS 👩🏻‍💻

The GlobalSurgBox founders envisioned a digital interface used by three distinct users.

Given that there were three designers and three views, each designer was assigned to work on one specific dashboard view. This ensured that each aspect received individual attention, resulting in a comprehensive design.

I was responsible for designing the student view.

Firstly, we conducted thorough user research to gain insights and collectively identify pain points of current medical education. After that, we iterated on different layouts. In the end, we delivered high-fidelity screens for all three views to our software developers for implementation.

WHAT DOES IT TAKE TO BE A GOOD SURGEON? 🤔

Besides Grey’s Anatomy ⇩, I had limited knowledge of what surgeons do, even less what they need. After interviewing current GlobalSurgBox users and senior surgeons, I learned a lot about the day-to-day of surgical education and experience. Conversing with these doctors provided valuable insights on how to best support these professionals.

  1. Surgeons are visual and hands-on learners. Watching demonstrations and practice are how they improve.

  2. Surgeons are intrinsically motivated to improve so numerical grades are ineffective compared to verbal or written feedback.

  3. Surgeons are busy, so efficiency is key! Their tools should have minimal screens to accomplish the tasks.

USER PERSONAS WITH PRECISION 🔪

I conducted 4 user interviews with surgeons from the University of Colorado, Stanford, and Harvard Medical School. Thanks to the interviews and insights, we constructed 3 user personas, 1 for each role. Developed through empathetic insights, they are crucial in shaping our design approach. The personas capture the practical aspects of surgeons' roles, clearly understanding their unique motivations, goals, and pain points.

PREPPING FOR SURGERY (SKETCHES) ✍️

With our new robust understanding, I started sketching explorations. I mainly referenced already existing learning platforms like Canvas and Google Classroom. The features that we conceptualized included:

LANDING PAGE 🚀

MODULE VIEW #1 📚

MODULE VIEW #2 📖

UPLOAD VIDEO FEATURE 📽

We reconnected with the founders, who provided feedback and updated us on their course of action.

  1. Videos or instructional materials will not be on the dashboard. That means that those sketches were no longer relevant.

  2. They wanted all the video assignments visible. This need for quick accessibility & efficiency was also expressed during our surgeon user interviews.

THE FIRST CUT (MEDIUM FIDELITY) ✍️

After these sketches, we were informed that the founders wanted a working prototype for an educational grant application. We also learned that these mid-fi's help the software engineers conceptualize their code contributions. Based on the sketches and our new timeline, we quickly created mid-fi wireframes with Figma.

Design Justifications:

  1. To-Do and Completed List: From our user interviews, we learned that surgeons prioritize efficiency and accessibility when using technologies. I placed the two on the landing page so that users can easily upload videos for review and view feedback from past ones.

  2. Module Drop-Down Menu: That same insight informed the drop-down menu (on the second screen). This allows users to switch between different modules.

  3. Pass/Fail Rubric: The basic layout was influenced by existing classroom platforms. However, one deviation I made was to implement a pass/fail and comments system. This is because doctors crave detailed feedback on their surgical techniques, not numerical values.

FINAL STITCHINGS (HIGH FIDELITY PROTOTYPE) 🪡

With the approval of clients and fellow team members, I advanced these mid-fi iterations into our final screens. It did not deviate from the mid-fis besides aesthetics because our mid-fi’s were basically finalized for the grant application and partially shipped to our developers.

Design Justification: The one change I made involved the user display (on the top right corner). In the mid-fidelity explorations, I considered both “Welcome, [User name]” and a profile picture. Thanks to clients’ and fellow designers’ feedback, I combined the two to achieve two things:

  1. The 'Welcome' message establishes a warm and inviting tone, instantly connecting with the user.

  2. The profile photo adjacent to the greeting enhances the sense of identity and ownership, reinforcing that the platform is tailored to the individual user.

POST-OP & KEY TAKEAWAYS 💫

Our client was extremely satisfied with our wireframes and included our preliminary Mentor and Mentee screens in their Meta’s Llama Impact Grant↗ application. We’re still working with GlobalSurgBox to develop the wireframes for the Program Director role.

This experience has imparted new insights to me:

  1. Importance of Persona Development 💁🏻‍♀️: Through in-depth user research, including interviews, surveys, and usability tests, I gathered valuable insights into our target audience's needs, motivations, and pain points. We crafted personas with rich narratives, providing context about their backgrounds, goals, and challenges, which helped humanize our users and make them more relatable to the design team.

  2. The designer role in a greater team 👩🏻‍🎨: Collaborating with the software development team was a crucial aspect of our UX project, and I learned the significance of aligning our efforts to create a cohesive user experience. I worked closely with developers throughout the development process to translate our design concepts into functional, user-friendly features. This involved regular communication, feedback sessions, and collaborative problem-solving to address any technical constraints or challenges that arose.

The Software sub-team of EWH! 👩🏻‍💻