A responsive WordPress website designed to support the launch of a women’s wellness clinic in Surat, designed to build trust, streamline bookings, and amplify health education.
Project Context:
​​
-
Client: VAMA Wellness Centre for Women, Surat, India
-
Timeline: Jan 2025 - Aug 2025 (8 months)
-
My role: UX/UI Design, WordPress Development, Content Strategy, Information Architecture, Content Writing Support
-
Tools: Figma, WordPress (Salient Theme), WPBakery, CSS/HTML, Illustrator, Photoshop
Overview:
VAMA Wellness Centre is the first women-run healthcare facility in Surat, India, offering gynecology, psychiatry, physiotherapy, and nutrition services. They also organize health awareness events, marathons, and award ceremonies to promote women’s health.
The project goal was to build a modern, responsive website that reflected their legacy, consolidated resources, and enabled patients to book online consultations easily.
Problem Statement:
-
Since 2017, VAMA had no active website (after losing their old domain).
-
Their only presence was through Facebook and Instagram.
-
The organization had a wealth of resources (newspaper articles, videos, blogs), but no structured digital home.​
Client Constraints:
-
The client initially requested a paper-textured background and Sanskrit-style typeface.
-
While visually aligned with tradition, this combination reduced legibility on digital screens.
-
We needed to balance cultural identity with usability and accessibility.
-
Solution: A hybrid system - subtle paper textures + sans-serif body font paired with a display serif for headings.
Research & Content Strategy:
-
Audited the old (2017) website to identify outdated features.
-
Proposed a new sitemap with online booking, careers, and a resources hub (blogs, quick bites, brochures, videos).
-
Organized and segregated existing content; identified missing gaps; coordinated with doctors and staff to generate new material.
-
This structured approach strengthened SEO and created trust-building resources for patients.
Proposed sitemap highlighting new features and resources.
Design Phase:
-
Developed two distinct Figma concepts to help the client visualize layout and design language.
-
Chosen design evolved into full-page templates for all sections.
-
Focused heavily on menu design and navigation flow to support diverse user journeys (first-time patients, returning patients, event attendees).
Option 1
Option 2
Two early design directions shared with the client.
Development & Problem-Solving:
This was my first project using WordPress with the Salient theme and WPBakery, which required rapid learning and hands-on problem-solving. I redesigned the navigation by simplifying the off-canvas menu, removing unnecessary hover states, and clarifying labels to improve wayfinding. For appointment booking, I restructured the form experience with wrapped checkbox groups and consistent helper text, making it easier to scan and complete.
I also created a set of responsive doctor profile cards with circular imagery, accessible bios, and type styles that adapt across screen sizes. Event and portfolio tiles were unified through branded overlays for contrast and cohesion. To ensure consistency, I overrode WPBakery’s default grid with Flexbox, stabilized carousel layouts by locking viewport heights, and built a floating action dock that uses CSS variables to adapt to safe-area insets. Throughout, I scoped typography and link styles at the row and block level to avoid conflicts across pages.
​
See the full CSS sample on GitHub → View Code
CSS variables + safe-area awareness for a robust floating action dock.
Before
After
Flexbox override to tame WPBakery’s default stacking and enforce a consistent grid.
Before
After
Form UX: stacked, well-spaced checkbox groups for faster scanning and taps.
Before
After
The Solution:
Key Features Delivered:
-
Online booking for consultations (gynecology, psychiatry, physiotherapy, diet) with Razorpay for easy online purchase.
-
Dedicated resources hub with quick bites, blogs, brochures, and videos.
-
Doctor/team profiles with bios, credentials, and specializations.
-
Event gallery showcasing marathons, award ceremonies, and health workshops.
-
Fully responsive website design.
Live Website: vamawomenwellness.in
Homepage highlighting VAMA’s mission and core services.
Impact:
When the website finally went live, the client’s reaction was one of relief and pride. After years of relying only on social media, they now had a central home for all their work and resources. Dr. Rupal Shah, the founder, described the site as “bringing together years of effort into one place,” and she was excited to finally share it with her patients through an upcoming social media launch.
Beyond client satisfaction, the project created a measurable shift in how VAMA could operate. Until then, online services at their parent hospital (Rupal Hospital) were limited to IVF counseling. With the new website, VAMA could expand into psychiatry, physiotherapy, diet counseling, and gynecology consultations. This not only diversified their services but also gave patients more convenient ways to seek care. The resources hub with blogs, quick bites, brochures, and videos, gave women access to reliable information, helping build trust and authority in a sensitive area of healthcare.
For me, the impact was equally personal. One of the biggest hurdles was keeping busy doctors engaged in a long design process. Often, medical emergencies and daily priorities meant feedback was delayed. I learned that I couldn’t just wait… I had to show tangible benefits and numbers (like SEO improvements or patient engagement opportunities) to pull the client back into the project. It was a crash course in stakeholder management and persuasion, teaching me that good design is as much about communication as it is about visuals or code.
Reflection:
​
What I’d Do Differently
​
-
Collaborate with the original designer for fresh artwork.
-
Allocate more time for usability testing with patients.
​
Personal wins:
-
Showcased ability to design for diverse users (teenagers to elderly women).
-
Balanced sensitive UX considerations: privacy, trust, accessibility in healthcare.
-
Strengthened skills in content strategy and information architecture.
-
Reinforced adaptability: navigating client constraints, technical limitations, and multi-stakeholder collaboration.