The Oral Health and Wellness Clinic is a student-centred facility supervised by experienced professionals. It offers outstanding dental, massage, and occupational/physiotherapy services while fostering student growth through practical experience, innovation, and community involvement in wellness. Fanshawe College's Oral Health and Wellness Clinic provides these services at discounted rates. These clinics function as real-world learning settings where students can apply their skills under expert guidance, enhancing community well-being and educational experiences.
Objective
The objective was to create a responsive web design for the Oral Health and Wellness Clinic, using desktop, tablet, and mobile layouts. This project includes an online booking system for one of the three clinics and a prototype of the final mobile design in Figma. I've decided to concentrate on Tend Oral Health Clinic and its booking function and system. 
The goal was for an existing user, Nicola Smith, to schedule a dental appointment. I was tasked with maintaining design consistency to align with the clinic's updated wayfinding and branding. Can you book a dental appointment for Nicola? Give it a try below!
Wireframes
Below are the wireframes created for the OHWC web. For this process, I focused on Mend Massage Clinic for booking an appointment.
Landing Page
Landing Page
Mend Massage Page
Mend Massage Page
Massage Therapy Booking Page
Massage Therapy Booking Page
Appointment Successful Page
Appointment Successful Page
Booking Confirmation Page
Booking Confirmation Page
High Fidelity
Below are the high-fidelity layouts for desktop, tablet, and phone created for the OHWC website. In this process, I focused on the Tend Oral Health Clinic's appointment booking system.
Landing Page
Landing Page
Tend Oral Health Page
Tend Oral Health Page
Log In/Sign Up Page
Log In/Sign Up Page
Clinic Selection Page
Clinic Selection Page
Appointment Details Page
Appointment Details Page
Book Appointment Page
Book Appointment Page
Confirm Booking Page
Confirm Booking Page
Completed Booking Page
Completed Booking Page
Tablet High Fidelity Screens
Landing Page Tablet
Landing Page Tablet
Tend Oral Health Page Tablet
Tend Oral Health Page Tablet
Log In/ Sign Up Overlay Tablet
Log In/ Sign Up Overlay Tablet
Clinic Selection Page Tablet
Clinic Selection Page Tablet
Appointment Details Page Tablet
Appointment Details Page Tablet
Book Appointment Page Tablet
Book Appointment Page Tablet
Confirm Booking Page Tablet
Confirm Booking Page Tablet
Completed Booking Page Tablet
Completed Booking Page Tablet
Mockup of Desktop, Laptop, Tablet, and Phone layouts of the OHWC website
Tools Used
Figma
Adobe Illustrator
Back to Top