Statamic website redesign and development

How we helped MyBodyTutor redesign its website to match its high-quality service

By integrating the latest UI/UX techniques and ensuring smooth functionality across all devices, we enhanced customer satisfaction and engagement, making it easier for clients to access personalized coaching.

mybodytutor hero

Background

MyBodyTutor provides customized food and exercise plans, one-to-one coaching, and daily accountability to help individuals reach their health and fitness goals. The online program takes a unique approach to weight loss by focusing on mindset, psychology, and habits – rather than just willpower alone.

challenge vector

Challenge

MyBodyTutor’s website was outdated in both design and technology. This caused several problems for the company and its customers. They regularly received complaints about the website from current clients and were losing potential clients as well. The old website had various third-party integrations that needed to be combined into the new website.

solution vector

Solution

We designed and built a highly secure website that runs smoothly on all devices. It’s professionally designed, using the latest UI/UX techniques, easily customizable from the Statamic control panel (CP), and has a super-fast loading time.

gameplan vector

Gameplan

  • Website redesign using UI and UX best practices

  • Migrate from WordPress to Statamic

  • Replace jQuery and Bootstrap with Alpine.js and TailwindCSS

Results

The new UI/UX redesign built using Statamic allows the client to manipulate the website structure without breaking it down. We’ve provided feature-rich design blocks that are easily adjustable to fit most of the client’s website needs.

The cost of hosting services for MyBodyTutor has dropped by up to 80%. Maintenance costs have also gone down, and with zero downtime caused by regular updates, they’re not missing out on potential sales either.

To speed up loading time, we began by migrating from WordPress to Statamic. We replaced the usage of jQuery and Bootstrap with more advanced solutions, like Alpine.js and TailwindCSS.

94% of hacked websites are running on WordPress. Because Statamic is built on Laravel, widely regarded as the most secure and well-maintained PHP framework today, it’s much more resilient against cyberattacks.

100%

Fully customizable

80%

Cost savings of up to

50%

Improvement in loading time

99%

Uptime

Adam Gilbert

We had a great experience working with Lucky Media on our recent website redesign. The team was responsive and friendly, always available to answer any questions we had, and open to incorporating our design requests.

Let's chat

Book a free call and have a no-strings-attached talk about your ideas.

lokman and arlind headshots
developers coding together

Timeline

The project was fairly complex, having multiple third-party integrations, data migration, and a redesign. That’s why we worked hard on defining all requirements and gathering as much feedback from the client as possible. This allowed us to produce the best UI/UX design and offer the most appropriate tech solutions.

Statamic project timeline

Technology stack

mybodytutor website redesign

A fully modular website

We designed the website around individual building blocks, making it possible for the client to reorganize it with ease. Like playing with LEGO bricks, the team at MyBodyTutor could add, modify, reorganize, or remove sections of the website as they pleased and create new pages in the future. For example, they could remove the team module from the home page and create a separate team page to include that module. Motivational and instructional YouTube or Vimeo videos could also be shared, either as a specific video post or included within a text post.

Credit Card Payments with Stripe and Statamic

Payments with Stripe

Our client wanted customers to be able to pay using Stripe, both one-off payments and subscriptions, but Statamic doesn’t have its own Stripe integration. That’s why we had to manually integrate it for receiving online payments. We set up the site so that our client can create multiple plans and choose which ones to display on multiple pages across the site without requiring any coding knowledge. This can be done directly from the Statamic CP.

Statamic third party integrations

Third-party integrations

There were some third-party integrations that we used for the newly redesigned website at our client’s request. One of them was Drip, a marketing tool for building emails that stand out in every inbox. Another was Deadline Funnel, which allowed the client to add authentic deadlines to their marketing campaigns and increase sales. Cloudflare was used to protect the website from DDoS attacks and increase loading speed. Additionally, we integrated Drift, a chat platform that connected interested customers directly with the founder of MyBodyTutor.

Let's chat

Book a free call and have a no-strings-attached talk about your ideas.

lokman and arlind headshots
developers laughing at work
mybodytutor website redesign

Modifiable components

The Statamic CP provides a seamless experience when working with building blocks. Our client can choose to toggle certain functionalities on or off depending on its needs. In some cases, we set certain fields as required so the client wouldn’t forget to fill them out. We were also able to enforce the validation of fields based on the data of other fields, providing multiple variations of the same building block.

One useful example gave our client the option to include a unique content ID for subtitles within a blog post, making it much easier to direct readers to a specific piece of information. Another example was the countdown timer for customer offers. The client could choose the due date and hour for the counter, a URL for it to redirect to once the countdown had ended, and buttons with multiple URLs to different promotional pages.

Wordpress to Statamic migration process

A seamless migration from WordPress to Statamic

This was a very complex project – hundreds of blog posts needed to be migrated from WordPress to Statamic. After moving the content, we tested and verified that everything had been imported correctly. We checked that all blog posts were present, that the content and formatting were correct, and that any media files (such as images or videos) had been properly migrated. There were some issues that we needed to fix using customized code, but we were able to migrate everything successfully.

custom dynamic Statamic filters

Custom filters for success stories

Our client had gathered hundreds of success stories from its customers. To make it easier for users to find stories relevant to them, we implemented a custom filtering technique. It lets you filter stories by whether they include video testimonials, how much weight the customer lost, and which of six customer categories they fell into, for example, ‘disordered eating’, ‘busy parent’, and ‘post-pregnancy’. You can view the results in alphabetical or reverse alphabetical order too.

URLs for better SEO

The URLs used for the blog posts were not consistent enough, and we advised the client to keep a structured URL system instead. However, there were some very popular blog posts that the client wanted to keep with the old URL. So we implemented a custom function where the old URL was retained only for those top posts, whereas the rest of the blog posts switched to a standard URL technique.

Organizing customer testimonials

One page collated all the customers’ video testimonials, but with so many videos, the server was overwhelmed and the response time was very slow. As a solution, we included a custom function to display a clickable thumbnail image in place of each video – a video would only load when a user clicked on its image.

To keep the page of written testimonials organized too, we cropped longer reviews with a faded filter and included a read more button that would display the entire review when clicked.

Let's chat

Book a free call and have a no-strings-attached talk about your ideas.

lokman and arlind headshots
serious developers meeting

Related case studies

Website migration from WordPress to Statamic

How we helped F2N2 to migrate a blog from WordPress to Statamic
StatamicAlpine.jsPartytown
f2n2 thumbnail

Healthcare Statamic website development

How we helped Clinique Michel Gagner to generate leads and empower patient journeys
StatamicAlpine.jsPartytown
clinique gagner thumbnail