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 content structure for search engines. This work was highly abstract and involved teamwork with the client to formulate, thanks to its sensitivity with medical topics. 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 and in particular with so many landing pages from search engines being here, 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 was a look and feel that adhered to the Center For Growth's gentle-yet-direct brand while also leaving behind the conventions of the older look and feel.

After spending a crucial amount of time with the code and the content, we designed a comprehensive, simplified navigation that was not only easy to use on all platforms but organized and useful.

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.

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.

As long as the process was, 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 throught 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.