MedPB Template

UX Challenges

We’re looking to create top-converting websites. Ones that optimize the number of new patients that call the practice. We use a patient-focused approach to the design and development of a website template for our clients in the hearing, ENT and orthodontic verticals. The goal is to connect with users emotionally and then prompt them to call the client medical practice.

Considering the increased traffic coming from mobile devices we would like to take a mobile-first approach with a focus on improving the experience for mobile users. We use GTmetrix to measure site speed and aim for a speed of 80% or higher and a Google Page Insights score of 80% or higher. Our goal is for an 8% conversion rate or better.

In addition we also need to keep both accessibility and efficiency in mind. We aim to meet AA WCAG accessibility standards for our client sites. For efficiency we need to keep in mind color changes, focusing on a primary and a secondary color that can be changed easily via CSS for each client.

UX Solutions

In order to connect with users emotionally it’s important to empathize with the user. This allowed me to solve the user’s problems while also accomplishing their needs. To do so I took several different approaches for the best possible outcome. This included creating personas for our users, analyzing our Google analytics from existing sites, conducting A/B tests, and asking for feedback while being mindful of my own opinions and biases.

To ensure a successful mobile-first design I created a custom coded WordPress theme using Bootstrap. With several breaking points for mobile, tablet, and desktop, I was able to create several page layouts to create a good user experience on each device, ensuring flawless user experience.

For accessibility standards we put together a checklist with links to tools that allow us to check against WCAG standards. Colors can be a little more tricky because this means we cannot have any colors associated with images. My solution was to use SVG clipping masks that allow us to use color fills in CSS that can easily be changed to match the client colors. This way we are not losing the ability to still create interesting images, icons, layouts, and on-trend sites.