image

Cloughoge Dental Practice 🦷

Client Goals

Check out their site here: Cloughoge Dental

Working closely with the two owners of Cloughoge Dental Practice, their main goal was to upgrade their existing website to have a modernised look and feel that reflected their business.

Design Process

  • To get started, I designed a set of wireframes on within Figma
  • Not only did this provide a flexible design space, additionally the ability to share a view only link to the design file allowed the client the ability to keep track of the changes in design.
  • Check out the Figma | Cloughoge Dental Wireframes, here’s a preview below.
  • The owners were also happy for me to design a new logo to go along with the site: Figma | CDP Logo.

Website Flow

Once the wireframes were discussed with the client and the greenlight was given, I got to work coding the site.

The website itself followed a familiar brochure layout, with all the required pages to provide new and existing patients with all the relevant information they needed before getting in contact with the practice.

  • Homepage: using parallax scrolling effects and timed animations.
  • Treatments: with all available dental services.
  • Our Team: component cards with animations to display team information.
  • FAQ: accordion components with common patient queries.
  • Contact Us: embedded Google Maps with a simple form to email patient questions.

Technologies

Fortunately for me, the practice owners had no preference on how their site was developed provided it met the requirements they had set with regards to responsiveness, ease of use and clarity. This allowed me the opportunity to pick a stack that suited my development goals and objectives.

User Interface

  • At the time, the company I worked for used Vue.js extensively - as a result; this provided a platform for me to further my experience with the framework. Additionally I simply enjoyed the ability to create reusable UI components and have their styling scoped to the component. After designing the wireframes I knew that the dentist profile cards, FAQ accordion, and the contact form were prime candidates for reuse.
  • Whilst HTML and CSS got me a long way, I wanted to learn how to use SaSS for simple animations - whilst config and syntax was a bit tricky, it was an interesting CSS framework to work with.
  • In the end, I found the AOS NPM library super easy to install and use for animations to make the site look smoother and more enjoyable to use

The Google Ecosystem

  • It’s simple, I really like the GCP ecosystem. It provided tools to enhance my productivity as a developer & it provided tools that benefited the customer. Win Win.
  • Firebase and the Firebase Console, amongst other features, provided a free unique URL that I was able to use to share progress during development with the customer until the domain switch for the CloughogeDental.com was complete.
  • Through use of Google Domains, integration with Google Workspace was out of the box. It provided the customer with email account inboxes, tons of aliases they could create, plus all of the tools like Google Drive, Google Docs and Google Meet.
  • Google Analytics was also a nice to have, easy to integrate add on that provides monthly report feedback to myself and the client to help improve SEO and monitor traffic.