Spectrum Medical Care Center Redesign

WordPressPHPWebpackJavaScriptSASSPostCSSBabelXD

Redesign of the Spectrum Medical website to create a visually stunning and informative platform for the LGBTQIA+ community.

Case Study: Spectrum Medical Care Center Redesign

Background

The Spectrum Medical Care Center, a medical practice specializing in LGBTQIA+ healthcare, envisioned a website overhaul to align with their commitment to inclusivity and community outreach. The primary goal was to create a visually stunning and informative platform that not only showcased their medical services but also served as a valuable healthcare resource for the LGBTQIA+ community.

Tech Stack/Process

Recognizing the importance of streamlined content management, Elementor and WordPress were chosen to empower Spectrum's team with the ability to easily update and maintain the website. This approach ensured that ongoing updates, event additions, and content modifications could be accomplished with ease, reducing reliance on technical expertise for day-to-day management. To do this, I went with the Elementor's theme own theme, the Hello Theme due to it's simplicity and tight integration with Elementor. I then used a child with a custom Webpack workflow for easy asset management.

Webpack Workflow

This workflow is an ever evolving process that combines SASS and PostCSS to create CSS from dynamic code. It also implements Babel for modern JavaScript as well as image optimization for faster loading. To make things easier while developing, there is a development mode which includes source maps for easier tracing of issues, and a production mode which compresses the code as much as possible for better page speed.

Services and Team Member Custom Post Types

This project required a couple custom post types for easier content management. The first was a services post type, which created a services section of the site and allowed the Spectrum Medical team to highlight their specialties for the LGBTQIA+ community. The second post type was for team members, allowing customers to get to know their provider prior to their first appointment.

Converting the site to Español

Due to the prevalence of the Spanish speaking community in Arizona, the Spectrum team wanted to make sure that their site was accessible to this sector of the community as well, and so the Polylang plugin installed. This required extensive setup as all of the different Elementor parts had to be duplicated into their Spanish versions. There were also design tweaks that had to be made as well due to the often longer counterparts of certain English words, making the responsiveness of the site extra tricky.

Events Plugin Integration for Community Outreach

To highlight Spectrum's commitment to community engagement, I integrated a popular WordPress events plugin, The Events Calendar. This feature allowed the medical practice to showcase their community outreach initiative as well as their free HIV/STI testing, sexual health education and preventative services. I created a custom PHP template within their theme for the listings which allow for consistent styling for their events.

Beautiful Blog on LGBTQIA+ Healthcare

A key component of the redesigned website was a visually appealing blog dedicated to LGBTQIA+ healthcare. This resourceful section provided valuable information, resources, and insights on healthcare topics relevant to the community. The visually engaging presentation of services and providers further enhanced the website's appeal, creating a comprehensive and inviting online presence.

Outcome

The Spectrum Medical Care Center Website Redesign Project resulted in a visually stunning and informative platform tailored to the unique needs of both the English-speaking and Spanish-speaking LGBTQIA+ community. The integration of a custom events plugin showcased Spectrum's commitment to community outreach, while the use of Elementor and WordPress facilitated seamless content updates. The beautifully crafted blog served as a valuable resource, offering information on LGBTQIA+ healthcare and presenting services and providers in an engaging manner. This project stands as a testament to my ability to blend design aesthetics with functional features, creating a user-friendly and inclusive online space for a medical practice dedicated to serving a diverse community.

More Projects

SkiPro

LiquidShopifyJavaScriptCSS3

Complete migration of SkiPro business into the Shopify ecosystem, unifying their online and in-store operations into one simple solution.

MidFirst Bank

.NetC#KenticoJavaScript

Complete overhaul of MidFirst Bank's website to modernize their online platform while ensuring seamless integration with Kentico CMS.

WP ReadMe Generator

TypeScriptGitHubNode.jsnpm

An NPM package which provides an automated solution for WordPress plugin developers to effortlessly synchronize readme markdown files and readme text files.

Ready to Collaborate on Your Next Big Idea?

Let's Connect and Make Things Happen!

Schedule an appointment with me via CalendlyView my GitHub profileView my LinkedIn profileCall me at 480-382-4295Email me at samrankin.dev@gmail.com