The Touch Surgery app (rebranded Digital Surgery), is a mobile application designed to simulate surgical training, with a unique mechanic combining gamification and spaced repetition. It caters to all levels of medical practice, providing a comprehensive library of procedures and articles from reputable sources like Stanford and Imperial College.
Problem Statement
As it happens with startups, I joined TS with an MVP already in existence. Yet stakeholders believed both the app and the brand needed urgent redesign.
Additionally, there were numerous unanswered questions about the usability and value of the hypothesis underpinning the product, which required validation.
Spaced repetition reinforces learning by reviewing concepts at strategically timed intervals to improve retention. Gamification adds elements like streaks, rewards, and challenges to make learning engaging and addictive. Would these strategies resonate with medical students?
- How about surgeons already practising?
- Could they also prove valuable for non-surgeons, such as general practitioners, nurses, or even patients?
Empathise, Understand, Research
As the founders (and fellow surgeons, one of whom was in a teaching possition) I had direct access to invaluable expertise. Yet, to avoid the risk of implicit biases, we conducted qualitative research through interviews with surgeons from Imperial College and the Guys' Hospital among others.
These User Personas were hypothesised and later refined:
A Group (pictured): 1 Junior Resident/Trainee, 2 Senior Resident, 3 Consultant / Attending Surgeon.
B Group: GPs, SAS specialists, nurses, paramedics.
C Group: Patients, Asociations of patients, the general public.
Group 1 pictured above was the main target, being composed of trainees in their first day in Med School—, practising surgeons, up to senior attending surgeons. A fourth persona could be thought to be overlapping with the latter: The Authors, highly experienced pioneers in revolutionary surgical procedures such as Ear Reconstruction, Hip Replacement and so on.
Having an MVP in which to build upon, an analysis was in order. The user journey was fairly intuitive, but could be optimised and places and ensure it was future-proof. Here's a
Design Process
Ideation
As adviced by the likes of Dr. Robin Skynner and comedian John Cleese, the earlier in the process, the more benefit there is in a time-boxed stage of "open mode" thinking, with no constraints of colours, shapes or function. This usually involves thinking with our hands, sketching with pen, paper and markers; watercolours, Procreate App or whatever comes in handy. This informs later stages of more formalised design.
User Flows
Again thinking with our hands, and with the benefit of the above analysis, sketching a 'happy path' on a white board allowed us to identify the high-level user journey, information architecture and some potential pitfalls in both UX and implementation. I can't stress how important this step is, and later iterations.
Something can be said about standing, walking around a comprehensive view of the product, inviting interdisciplinary discussions and wipe and redraw any part.
Wireframing
From left to right: Procedure Library (or content hub, a centralised, interactive list for browsing, managing, and tracking content, likely user-specific. Side drawer menu with sorting or filtering functions, and a Progress Dashboard. It provides a clear, comparative overview of the user’s performance and achievements against set benchmarks, designed to motivate users through visual progress tracking and peer comparison.
Prototyping
Prototyping complex interaction design (IxD) ideas is one of my favorite parts of UX (follow the tag here), but in a fast-moving startup, building a high-fidelity prototype isn’t always the best use of time.
Instead, try this: print your screens, stick them to a wall or whiteboard, and connect them with arrows to map the flow. Suddenly, you have a physical, tangible "blueprint" of the user journey. It’s simple, collaborative, and eliminates the need to click through a digital prototype.
At TS, we used this approach: printed screens and adhesive tack on a whiteboard to visualize the user flow. It made discussions faster, alignment easier, and ideas clearer—offline.
Once the flow is solid, I would refine specific interactions, test ergonomics and the narrative of transitions and timings using tools like Principle App.
If needed for wowing stakeholders, do you combine the logic and mechanics into a full high-fidelity prototype in Figma or Protopie. By that point, you’ve already done the heavy lifting, and the final prototype is simply a polished version of a well-tested design.
Visual design
The visual design focused on clarity and usability for both iOS and Android. We established a consistent design language that aligned with the app’s educational purpose, featuring a timeline indicating the learning progress, per module visualisation activity, a masonry style homepage with relevant articles and a tagged list of procedures that could be downloaded and played offline.
Validation
User testing
User testing sessions were conducted to evaluate the effectiveness of the new design. Feedback from surgeons and trainees highlighted areas for further refinement.
Iterations and Refinements
Based on user feedback, we made several iterations to improve usability and functionality. This iterative process ensured that the final design effectively met the training needs of users in a surgical context.