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.
The Challenge
MyBodyTutor’s website was very outdated, both in its design and the technology behind it. This was causing a number of issues for the company and its customers. They were receiving regular complaints about the website from current clients and losing out on prospective clients too. The websites had different third-party integrations which needed to be included in the new website.
The 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.
The game plan
Website redesign using UI and UX best practices
Migrate from WordPress to Statamic
Replace jQuery and Bootstrap with Alpine.js and TailwindCSS
Adam Gilbert
CEO @ MyBodyTutorWe 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. Their positive attitude and sense of humor made the development process a fun and enjoyable experience. We'd highly recommend Lucky Media to anyone in need of top-notch web development.
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.
100%
Fully customizable
80%
Cost savings of up to
50%
Improvement in loading time
99%
Uptime
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.
Book a free call and have a no-strings-attached chat about your ideas.
Before and After: Landing Page
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.
We designed the website around individual building blocks, making it possible for the client to reorganize it with ease. As simple as 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.
Before and After: Payment Page
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 Control Panel.
There were some third-party integrations that we integrated into 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.
Book a free call and have a no-strings-attached chat about your ideas.
92
Performance
98
Accessibility
92
Best Practices
92
SEO
To optimize performance across the site, we cached all blog posts and ensured that users only viewed cached pages. When a post was edited, the cached content updated automatically. This makes the website super fast and helps the server avoid crashing, even with high numbers of concurrent visitors and external cyber-attacks.
The Statamic CP provides a seamless experience when working with building blocks. We can choose to toggle certain functionalities on or off depending on our client's needs. In some cases, we set certain fields as required so the client doesn't forget to fill them out. We can also 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.
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.
Before and After: Single Case Study
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.
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.
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.
Up Next
Discover how our partnership with Chillidog Software revolutionized their website, combining a complete redesign, upgraded technologies, and enhanced performance to deliver an exceptional user experience.
Read Case Study
