The goal of this project was to design and develop an existing website that was seemingly outdated. Within my group, we chose to challenge ourselves by working with Village Dental Centre's website.Our instructions were to pick a website, analyze it, create low-fidelity and high-fidelity mockups of our vision, and finally, bring our vision to life by using HTML and CSS.
Originally, the website's was very unappealing and unattractive. It also lacked consistency with its many its fonts, colours, and sizes. The homepage display was full of outdated announcements and useless promotions. None of the colours conveyed the appropriate feeling of a dentistry page. The brown, the yellow and the orange were used to represent cleanliness, friendliness and trust. Lastly, the lack of contrast affected the overall readability and accessibility. Redundant links brought up unnecessary pages, making it harder to access important information at a glance.Overall, the website was old-fashioned, out of date, and unappealing to the eyes.
The website itself is targeted primarily to individuals aged 18 and up. For The Village Dental Centre, their clients are located in Kitchener, Ontario which means they serve people living in both suburban and urban areas. On average, visitors often have middle or higher income while those without dental insurance coverage were more likely to avoid going to the dentist despite experiencing some kind of pain. Based on Google Analytics for dental websites, they receive around 300 to 500+ visitors per month.
The design below was prototyped using Adobe XD. Using this as reference, my team and I developed it using HTML and CSS.
One of the main traits this project had which made it so successful was organization. Throughout the project, from design ideation to product fruition, the team help multiple meetings a week in-person and virtually. This constant flow of communication allowed for each team member to be more aware of where the project was on the timeline, and what outcomes were expected of them throughout the project. One lesson I learned was to work more collaboratively when working on HTML and CSS coding, as there were times when individuals working on their own HTML and CSS page did not organize the files correctly, therefore causing headaches when it came to collaborating all the pages into one finalized website.
Ada Celik – Team Lead, researcher, CSS developer (3 pages)
Joey Dietrich – UX Lead, CSS developer (3 pages), website tester
Grace Yip – Researcher, HTML developer (1 page), manager of the written report
Valérie Nault – Researcher, HTML developer (2 pages)
Mohammed Mostafa Irfan – Wireframe creator, HTML developer (5 pages),