MedPB Template
Overview
The top goal for MedPB’s website templates is to create sites that will result in driving more patients through our client’s doors.
Tools
Photoshop, Sketch, WordPress, HTML, CSS, Javascript, PHP, Understrap, Gutenberg

UX Challenges
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
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.
Blue colorway changed via CSS