Project Overview
As the Lead UX/UI Designer for M&M Health Clinic’s website redesign, I led the project from ideation to implementation, ensuring the platform was not only visually appealing but also highly functional and user-centric. My focus was on improving the patient experience by making the site more accessible and intuitive. I collaborated closely with the clinic’s stakeholders, conducted user research, and utilized industry-standard tools like Figma, Photoshop, and Adobe Illustrator to bring the design to life. The project required balancing a clean aesthetic with practical features that would streamline appointment scheduling and enhance patient engagement.
My Role:
Lead UX/UI Designer, responsible for the full design process from research to final implementation and debugging plus minor CSS updates on the development stage.
Tools:
Figma, Adobe Photoshop, Adobe Illustrator, Zoom (for user Interviews), VSCode.
Problem
M&M Health Clinic needed a modern, user-friendly platform to better serve their patients, streamline appointment booking, and provide essential health resources online. The previous website lacked accessibility, ease of navigation, and a cohesive design that aligned with the brand’s goals of providing professional and caring healthcare services.
Solution
The solution was a responsive and user-centered website that prioritized intuitive navigation, easy appointment scheduling, and access to medical resources. The design was guided by a clean and minimal interface, using a calm and reassuring color palette to evoke trust and professionalism. I implemented a streamlined booking process, designed clear calls to action, and improved the mobile experience to ensure patients can interact with the site on any device.
Design
The design focused on accessibility and simplicity, ensuring the interface was approachable for all user demographics, including elderly patients. I used calming tones, clear typography, and iconography to enhance user engagement. The design system included components like appointment cards, doctor profiles, and patient testimonials. I conducted multiple rounds of user testing to refine the experience and ensure it aligned with patient needs. After launching on the staging platform, I did a thorough quality assurance test on all sizes before deploying to the production(live) site.
Production Website

Production Website Look and Feel

Iconography and Line art
Line arts and iconography are crucial in web design for visually communicating information and creating a cohesive design language. For this website, I crafted all line arts and icons using Adobe Illustrator, ensuring a unique and customized look. 
Tools and Methods:
     - Primary Tools: Figma and Illustrator.
Key Features:
     - Line Arts: Added visual interest and broke up content.
     - Iconography: Represented various services and features with simplicity and clarity.
     - Design Consistency: Created a consistent design language throughout the site.
     - Personal Touch: Hand-drawn elements emphasized a human-centered approach.
Color Selection:
Each color was thoughtfully chosen to engage users and evoke appropriate emotional responses, considering psychology, branding, and accessibility. This thoughtful palette created a visual hierarchy, highlighted important information, and enhanced the overall user experience.
404 Page
404 Page
About Us
About Us
Clinical Counselor
Clinical Counselor
Acupuncture
Acupuncture
Osteopathy
Osteopathy
Holistic Nutrition
Holistic Nutrition
Kinesiology
Kinesiology
Laser Hair Removal
Laser Hair Removal
Massage Theraphy
Massage Theraphy
Naturupathic
Naturupathic
Mockups
Process Overview:
Creating mockups was a crucial step in the UX/UI design process for the M & M Health Clinic project. These mockups allowed us to visually communicate design ideas and gather feedback from stakeholders before development.
Tools and Methods:
     - Primary Tools: Figma and Photoshop & Illustrator.
     - Types of Mockups: Wireframes, prototypes, and high-fidelity designs.
Benefits:
     - Design Testing: Tested different design elements to ensure user needs were met.
     - Refinement: Refined and adjusted designs based on feedback to improve user experience.
Outcome:
Mockups played a vital role in ensuring the final UX/UI design met project goals and provided a seamless user experience for the clinic's visitors.
Landing Page Mockup
Landing Page Mockup
Homepage Services Section
Homepage Services Section
Homepage About Section
Homepage About Section
Homepage Products Section
Homepage Products Section
About Us Page
About Us Page
Services Landing Page
Services Landing Page
Services Detail Page
Services Detail Page
Products Page
Products Page
Contact Us Page
Contact Us Page
404 | Error Page
404 | Error Page
Back to Top