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
Tailwind CSS
Next.js
Key Results
100 performance score
for the overall website
100 best-practice score
for Search Engine Optimization
0.7 seconds
loading time of website
Product Design
ABOUT THE CLIENT
Leader in Diagnostic and Preventive Care Laboratories
IndiaThe 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.
Execution Style
Milestone-based execution.
Methodology Used
Fixed Scope model with aggressive timelines.
Execution Journey
TECHNICAL ARCHITECTURE
Performant Tech Stacks. Reliable Tracking
We focussed on combining tech stacks that are stable while working well together. All the tools were decided based on a thorough analysis of the client's responsiveness and data requirement targets.
- Technologies Used
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.
Challenge 1: Different designs for the web and mobile screens
To address this, the dev team worked very closely with the design team; they suggested the standard improvements in the Visual Designs as well. This helped sort out the differences and create a seamless user flow.
Challenge 2: Constant changes in website data
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 performance score
for the overall website
100 best-practice score
for Search Engine Optimization
0.7 seconds
loading time of website
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