Craft CMS and Vue.js Web Design

Craft CMS and Vue.js Web Design on Multiple devices
Craft CMS and Vue.js Web Design on Multiple Devices
You're a brilliant developer!
- Alex Robboy, Founder

How it started

When Petroglyph took on The Center for Growth's website, we had never seen an immediate scope of work so large or varied. While the website itself was in good shape, the business had completely outgrown its developed feature set. The website was home to a Philadelphia therapy practice that had created a very large and varied knowledge base which was several steps beyond disorganized as the body of work had grown so large. The front end needed a whole new code set as well as a color palette that adhered to a11y and a layout that put content first on all devices. Additionally, ironically, some content displays needed pruning. Therapist information needed development.

Then COVID-19 hit, and almost overnight, the nature of this therapy practice became entirely virtual. In the process, The Center for Growth also switched from primarily serving the Philly area to the entire state of Pennsylvania. Soon after that, leveraging the licensure of hired therapists in other states, allowed the practice to expand their area of coverage to even more states. The website suddenly needed to adjust its focus from its locations to the states of licensure it covered. Moreover, the website needed to tell the average visitor how to book an appointment, leading them through therapists who were licensed in their state.

With increasing demand for virtual therapy almost everywhere, we needed to move fast. Luckily, this was possible and exciting because this website was already in Craft CMS and it could handle the needed changes.

What we did

Our first step was to take an honest look at the outsized content body, then determine and implement structural changes that eliminated content duplication issues while completely optimizing the content structure for search engines.

Simplified site navigation

The Center for Growth's website provides extensive content on sensitive psychological and medical topics. Because of this, we relied on a lot of teamwork with the client to ensure that the new content structure correctly categorized content topics from an industry standpoint while also making it easier for patients to find the right content based on how they might search a topic. After spending a crucial amount of time with the code and the content, we designed a comprehensive, simplified navigation that is organized, useful, and most importantly, easy to use on all platforms.

Refreshed visual branding

At the same time, we developed a new look and feel from the Petroglyph UI - a starter template authored here using Vue.js and TailwindCSS. With all of the high-value advice content on the site, including many landing pages critical to search engines, we were aware that typography could make or break our entire effort. Choices of fonts, colors, spacing and user interface were made in isolation from the live site so that matters of visual balance, legibility and accessibility could shine through independently. The result is a look and feel that adheres to The Center for Growth's gentle-yet-direct brand, while leaving behind the conventions of the older site experience.

Uniform page templates

With a tailwind front-end, we fluidly developed templates for every type of content we had, using elements from our UI kit. Home page, text pages, self-help tips, therapists, and locations all got individual consideration. Our goals were very simple: decrease the bounce rate from landings on self-help topics and encourage visitors to book a therapist. We added an innumerable number of extra features as requested, went live, and continued to develop even more features.

New Therapist Finder feature

Lastly, we created the Therapist Finder in Vue.js. This made use of a headless Craft CMS element API endpoint fed straight to Vue which ordered and sorted each therapist by a number of requested facets. The newest version of this Therapist Finder prompts for the user to search for therapists by state of residence - a critical part of finding a licensed therapist in the virtual space.

Organization and intentional project management allowed us to redesign and redevelop this large website along an optimized timeline that provided impactful improvements over the entire timeline of the project. The client benefitted from working with us throughout the whole process, not merely at go-live.

The result

I am being flooded with clients!
- Alex Robboy, Founder

Shortly after we released the new look and feel, The Center For Growth began to see its return on investment. New therapists were hired to keep up. Hiccups were noticed and fixed due to the first new clients needing to know things that we needed to tell them, and the ever-shifting challenges presented by a world still submerged in COVID-19.

We are incredibly proud of our work on this website as it has allowed this incredibly important service to thrive during COVID-19. It also looped in nearly every one of our competencies from design and development to organization and strategy, in critical ways. We were able to leverage new technologies with these core competencies to produce a top-of-the-web site and ultimately allow more people to get the help they need with therapy.