Upgrading User-experience and Website Performance Using Next.js for a Diagnostic Leader

Overview

Type

Web App

Industry

Healthcare App Development Services

TechStack

React Native

React Native

Tailwind CSS

Tailwind CSS

Next.js

Next.js

Key Results

100

100 performance score

for the overall website

100

100 best-practice score

for Search Engine Optimization 

0.7

0.7 seconds

loading time of website

ABOUT THE CLIENT

Leader in Diagnostic and Preventive Care Laboratories

India

The client is a multinational chain of diagnostic and preventive care laboratories. Headquartered in Mumbai, they have been innovation leaders in the industry for more than a decade. They currently boast 1,200+ outlets with a workforce strength north of 2,000 employees.

PRODUCT VISION

Upgrade Existing Website for Enhanced User-experience

Our client wanted to improve the performance of their existing website. They wanted to focus on improvements centered around user experience, reduced initial load time, decreased network calls, and search engine optimization (SEO).

BUSINESS REQUIREMENTS

Create a Mobile-responsive Website and Data Tracking

To address the full demographic range of their target audience, the client wanted a robust mobile-responsive website. They also required ethical data tracking using Google Analytics and CleverTap.


Key Targets to Achieve

  • Revamp the existing website's user experience
  • Detailed data tracking using Google Analytics and CleverTap
  • Improve Search Engine Optimization (SEO)
  • Create a mobile-responsive website
  • Reduce initial load time
  • Minimize network calls
OUR APPROACH

Fixed Scope Model. Milestone-based Execution.

The project started with evaluating the client's current website and understanding their expectations. The analysis gave us insights into the fit of the tech stacks drafted for the project. A course was then charted for hitting the milestones set for each stage.

{"time":1693374019136,"blocks":[{"id":"rKT27Bn0cB","type":"header","data":{"text":"Execution Style","level":3}},{"id":"ttSdE1nON1","type":"paragraph","data":{"text":"Milestone-based execution."}}],"version":"2.28.0"}

Execution Style

Milestone-based execution.

{"time":1693374019136,"blocks":[{"id":"-YYjrdoJC9","type":"header","data":{"text":"Methodology Used","level":3}},{"id":"hLfEr67rRN","type":"paragraph","data":{"text":"Fixed Scope model with aggressive timelines. "}}],"version":"2.28.0"}

Methodology Used

Fixed Scope model with aggressive timelines. 

{"time":1691057021891,"blocks":[{"id":"f_bDozxojb","type":"header","data":{"text":"Execution Journey","level":3}}],"version":"2.27.2"}

Execution Journey

TECHNICAL ARCHITECTURE
PROJECT EXECUTION

Milestone-focused Development. Strict Quality Checks

We used a Fixed Scope model with aggressive timelines. The development depended on the client's API/backend for some areas.

Development

Milestone 1

  • We set up the project along with the theme.
  • The Home landing page was created with a static Header and Footer.
  • The login flow was finalized.
  • The search page was completed with static data, filters, and sorting.
  • Integration of CMS data was done (Top Booked profiles/tests, browse by category/city).

Milestone 2

  • The following pages were delivered
  • The search autocomplete feature was added in Header
  • The Request callback flow was completed
  • The pincode selection feature was added in the Header
  • The 404 Page was redesigned
  • SSG was implemented for all the details pages
  • BreadCrumbs Navigation was added
  • Similar packages on the details page were made

Milestone 3

  • The Login Flow API and Master Data API was integrated
  • Search and filter functionality to the Labs section (on the page for labs near me) was added
  • A page for showcasing Offers was created
  • A page for Diseases, Tests, and Packages was developed
  • A staging for deployment was implemented

Milestone 4

  • A data dump occurred from newsletter subscriptions to a Google Spreadsheet
  • The signup flow was redirected to a modal requesting a callback
  • A callback modal was added to all book buttons on the card
  • Google Analytics and CleverTap were integrated into the website

Quality Assurance Process (QA)

The progress is ongoing, and our team of experts utilizes a comprehensive testing process, incorporating multiple tests to ensure the website's quality is of the highest standard.

  • Test Plan
  • UI/UX Testing
  • Sanity Testing
  • Functional Testing
  • Data Validation
  • Regression Testing
  • Cross Browser/Cross Platform Testing
CHALLENGES

Different Screens. Data Changes. 

Solution
RESULTS

High-performant and Interactive Website

As of the day, milestones are being hit without delays. Currently, the client's website has undergone thorough testing and verification by our QA team. This ensures the website meets all client requirements and is user-friendly and fully functional.

We are expecting a 2X improvement in performance in terms of load time and user engagement on this new website. Our expert QA team has tested it across platforms, and it performs well.

100

100 performance score

for the overall website

100

100 best-practice score

for Search Engine Optimization 

0.7

0.7 seconds

loading time of website

TAGS
Healthcare App Development Services
React Native
Tailwind CSS
Next.js
Mobile
Design
Web

Other Case Studies

Creating Hassle-free App Features for Medically Complex Children and Their Parents

Leading Healthcare Technologies and Services Company brings healthcare services at home for caretakers of medically complex children with an interactive application

->

Mental Health Platform for IvySky

Revolutionising mental health solutions with IvySky, an organisation by teens for teens

->

Let's Build
Your Product Together!

Get a free discovery session and consulting to start your project today.

LET'S TALK