Team:
1 ui/ux professional
1 project manager
3 developers
Timeframe:
September 2023 - June 2024 (10 months)
Executive Summary
Within a 10-month period, and with a team of just 3 developers, Equilobe first built a 3-month MVP, then reached the pre-launch stage for a new modernized version of an outdated arthroplasty register.
The new platform’s extensive features and user-friendly design are expected to dramatically increase adoption among medics and surgeons, enhancing the register’s ability to conduct reliable statistical research. This will ultimately improve patient outcomes for future implants. The newly developed platform has already impressed the board members of the private company maintaining the current register, leading to considerations for its application in other medical fields.
The current Arthroplasty Register
All orthopedic clinics and departments in our client’s country are required to report their arthroplasty procedures (hip, knee, and spine) to an arthroplasty register. The register holds personal forms for approximately 100,000 patients with primary and revision hip endoprostheses, highlighting its extensive reach and impact.
The register plays a crucial role in the healthcare system. Its primary function is to act as a surveillance mechanism, providing an early warning system for identifying problematic implants. Additionally, it offers individual databases for each orthopedic clinic, allowing them to access their records and benchmark their data against national trends.
Visual: Snippet of the current registry UI (low quality due to NDA restrictions)
The importance of moving to a modern platform
The current register currently operates on an online platform developed over 10 years ago using basic JavaScript, CSS, and HTML technologies, lacking modern UI/UX principles.
This outdated design has led to a lower adoption rate, with most surgeries being documented by reporters rather than the medics themselves. Consequently, the current reporting tools offered by the registry are underutilized by medics and hospitals.
Additionally, the accumulation of numerous features over time, combined with the use of old technologies, has decreased the platform’s maintainability, making the codebase difficult to work with.
Scope of the 2.0 App
Elevate User Experience: Implement a modern UI/UX for a seamless and enjoyable experience for both reporters and operators, as well as surgeons.
Boost Engagement: Increase surgeon and medic usage with innovative features like an interactive spine surgery prosthesis drag-and-drop builder.
Maximize Register Value: Transform the register into a powerful information tool with advanced reporting, analysis, and graphical representation features.
Cut Maintenance Costs: Adopt modern technologies that reduce maintenance expenses and enhance overall efficiency.
The High-Stakes Challenge
The CEO of the client company set an ambitious target: develop an MVP for the new app within just three months. This challenge is compounded by the need to build both the back-end and front-end concurrently with the same team.
Adding to the complexity, the team was tasked with importing historical anonymized data from an outdated, unsupported database to demonstrate the new app’s capability to handle a large database seamlessly.
To top it all off, this monumental task was to be executed with a lean team of just 3 developers (including a tech lead), 1 UI/UX designer, and 1 product manager. Achieving such a feat on a tight budget is nothing short of extraordinary.
The Initial Evaluation
Building such a complex MVP in just 3 months with only 3 developers seemed impossible with a conventional approach. The database selection needed to be robust enough to handle vast amounts of data reliably. Additionally, the server required a pre-built backbone to save development time without compromising on quality or safety.
To maximize efficiency, at least two of the developers would focus primarily on the front-end, while the third would customize the back-end solution to meet the project’s specific needs. Given the extensive UI components and intricate logic required, the front-end demanded the bulk of the manpower, while the back-end leveraged as many pre-packaged but reliable solutions as possible.
Conducting a full product discovery or UI/UX process for the MVP was impractical, as documenting all features and technical specifications alone would take the entire three months. Therefore, the product manager from Equilobe’s team dedicated most of their time to collaborating with the client to document all necessary features and technical specifications.
Tailoring an Optimal Solution for the project
Using Strapi, a headless CMS, provided significant advantages over building a back-end server from scratch. Equilobe’s technical lead chose Strapi over a .NET back-end because creating a new collection for a type of the register’s form and exposing the CRUD operations endpoint would take just 10 minutes instead of days. This approach allowed the team to focus on developing essential back-end features rather than spending time setting up and writing extensive code.
Strapi is trusted by industry giants like Toyota, NASA, Walmart, and eBay. Its active, supportive community and extensive online documentation made customizing endpoints a breeze.
PostgreSQL was selected for its ability to handle large databases efficiently. Its scalability, performance, and reliability made it an ideal match for the Strapi version chosen by the team.
Full-stack JavaScript was the optimal choice for the project. As a renowned American software architect once said, it takes more time to switch contexts than to work within the same one. With Strapi written in JavaScript and easy to customize, all three developers could contribute to both the front-end and back-end as needed.
For the front-end, the team chose React along with MUI, MUI Core, MUI X Charts, Data Tables, and Date Pickers. While there might have been faster or more visually appealing libraries, MUI was the only one that met all the team’s needs out of the box. Delivering a MVP in 3 months meant there was no time to build basic components manually.
The Final Tech Stack
React
MUI Core for most components
MUI X for date pickers, data tables and charts
React Hook Forms
React Redux as Store
Axios for server calls
Additional packages for the different needs of the front-end app
Strapi Headless CMS
PostgreSQL
Visual: The project timeline - from Minimum Viable Product (MVP) to final pre-launch product
The 3-month fast MVP track
Project Setup
(1 week: Sep 4 to Sep 11)
Our team swiftly initiated the project setup, adhering to the stack chosen during the initial evaluation. The front-end was configured with React, MUI, Redux, and Formik, while the back-end was set up with Strapi and PostgreSQL.
Forms Technology Spike for Both Front-End and Back-End
(2 weeks: Sep 11 to Sep 25)
In the first week of development, we rapidly created a quick MVP using React and Formik, integrated with Strapi and PostgreSQL, to manage a form with hundreds of fields and numerous display conditions and validations. However, we encountered our first challenge: Formik couldn’t handle the extensive fields efficiently on desktops and tablets.
Our front-end team then explored multiple solutions and discovered that React Hook Form was the answer. Its minimal re-renders, incredible speed, and reliability for handling large numbers of fields and logic paved the way for future success in form speed and reliability.
Automated Form Builder
(1 week: Sep 25 to Oct 2)
The next challenge was the anticipated time required to implement the forms with MUI. Despite MUI’s utility, building forms with hundreds of fields is time-consuming.
In response, our team developed an automated form builder that transforms the Strapi collection schema into an MUI form for the front-end, effortlessly handling radio buttons, checkboxes, and select fields in the blink of an eye.
Create Database / Import Historical Data
(2 weeks: Oct 2 to Oct 16)
Building the Forms
(7 weeks: Oct 16 to Dec 4)
After overcoming the initial hurdles, the remaining time was dedicated to rapidly building the UI, considering all conditions, validations, and medical knowledge. The MVP was a resounding success, leading our client’s board to proceed with the platform development.
The Product Development Track
Designing a Modern UI/UX for the New Registry
(4 weeks: Dec 4 to Jan 1)
After winning the MVP, we laid the foundation for a great product by designing a new, modern UI/UX. Countless hours spent collaborating with the Registry’s team resulted in a feature-rich platform design that meets their needs and exceeds their expectations.
While Equilobe’s UI/UX specialist crafted and validated the new design with the client, our development team implemented it, starting with basic components and culminating in an innovative layout. The new platform can display the same information in a 1, 2, 3, or 4-column adaptable layout, allowing surgeons and medical professionals to fill out forms on any device.
Building the Modern Forms the Registry Envisioned
(15 weeks: Jan 1 to Apr 15)
The MVP demonstrated our stack’s ability to handle numerous conditions, validations, and fields. The final product development focused on refining these elements to achieve medical-grade compatibility with various implant producers for all joints the registry oversees.
Visual: Snippet of a form step from one of the multiple forms
(low quality due to NDA restrictions)
We introduced remarkable features, such as the ability to build a custom implant from an infinite number of parts or drag and drop implant components directly onto the vertebrae of a spine for automatic self-documentation. Additionally, new forms can be automatically populated with historical data for the same patient. The list of features is extensive and impressive.
Adding Patients, Doctors, and Hospitals Management
(3 weeks: Apr 15 to May 6)
Our team enabled the search, view, edit, delete, and addition of various clients, hospitals, doctors, and more. Some of these entities contain hundreds of fields, tables of fields, and multiple relations.
Increasing the Registry’s Value with Advanced Search and Reporting
(4 weeks: May 6 to Jun 3)
One of the standout features of the new registry is the ability to generate reports on the fly in just a few seconds, even when considering vast amounts of historical data. This feature delivers real-time granularity changes for any displayed chart.
The reporting feature was developed to be highly flexible and generic on both the front-end and back-end, allowing any number of filters, reports, and charts to be added in just a day’s work.
Adding User Management, Audit, and Fixing Bugs
(4 weeks: Jun 3 to Jul 1)
As we approached the pre-launch phase, our team added user management and audit features and conducted a final bug-fixing cycle, ensuring the app was ready for deployment.
Visual: Snippets of the new register interface demonstrating responsive design across tablets, desktops, and phones (low quality due to NDA restrictions)
The End Result
Within the projected 3-month period, the team successfully built the MVP, featuring a PostgreSQL database, a customized Strapi headless CMS with imported historical data, and a front-end application handling most of the register’s forms.
After an additional 7 months, the team integrated highly desired custom UX/UI for all forms, significantly enhancing usability for both the register’s operators and medical professionals. This made reporting medical procedures and prosthetic components seamless.
The online platform was packed with numerous advanced features, transforming it into an incredible tool for reporting, utilizing historical data for medical procedures, and conducting statistical analysis. Some standout features include:
Documenting spinal procedures with a drag-and-drop implant builder for both lateral and front views.
Recording highly customized implants from various part types and producers.
Automatically displaying patients’ historical procedures for the selected joint or body side.
Generating complex reports and charts for different joints, counties, hospitals, timeframes, and more on the fly.
Countless hours and revisions were dedicated to ensuring all forms, fields, and validations met high medical standards and perfectly aligned with implant functionalities. Most bugs were meticulously identified and fixed, preparing the platform for a smooth pre-launch.
Impact and Benefits
Our client, the company currently operating the arthroplasty register, is diligently navigating all necessary economic and legal steps to transition to the new platform. Given the stringent regulatory requirements, these steps are thorough and time-consuming. However, thanks to the platform’s pre-launch development stage achieved in just 10 months, it can go live shortly once implementation approval is granted.
The platform’s extensive features and modern UI/UX are expected to significantly boost adoption among medics and surgeons compared to the current app. This increased usage will enhance the register’s ability to conduct reliable statistical research, ultimately improving the outcomes of future implants for patients.
The new platform developed by Equilobe has already impressed the client board members, prompting a preliminary analysis for its potential application in other medical fields. This success story underscores the platform’s versatility and Equilobe’s capability to deliver high-impact solutions.
