How I redesigned the BharatMD website; A website design case study
Surgeries can be daunting, especially when access to quality care requires traveling hundreds of kilometers. This is a harsh reality for many in India’s Tier 2 and Tier 3 cities. That’s where BharatMD steps in.
In this article, I’ll share how I redesigned their website to ensure their mission of delivering top-tier surgical care to these underserved regions is clearly and effectively communicated.
Note: I am not associated with BharatMD and this project’s scope may be limited due to the lack of complete user data. It was part of Cohort 8 of 10designers learning exercise.
If you’re just here for a quick glance, feel free to check out the before and after below.
And the prototype!
It might take a few seconds to load…
🔮 The brief
The assignment kicked off with a selection of a problem brief. We were given a choice of 33 different briefs, each to design a landing page for different companies. For a long time, I wanted to work on something related to healthcare and hence chose BharatMD. Here’s the problem brief:
“Design a one-pager website for an app that helps Indians in tier 2 and tier 3 cities get high-quality surgeries.”
Apart from the few problems already mentioned in the brief, here are some problems that I pointed out through a quick audit.
💉About BharatMD
BharatMD is a healthcare-surgery company founded in 2022, based in Bengaluru, India. The company focuses on improving access to quality surgeries for people in Tier 2 and Tier 3 towns by partnering with local hospitals and bringing in top surgeons from Tier 1 cities. BharatMD aims to address the significant healthcare challenges faced in these regions, ensuring better patient outcomes and accessibility.
Some key highlights:
- Founded: 2022
- Location: Bengaluru, India
- Focus Areas: Addressing the lack of qualified surgeons, proper diagnosis, and counseling in these areas to prevent lifelong complications.
🕵️♂️Digging deeper
Before moving onto visuals, it was important to know who I am desinging for, and what I am supposed to design.
📌 What will the landing page be used for?
Based on what BharatMD does, and the assignment, the landing page will be used by patients or other related parties to download the app to book consultation with Bharat MD experts. Once the user sends their details, the team contacts the user.
However, the website will be a one-pager; the primary actions will be downloading the app and/or booking a consultation. The company does not have an actual app, so I had to assume that they did.
📌 I divided my research into two parts; getting to know my users through secondary research and analyzing competitors/comparators.
Getting to know the users better would help me create personas and understand what their triggers are, when they are checking out the landing page.
Some insights that I gathered:
- The blend of Hindi and English, known as “Hinglish,” is increasingly popular among millennials, Gen Z, and Gen Y in India for everyday conversations and online interactions. (Source)
- Platforms focused on regional languages are thriving in Tier-2 and beyond, catering to the digital content needs of these areas (Redseer Strategy Consultants).
- According to Bharat Health Index 2023, 45% of people travel over 10 km for a doctor, while only 10% have local healthcare within 10 km. Specialized doctors are scarce, with 92% lacking access to needed specialists, severely impacting medical care. (Source)
- Based on the testimonials on the existing landing page, the patients are women from Gujarat, between the ages of 25–35. They have consulted 300+ patients and operate in 20 towns.
These insights highlight the need for a culturally relevant and accessible design. Using Hinglish or regional languages can better connect with the target users, while addressing healthcare challenges and patient demographics ensures the website effectively meets the needs of those in Tier-2 and Tier-3 cities.
Spoiler alert: I didn’t use any regional languages since there are way too many in India!
📌 To further understand how healthcare app landing pages work, I benchmarked competitors and comparators.
For the purpose of ideating and revamping the existing structure of the website, I created two personas:
- The Patient
- Patient’s friends or relatives.
These personas would be the primary users of the landing page. With all the research I had conducted, I decided to create a GPT agent out of it. This GPT agent would help me create personas based on their goals, challenges, motivations, behaviour and what BharatMD can offer.
What you see below is a refined version of the personas I created, as well as their story presented in terms of desire and fear triggers.
✏️Changing the look and feel
After creating the personas and their stories desires and fears, it was time to create a base for the website visuals.
📌 The idea was to create a landing page that is easy to understand, welcoming and modern. So I changed how information flows in the website.
The revised information architecture emphasizes addressing users’ desires and fears. This flow went through multiple iterations based on mentor and peer discussions.
The new flow makes use of the AIDA framework (Attention-Interest-Desire-Action), which not only tackles users’ concerns but also maximizes the click-through rate (CTR) for the primary call to action (CTA).
📌 The brand also feels a bit generic, so it was time for a refresh!
To change that, I began by creating a moodboard that set the tone for the redesign. The new vibe was modern, minimal, and clean, with a strong emphasis on reflecting the essence of healthcare. The moodboarding exercise also includes other websites, which helped me design each section of the website.
#1 Change in brand colors
- Primary Color: The new primary color, Indigo, is deeper and richer, providing a more modern and bold look compared to the softer, pastel tones of the old palette. This enhances the brand’s presence and makes it more memorable.
- Pastel Colors for website elements: The new pastel colors evoke a sense of calmness and trust, aligning perfectly with the healthcare industry. They make the brand appear more approachable and caring.
- Clarity and Readability: The updated neutral colors, with strong contrasts like deep indigo and dark neutrals, improve readability and visual clarity on the website and app. The older, lighter palette could sometimes struggle with readability, especially in text-heavy areas.
#2 Selection of Type
For my headings, I have used Lexend, a sans-serif typeface specifically designed to enhance reading comprehension and reduce visual stress, making it perfect for headings. It ensures that critical information stands out clearly, which is vital in healthcare communication.
For sub-headings and body text, I have used Manrope, a versatile, sans-serif typeface known for its readability on screens. Its simple and elegant design makes lengthy text easy to digest, which is crucial for conveying detailed healthcare information. Manrope is also used for some smaller headings.
#3 Redesigning the Logo
The new logomark makes use of the old structure. However, the orange and cyan colors used in the old logo feel bright but lack the professional, trustworthy appeal often associated with healthcare brands.
The updated logo uses the deep indigo color that exudes trust, reliability, and professionalism, aligning better with the healthcare industry.
The wordmark uses the Outfit typeface, a modern sans-serif typeface that exudes simplicity and elegance. This ensures that the BharatMD name is easily recognizable and legible at any size.
🎨Designing the final website
I created digital wireframes before moving to visuals. These not only included creating sections based on the information architecture I had created, but also copywriting.
And after multiple iterations, discussions and feedbacks, here are the final designs!
Once the user clicks on the secondary CTA, the consultation form opens up as an overlay:
Let’s do a section wise breakdown:
Each section of the landing page went through multiple iterations. Read along to understand what made the final cut.
#1 Navigation Bar and Hero Section
This section was designed to create an impact early on in the flow, by immediately showcasing the impact created, building trust through relatable language, and encouraging user engagement with clear, targeted CTAs.
#2 The How It Works section
This section showcases the BharatMD app with a clear, central phone mockup, highlighting key features through labeled icons and the app store buttons prominently placed for easy access.
#3 The Experts section
#4 The Specialties section
#5 The Why BharatMD section
#6 The Download App section
This section creates an trigger urging the patients to download the app, after they figure out what BharatMD offers.
#7 The Testimonials Section
The video testimonial layout uniquely spotlights the patient, creating a personalized and engaging experience. Additionally, the use of a Hinglish excerpt from the video provides users with a brief preview of the testimonial, setting the tone and giving them a sense of what to expect from the full video.
#8 FAQs and Footer
This section makes use of a simple and a minimalist layout. The straightforward design reduces visual clutter, ensuring that users can quickly find answers to their questions without any distractions.
✨That’s all! Thanks for making it to the end :)
I had so much to learn from this assignment, especially the value of iterative design and the power of clean, minimal layouts. It made me realize how crucial it is to refine and revisit ideas, ensuring every element serves a clear purpose. By carefully selecting the right references and stripping away the unnecessary, I was able to create a design that was both functional and aesthetically pleasing.
You can message me on linkedin or email me (ashishdvga@gmail.com) if you are building something exciting!
And a small task for you: You can give up to 50 claps for an article on Medium! Hold down the clap icon for a few seconds and see the magic unfold :)
Adios!
