Production website: https://mandmhealthclinic.com/
About This Project
Project Overview:
As a web designer, I had the pleasure of working on the M & M Health Clinic project, tasked with creating a responsive website to enhance user experience and reflect the clinic's modern, welcoming environment.
Process:
1. Research and Planning:
- Conducted user behavior and preference research.
- Created wireframes and prototypes, tested with real users.
Design and Development:
- Refined design based on feedback.
- Implemented a clean, intuitive layout with easy access to information.
- Carefully selected color schemes and imagery to convey a friendly atmosphere.
Outcome:
The redesigned website received positive feedback from staff and patients, resulting in an increase in online appointment bookings. This project demonstrated my ability to deliver high-quality web design solutions that meet client needs and enhance user experience.
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.
- 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.
- 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.
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
About Us
Clinical Counselor
Acupuncture
Osteopathy
Holistic Nutrition
Kinesiology
Laser Hair Removal
Massage Theraphy
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.
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.
- 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.
- 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.
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
Homepage Services Section
Homepage About Section
Homepage Products Section
About Us Page
Services Landing Page
Services Detail Page
Products Page
Contact Us Page
