<img src="https://certify.alexametrics.com/atrk.gif?account=cvYzw1O7kI20L7" style="display:none" height="1" width="1" alt="" />
smilegenius logo
Fibonalabs helped SmileGenius to build a digital platform for clear aligner business needs.
Client: Smile Genius
Industry: Healthcare
Services: UX Design, Component-based development
OVERVIEW
The client wanted to simplify the aligner treatment process for patients and dentists. In the COVID times, when patients were not able to meet to the dentists, the client wanted to go digital and set up a virtual clinic to treat patients through video calls. They were looking for a platform where dentists can connect with patients, manage patient records, provide fast treatment and also connect with global labs to order aligners that can be delivered to the patients.

So, Fibonalabs designed and developed three modules (Patient/Clinic/Lab) for monitoring, tracking, and providing smooth communication between these three entities.
CHALLENGES
Teethlogo
Tedious communication for patients and regular visits to dentist.

Teethlogo
Complex administrative processes such as appointment booking, treatment tracking, answering queries etc for clinics.

Teethlogo
Limited labs access for dentists.
PROJECT METHODOLOGY
We followed agile methodology in which we had daily stand-up meetings to discuss the component development. We used Jira as our project management tool to track feature development and bug fixes. We had divided the project into scrums which helped us in planning and delivering the project.
SOLUTION APPROACH
Human-Centric Design Approach
We created intuitive and minimalistic UI for the mobile application and web applications. We stepped into the user’s shoes to understand their requirements, pain points, and expectations. This also helped us to empathize and gain a complete understanding of the dental treatment process as a primary step.
We connected and interviewed different stakeholders to understand the idea behind the network expansion of their dental community and the services which they wanted to provide for the user. We defined User journeys and treatment workflows to give a user-friendly design.
We used this UX technique to identify key interactions and touchpoints with the product. We compiled a series of user actions across different stages of their journey. Our team defined the user journey maps for all three; patients, labs, and dentists.
We worked on information architecture to give a smooth flow to the users. The detailed architecture defined the hierarchy, navigation, and features of the applications.
The wireframing was the essential step. Once the information architecture was ready, we worked on the wireframes to define the structure and functionality of different screens. After wireframing, the screens are converted into visually appealing, yet legible designs.
Later, we worked alongside the development team to design three applications-
Teethlogo
Patient Mobile App
Teethlogo
Dentist Web App
Teethlogo
Lab Web App
USER JOURNEY
User Journey
INFORMATION ARCHITECTURE
Information Architecture
WIREFRAMES
Interaction Design
Based on the wireframes, we created an intuitive, clean, and minimal UI to organize the data in one place across the modules. The color palette, templates, and components for mobile and web applications were created based on Smile Genius’s brand logo. The design harmony was created between all modules (Patient mobile app, Dentist Web app, and Lab web app).
FAST DEVELOPMENT AND TECHNOLOGY STACK
Backend

Serverless Node.js, RDS database hosted on AWS cloud. 


To adapt to the client's needs faster and make a scalable solution, we used AWS Serverless Architecture. It helped us to save time and build an agile application for doctors. For backup of the medical information, we used RDS - MySQL so that we would be able to use fast and secure storage.


We used AWS Cognito to sign up and sign in users and to add authorization for the APIs. Used AWS S3 for storing the images and files uploaded by patients, clinics and labs. Used AWS Lambda functions and AWS API Gateway to write the backend code for the APIs. Used AWS SAM for the deployment of the code.

Firebase Push Notifications
Frontend
Backend

React and React Native.


We used ReactJS to build a fast and scalable platform. We used data that is open for future changes and modifications. Using React and React Native, we added new features to the medical staff’s web application.


The build of the frontend code was uploaded to the S3 bucket and from there a Jenkins job would deploy the code to AWS CloudFront.

Firebase Push Notifications
Frontend
Stripe (Payment Gateway) 

We used stripe express to connect accounts to onboard various clinics on stripe. Each clinic will have its stripe account and it can then start accepting payments. When a patient pays for a particular product, using a payment Intent object, the payment is successful and a webhook written detects successful stripe payments.


Stripe provides a test mode, through which we can test payments without using real money.



Firebase Push Notifications
Frontend
Stripe (Payment Gateway) 

We used Firebase messaging to send out messages from one module to another. We constructed a firebase message object with the appropriate title, body, firebase message token, etc., and triggered this message from the backend. 


In the frontend, a listener was added to the service worker file while listening to incoming messages. Every device had a firebase message token which tells firebase to send a message to that device.



Firebase Push Notifications
Frontend
Twilio

We used Twilio for the video calls between a dentist and a patient. From the backend, we created a Twilio messaging token and shared it with the frontend through an API. From the frontend, the start videos call and end video call operations were handled.





Firebase Push Notifications
Frontend
Twilio
Key Features Of Patient Module

Teethlogo
Patients can book an appointment with a clinic via the mobile application

Teethlogo
Video conferencing option is available for patients to avail consultancy services from the doctors.

Teethlogo
The patient can place orders for dental products like HIK, Aligner, and Retainer via the application.

Teethlogo
The application sends reminders to patients for switching to the next aligner

Key Features Of Clinic Module

Teethlogo
Dentists can suggest a treatment plan for patients for their teeth alignment. 

Teethlogo
Accept online payments through stripe

Teethlogo
Mention the availability based on which the slots are created for appointments

Teethlogo
Track patients' treatment and reports.

Teethlogo
Connect with labs for the aligners' needs
Key Features Of Lab Module

Teethlogo
Easily receive prescriptions from dentists.

Teethlogo
With the Direct Messaging feature labs can save communication time in emails and telephone calls with clinics.

Teethlogo
Deliver aligners to patients.

Teethlogo
Connect with multiple dentists.

VALUE DELIVERED
Teethlogo
The client was able to onboard clinics and labs using respective web applications. 

Teethlogo
The patients have a connected and comfortable treatment experience through video calls.

Teethlogo
Dentists were able to access the global labs with a single click.

Teethlogo
It reduced communication time with labs and helped dentists in streamlining the administrative processes.
OrderDelivered
welcome
We would love to start a conversation!