Remote Scope UX


Mockup of Scope app on a Macbook

Project Overview

The company has a digital colonoscopy scoping tool which is used to remotely connect multiple surgeons to collaboratively diagnose a patient’s bowel cancer condition. The goal of the this project were:

  1. Make the application more intuitive and easy to use under surgery conditions.
  2. Add and cater for several new features within the UI.
  3. Redesign the UI with the rules of a new company design system

My Role

I was the UX lead in this project team and worked with a business analyst, managed a junior designer and was responsible for the following:

  • Gathering business requirements and mapping these out to user stories
  • User persona research and creation
  • User research and user testing (surgeons)
  • UI and Prototype design
  • Front end development for web based prototype and production front end code

Deliverables

Prototype - Figma

You can view the scope application prototype I designed by either viewing a video of me following the user journey, or you can attempt to follow the journey yourself by using the embedded Figma component below:

NB - There is a certain user journey flow you must take through the app, if you want to interact with it, details of which I have pasted below the prototype.

User journey

  1. Add Saj to feed waiting room
  2. Activate Saj feed
  3. Add Daniel Smith to waiting room
  4. Activate Daniel Smith feed
  5. Minimise ultrasound from main feed
  6. Remove the ultrasound from the feeds list
  7. Camera settings of Fareed Iqbal
  8. Edit the name of Fareed Iqbal
  9. Change the annotation colour of Fareed Iqbal
  10. Turn annotation bar on
  11. Turn annotation bar off
  12. Turn annotation bar on
  13. Broadcast the feed live
  14. Turn the live broadcast off
  15. Capture a picture
  16. Record the screen
  17. Stop recording the screen
  18. Open the gallery
  19. Close the gallery
  20. Turn the name tag off, on and the off again
  21. Mute all
  22. Unmute all
  23. Hide all proctor feeds
  24. Close chat menu and re-open it and close it again
  25. Go into full screen mode (what elements do we want to leave on screen at this state?)
  26. Return to normal screen size
  27. Exit with saving anything
  28. Complete the session

Prototype - Web

I wrote the front end code (HTML/SASS/CSS/JS) which was used in a web based prototype and also in production for the web application which you can view by watching the video below, or interact with it yourself on this fully interactive web prototype.

You can view the prototype below and/or view the source code on this Github repo.

Results

The new features of the application have now opened up new markets (particularly the Indian markets) for the business, allowed additional revenue streams to be opened up in the form of live broadcasts operation to students, and ultimately improved patient cancer diagnosis and treatment, which is the overall goal.

Contact Me