User Experience (UX)

Summarized using AI

Retinas on Rails! - Eye spy with my little eye Macuject

Bianca Power and Bradley Beddoes • April 12, 2024 • Sydney, Australia

In this presentation at RubyConf AU 2024, Bianca Power and Bradley Beddoes from the Australian digital health startup Mackie discuss their efforts to prevent blindness, particularly focusing on age-related macular degeneration (AMD) and their technology stack built around Ruby on Rails. The session is divided into two parts: an overview of AMD and an introduction to Hotwire's advantages in their software development process.

Key Points Discussed:
- Introduction to AMD: Bradley highlights that AMD affects about 200 million people worldwide, leading to blurred central vision, particularly impacting individuals in their 50s and older. Risk factors include age, family history, and smoking.
- Eye Anatomy and AMD: Detailed explanations of the eye’s structure, particularly focusing on components like the vitreous humor, retina, and macula, which are crucial for vision and are affected by AMD.
- Current Treatments: While no cure exists, intravitreal injections are the standard treatment. Mackie aims to improve the scheduling efficiency of these treatments through their software.
- Importance of Domain Knowledge: Emphasizing the need for software teams to understand the medical domain when developing solutions, enhancing collaboration between technical teams and medical experts.
- Transition to Hotwire: Bianca discusses their successful transition from a React frontend to Hotwire, pointing out how it allows for simpler development and effective real-time updates in their application, improving user experience for ophthalmologists.
- Patient Records Management: Illustrating how their platform manages patient data, it uses Turbo Streams for real-time updates, allowing clinicians to see live changes without needing to refresh pages.

Significant Examples:
- Real-life administration of injections to treat AMD is depicted, showcasing the seriousness and urgency of managing such treatments efficiently.
- The use of Hotwire is described as crucial for maintaining speed and simplicity in their development process, allowing their small team to create a highly functional application.

Conclusion and Takeaways:
The talk concludes with an emphasis on the significance of understanding the medical context in software development. By leveraging Hotwire, Mackie aims to create software that significantly contributes to their mission of ending preventable blindness through improved patient care and technology solutions.

Retinas on Rails! - Eye spy with my little eye Macuject
Bianca Power and Bradley Beddoes • April 12, 2024 • Sydney, Australia

Macuject is an Australian digital health startup helping prevent blindness by supporting eye care professionals in achieving the best possible outcomes for their patients with diseases such as age-related macular degeneration (AMD).
Our presentation will give an overview of the eye's structure, straightforward steps to ensure the health of your eyes, AMD, its treatment, and how our software helps make individualised decisions. It is sure to be a real eye-opener!

After that, we’ll switch lenses to discuss our technology stack, primarily focusing on our Majestic Monolith powered by Rails 7! As a MedTech startup, the experience doctors have when interacting with our app can have a considerable impact. Over the past year, we've improved that experience dramatically through using Hotwire. We’ll share how our small team is gradually replacing our React frontend with Hotwire while rapidly building eye-popping new features.

With Turbo Frames, Turbo Streams, and Stimulus, Hotwire lets us rethink when to use JavaScript and allows us to use just the amount we need, where we need it. It allows us the flexibility we want, with all the functionality we need, in a Rails-friendly paradigm that's a delight to work with.

What do you call a Deer with no eyes? We have no Eye-Deer, but we look forward to seeing you at our talk!

RubyConf AU 2024

00:00:03.840 Good afternoon, RubyConf! I'm really excited to be here today to talk to all of you. Before I get started, though, a quick poll: show of hands, how many of you have heard of a disease called age-related macular degeneration, or AMD? Wow, that's a lot more than I expected!
00:00:10.719 Okay, great! You go and do the talk for me if you like. I’d like to share a quick introduction about Mackie. We're a MedTech startup based out of Melbourne, and our vision is to end preventable blindness because good vision is a human right. We're a fully remote company with team members in Queensland, New South Wales, the ACT, Victoria, and even Tasmania. We're almost at Australian Bingo!
00:00:24.480 Our technical team, as the introduction said, absolutely loves Ruby and Ruby on Rails; it makes our eyes happy. However, what doesn't make our eyes happy is that almost one in eight people, which is about 20 million Americans and around 200 million people globally, have some form of age-related macular degeneration. This condition often goes undertreated.
00:00:39.799 Mackie is working to address this shortfall in treatment capability. Through a combination of AI, data, and clinical expertise, we aim to help more people live better lives with this condition. We've structured our talk this afternoon in two halves. Bianca is going to talk about some really interesting Hotwire developments we've been implementing at Mackie over the last 12 months.
00:00:54.639 That left me with absolutely nothing technical to discuss, so I thought: why not come here and share some of the things I've learned in the past three years at Mackie about the biology of the eye and the diseases we treat? Because honestly, what could go wrong by coming to a public forum like this to discuss a topic where I'm not an expert?
00:01:09.759 Before joining Mackie three years ago, I really hadn't given much thought to the eye or how it worked or all the pieces that contribute to its function at all. It turns out that it's a really fascinating subject. Most of us have heard of components like the cornea, pupil, and lens, but the anatomy of the eye goes so much further than that.
00:01:22.119 There are three parts of the eye that I'd like to highlight today, which are linked to the work we are doing. The first is the vitreous humor. This region gives the shape of the eye and resembles a gelatinous globe. It's composed of water, collagen, glycosaminoglycans, electrolytes, and proteins, and it's completely transparent. The reason I mention this specifically is that it will come up later in the presentation, so please remember the vitreous humor.
00:01:39.799 The second important part is the retina, which is the innermost layer of cells within the eye. When light comes in through the cornea, down through the pupil, and through the lens, it will hit somewhere on the back of the retina. You have to imagine this as a three-dimensional structure, as it wraps around the back of the retina. Once the light hits the outer cells of the retina, it then travels through various transparent layers.
00:01:54.560 A crucial aspect of the retina that I want to emphasize today is the concept of photoreceptors. There are 120 million rods in each eye responsible for night vision and peripheral vision, while cones are responsible for color vision and visual acuity, with concentrations of red, green, and blue light receptors.
00:02:12.600 As light enters the eye, it excites these photoreceptors, leading to a process called transduction, which translates photons from light into electrical signals. These signals travel back through various neural cells until they reach the optic nerve, which relays the information to the brain. This process is incredibly complex and well worth investigating further if you find the time.
00:02:29.000 The third part of the eye I'd like to highlight is the macula, a small central part of the retina about 5 millimeters across. The macula is essential for central vision, allowing you to focus on objects directly, such as when writing Ruby code, reading a book, or looking at someone on stage.
00:02:42.920 At the center of the macula is the fovea, which has the highest concentration of cones, critical for color vision and visual detail. Damage in this region can lead to significant visual impairment, especially for individuals with age-related macular degeneration (AMD).
00:02:56.720 What is age-related macular degeneration? It's a medical condition that results in blurry central vision due to damage in the macular area. For someone without this disease, the world looks clear, but for someone with AMD, they may see significant blurriness in their central vision, making it difficult to recognize faces or perform daily activities.
00:03:09.400 AMD typically begins in individuals in their 50s and can progressively worsen, ultimately leading to advanced forms of the disease. There are two types of advanced AMD: geographic atrophy, where cells are dying in the macular part, and wet AMD, which involves abnormal blood vessels leaking fluid into the vitreous humor.
00:03:28.960 Risk factors for AMD include age, poor diet, family history, and smoking. If you have a family history of AMD, you're 27 times more likely to develop the disease, and if you smoke, your risk increases fourfold. Therefore, individuals with a family history who smoke may be as much as a hundred times more likely to be diagnosed with AMD.
00:03:59.760 How can you reduce your risk? Eating oily fish at least three times a week, consuming green leafy vegetables, and incorporating bright yellow or colored vegetables into your diet are key. Cook with healthy fats such as olive oil or ghee to maximize the benefits.
00:04:06.560 Currently, there is no cure for AMD, and treatment varies between the wet and dry forms. The standard treatment for AMD is intravitreal injection, which delivers medication directly into the eye. This seems daunting, but it’s an effective way to manage the condition.
00:04:14.840 Before proceeding, let me share a real-life photo of this treatment method. If anyone feels uncomfortable viewing this, you can turn away for a few seconds. Here it is. This is our CEO and co-founder, Dinda Chawan, administering the injection. She is a retinal specialist with extensive experience in the field.
00:04:34.960 In the photo, you can see the eye speculum in use, which helps to keep the eyelids open during the procedure. Any orange you see in the photo is a disinfectant applied before the procedure; there’s no blood involved.
00:04:50.840 Before the injection, numbing drops are applied, so while there is discomfort and some pressure, the actual process is relatively quick. I've been present when these injections are performed, and you'll be surprised by how fast it actually is.
00:05:06.560 Despite the initial fear many have about this treatment, the reality is less daunting than it seems. The standard protocol after diagnosis is to receive an injection every four weeks for the rest of your life, which may not sound pleasant.
00:05:31.160 If a patient has both eyes affected, that could be two injections every four weeks. If both geographic atrophy and wet AMD are present, it could be up to four injections. Mackie has been implementing our software in clinics across Australia and are now transitioning into trials in the US.
00:05:47.080 This work has dramatically improved the efficiency of scheduling these injections. We aim to provide longer intervals, extending them from six to 10 weeks for some patients. Some patients have undergone over 100 injections in a single eye, so even small extensions can significantly impact their quality of life.
00:06:09.160 More importantly, the availability of skilled doctors to perform these procedures is limited. By extending intervals between injections, doctors can treat more patients, thus significantly reducing the risk of blindness for many.
00:06:23.440 You might wonder why we're discussing this at a Ruby conference. I believe it's important to mention that domain knowledge is critical in software development but often overlooked. Problem domain knowledge allows technical teams to create solutions that effectively operate in their specific context.
00:06:41.160 At Mackie, we practice this approach to great effect. Our technical team works alongside medical experts to ensure we're building the right solutions for their needs. Conversely, our medical staff learn about software development processes, which enhances collaboration.
00:07:00.000 The benefits of this collaboration include improved communication, better user-centered design, and more efficient problem-solving. One pertinent example is how we structure interfaces to reflect how ophthalmologists view patients, enhancing their workflow.
00:07:17.600 If there’s one takeaway from my talk today, it’s the importance of understanding your problem domain. Reach out to your colleagues; learn about their specializations and share your own. This mutual exchange of domain knowledge can lead to improved outcomes.
00:07:32.720 I’m known as the team member who loves sharing dad jokes in our Slack channel, so to smoothly transition to Bianca’s part of the presentation, let me share one with you: Did you hear about the website for people suffering from eye pain? It's a site for sore eyes.
00:07:51.200 You know what's a real sight for sore eyes? Hotwire! So, without further ado, let’s dive into Hotwire. Hotwire, or HTML over the wire, presents techniques for developing modern web applications with simplicity and productivity.
00:08:07.160 It enables developers to maintain speed and responsiveness while simplifying the development experience. Hotwire is made up of multiple parts, including Turbo Drive, which is the latest iteration of Turbolinks. It accelerates page changes and form submissions, making our Rails applications feel more modern.
00:08:27.760 Turbo Frames allow us to break complex pages into multiple independent contexts, making it possible to perform powerful operations when combined with Turbo Streams, which enable partial page updates over websockets.
00:08:41.520 When using Turbo, we can achieve standard Rails application functionality while simply adding some extra HTML attributes to harness the additional features Turbo provides. Sometimes, we may require more customized behavior, and this is where Stimulus comes in.
00:08:56.560 Stimulus is an HTML-centric approach for adding custom JavaScript, allowing us to implement just the right amount where needed. Last year when I joined Mackie, our frontend was primarily built using React. Since then, we've transitioned to using ERB templates paired with Hotwire.
00:09:14.640 The migration process has been gradual, ensuring our web application maintains its expected functionality. We identify a specific page or component built in React, build a new version using ERB templates, and determine if Turbo is appropriate for interactivity.
00:09:36.240 If Turbo suffices, we add it; if more interaction is necessary, we incorporate Stimulus for those small customizations. We present this new version to our clinical team for feedback and iterate as needed before fully replacing the React implementation.
00:09:51.720 All new features we’ve developed during this period have also been using ERB and Hotwire, with no new React components being created. In my time at Mackie, aside from minor bug fixes, I've only touched the React code when preparing to remove it, which is quite satisfying!
00:10:06.440 Hotwire is a great solution for our small team at Mackie. With just three of us working on the web application, we are all well-versed in Rails. Hotwire's Rails-like environment allows for rapid development and prototyping, fitting perfectly into our startup culture.
00:10:27.520 Hotwire reduces or elminates the need for JavaScript on basic functionalities, simplifying the codebase and user experience. This gradual shift from React has streamlined our code complexity while maintaining a positive user experience.
00:10:44.280 Now, let’s take a look at the patient visits page for clinics using the Mackie platform. This page serves as the main interface throughout the day. When patients arrive, the ophthalmologist takes scans of their eyes.
00:11:04.440 Once those scans are complete, the images automatically upload into Mackie’s AI for processing. The moment processing is complete, it communicates with the web application, triggering a Turbo Stream broadcast. As soon as this occurs, the patient's record will appear in the waiting room.
00:11:18.240 This stream will continue to populate the patient records real-time throughout the day as more patients arrive and their scans are processed. Any clinician in the clinic can have this web page open and see patient records moving into the table instantly.
00:11:31.400 There’s no need to reload the page or deal with polling issues; all updates happen in real-time, thanks to Hotwire. When a patient is ready to be seen, the doctor clicks on their record in the waiting room table, leading them to the treatment page.
00:11:47.960 From this page, the doctor can make decisions regarding the patient's treatment. Once completed, the doctor clicks the ‘Complete Treatment’ button, which instantly updates the patient visits page, moving the record from the waiting room into the completed visits table.
00:12:03.640 This means that anyone in the clinic who has this page open will get to see that record shift immediately, allowing for up-to-date knowledge about each patient’s status.
00:12:19.240 Now, let's dive into some code and break down the functionalities on this page. This page has three Turbo Frames: an outer Turbo Frame as well as two inner Turbo Frames. The outer frame encompasses the patient visits table, while the inner frames will manage the functionalities for filtering and sorting within the individual tables.
00:12:37.080 The Turbo Stream broadcasts when a patient record needs to transfer between tables, commensurate to the specific clinic being utilized.
00:12:49.200 Turbo Frames utilize specified identifiers named for the individual clinics, and any updates to a record can trigger a response within the appropriate Turbo Frame.
00:13:01.720 We can optimize the page further by efficiently managing how the tables are updated. This allows us to isolate contexts within each table, making it straightforward for users to interact with the components.
00:13:20.480 In summary, Hotwire enables us to craft high-functionality user interfaces tailored to our needs at Mackie, driving our mission forward: to help end preventable blindness. Thank you!
Explore all talks recorded at RubyConf AU 2024
+14