Case Study: Re-Designing an Online Fitness Coach’s Business Website
A few months ago, I began work on a new client project. Morgan Renaldo, a talented online fitness and nutritional coach, had asked me to help her design and develop her business website.
She had been struggling for months to create the website herself using a popular WordPress theme called XTheme. But the process was time-consuming, and she was still not getting the results she had been looking for.
Key Pain Points
Morgan already had a ton of amazing content, but it wasn’t displayed in a very flattering light.
Much of what she had to say was hard to read or even locate on the page. And some incredibly important information regarding her programs was buried throughout the website.
What’s more: the overall design of the website was fairly bland and did little to differentiate her from the competitors in her field.
Project Challenges
As an online fitness coach, Morgan is working within an extremely competitive — and some would say saturated — market. Therefore, her online brand would need to be particularly compelling to stand out from the crowd.
On top of that, Morgan specifically requested that her website be created in WordPress.
I am not a PHP developer and did not have the resources to hire one for this particular project. Therefore I was stuck with using a WordPress theme-builder in order to develop my design.
I chose Elementor as the least-bad option among the many less-than-ideal choices on the market. (More on this below.)
For the WordPress theme, we went with GeneratePress, which provided a stable and lightweight platform for us to build upon.
Execution: Design and Development
Designing the website wasn’t too much of a hassle. The basic structure and content of Morgan’s pre-existing website were pretty sound — the site just needed considerable sprucing up in terms of layout and style.
I put together the wireframes and mockups using Figma, which has long been my go-to design program. And I presented them for feedback and collaboration using Figma’s native sharing tool (probably my favorite part of the program).
And then it came time for development.
So much of this project turned out to be a constant tug-of-war between Elementor and me. I had used the program before back when I still utilized WordPress for my own website — but not for such a relatively large project.
I feel like it constantly got in the way of my development. Something that would have taken maybe two or three lines of code to achieve easily consumed ten minutes (or more) in Elementor.
In the end, I found myself writing a lot of custom CSS to achieve the styling I was after in my design.
This involved continuously parsing through source code in order to identify Elementor’s convoluted class names, such as (no joke) .elementor-element-52554a68, in order to style them.
Paragraph spans aren’t natively supported, so I had to hand-code (and style) all of them myself.
This doesn’t sound like much of a hassle until you realize that Elementor inexplicably wraps almost everything in span tags, so styling individual spans required a lot more class name hunting.
Custom media queries aren’t supported, either. And this made achieving mobile-responsiveness an incredibly time-consuming process, as I had to hard-code and position individual elements across various screen sizes.
I was still able to replicate about 98% of what I had intended to in my design. However, I think that the end result could have been achieved much more quickly (and with much less headache) without Elementor.
Lessons Learned
If I had to do the project over again, I probably would have insisted on either hand-coding the website on top of Bootstrap or using a tool like Webflow.
The latter would have allowed for a much more streamlined development process (for me) and a simple front-end interface for quick edits (for her).
This experience has also motivated me to look into headless WordPress as an option for future projects, as I’d be able to create the front-end of a website however I chose while continuing to use WordPress as a back-end for dynamic content.
Although certain aspects of my development process could definitely have been improved, I had a lot of fun re-designing Morgan’s website.
I learned a lot from this project, and I look forward to the next one … which hopefully won’t be another WordPress project. Otherwise, it might just be time to finally learn PHP after all.
