“This project was our first introduction to both blocks and the Site Editor, and it was a gratifying experience.” — learn how the e-commerce and e-learning agency PerezCarreno & Coindreau rebuilt the website of the My Peak Challenge non-profit organization.
PerezCarreno & Coindreau got their start in 2008 building iPhone and BlackBerry apps for magazines and newspapers. Over the years the focus shifted to web applications, with the primary focus in e-commerce and e-learning websites.
When it came to WordPress, the agency relied on Elementor in the past. However the poor performance and user experience led PerezCarreno & Coindreau to rethink their approach. And give Full-Site Editing a try.
In this case study we’ll show how they successfully delivered a block-based project for a renowned international client.
Table of Contents
- About the client
- The Goals: Improve conversions, engagement, and user happiness
- The solution: A custom block-based experience
- Key blocks and templates developed
- Course page frontend
- Query slider block
- Ambassador group frontend
- What were the results of the redesign?
- What were the lessons learned by the agency?
- Final thoughts
About the client
My Peak Challenge is a non-profit organization founded by Scottish actor Sam Heughan. It offers health and wellness courses led by trained professionals and coaches.
But the organization provides more than just education. It has created a global community with members in 83 countries. This way the “Peakers”, as the members call themselves, are never alone on their health and wellness journey.
The membership in My Peak Challenge is paid. But 50% of the proceeds are donated to charity partners like WWF, Blood Cancer UK, the Marie Curie foundation, the Environmental Defense Fund, Feeding America, the Global Food Banking Network, and One Tree Planted.
As of 2024, the organization has donated over $7 million dollars to these causes.
The Goals: Improve conversions, engagement, and user happiness
The team at My Peak Challenge reached out PerezCarreno & Coindreau because they had the following pain points with their current WordPress website:
- There was lots of content, it was not presented in a way that maximized its potential.
- When viewing course content, it was easy for users to get confused. There was no clear way to find out how far the user had already progressed in the course. And what the rest of the lessons or courses were.
- Accessing a video lesson required users to go through multiple levels. There was no easy jump in point.
- The membership checkout process was not optimized for conversions.
- Their community lived on a third-party platform (Facebook), which made management a hassle.
So how did the team at PerezCarreno & Coindreau solve these issues?
The solution: A custom block-based experience
Designing the user experience
The first step in the redesign process was to rebuild all user flows. The PerezCarreno & Coindreau team organized multiple scoping sessions with the client. The focus during this phase was to reduce the number of steps a user had to take to achieve their goals to the minimum.
The agency created a mockup for every page that the user would interact with. During this process, the team worked closely with the client to ensure that the user experience aligned with the My Peak Challenge vision.
Creating the theme
The team at PerezCarreno & Coindreau chose the Ollie theme by Mike McAlister as a starting point. This was before the team enrolled into the Block Theme Academy course. So Ollie was seen as an easier starting point, rather than starting from scratch. But with the knowledge from the course, the team could have started from scratch as well.
Because in the end the theme ended up being entirely custom, with custom blocks and dynamic templating. This was to make the experience easy to use for customers and easy to manage for the My Peak Challenge staff.
Implementing the e-commerce solution
To sell memberships, the website uses WooCommerce. This provides all the foundations that are needed to sell the memberships, while being to handle physical goods like the Welcome Gift Pack.
But before users get to the checkout, they land on this custom page:
This section achieves four things:
- It allows to choose between monthly and yearly billing.
- It recaps the key benefits of joining the membership.
- It highlights the welcome gift when joining.
- It collects the necessary data (size and fit) for the free welcome T-shirt.
This seemingly simple page shows the attention that was given to achieving an optimal user flow. Only when users have selected all the necessary information are they redirected to the checkout page:
The two step checkout enables users to focus on payment details in the second step.
The membership is a recurring charge, so WooCommerce Subscriptions handles the recurring billing. Customers can opt for monthly or yearly billing, and this is supported out of the box by the plugin.
The membership also has a tiered approach, and the plugin was able to handle this too.
Implementing the courses and community
The existing website used the LearnDash learning management system to deliver the health and fitness programs to customers. While the course delivery could have been implemented with a custom solution, the decision was taken to keep LearnDash.
Because with hundreds of video lessons stored in the LearnDash format, migrating to a simpler custom solution would have required too much work.
The community feature is powered by BuddyBoss, which is a fork of BuddyPress. This plugin offers rich media support, and integrates well with WP Offload Media to move assets off-site.
Key blocks and templates developed
In order to create the best user experience, the team at PerezCarreno & Coindreau needed to develop a number of custom blocks, and combine them into block-based templates.
Here is a list of all custom blocks, right from the code editor:
Quite a few of these blocks, like the course name, guide, and subheading, can now be done using Core blocks and Block Bindings.
Lesson Pages
The content of lesson page changes depending on the active membership of the user:
- With an active membership, the page they see is shown on the frontend view image. There’s a video player with the lesson, a playlist on the right, the lesson content, as well as the mark complete/favorite buttons, and downloadable materials.
- However, if they are not active members, they will see the ‘upsell’ section instead of the video, as shown in the editor view.
As the template image shows, multiple sections use Visibility presents to determine what to show for each visitor.
Lesson Playlist block
A key piece of functionality for the lesson pages is the Lesson Playlist block.
It handles the basic logic needed to show the lessons of a course. For that it:
- Looks at the lesson data to figure out which course the lesson belongs too.
- Queries the database to get the other lessons.
- Displays a checkmark if the lesson was completed.
This is straightforward functionality, but the block can do more.
Each video lesson is represented by a thumbnail. This thumbnail is retrieved from the Vimeo video service.
This means that editors only have to upload a video, and don’t have to deal with uploading any thumbnails. If the thumbnail is not what the editors want, they can manage the desired thumbnail through Vimeo itself.
The playlist button uses JavaScript to ensure that the current lesson is always positioned at the top the video list. This way users have an overview of the next lessons in the list.
But not all lessons have a video. Some are used to deliver assets such as PDF guides. So the block first checks whether the lessons has a Vimeo video ID:
If no such ID exists, it looks for a PDF attached to the lesson. If there is a PDF, the Guide default image is shown. A placeholder image is used as a fallback.
This is a good showcase for why custom blocks make sense. Rather than requiring the editors to handle all this logic, they only need to worry about creating the content.
The blocks then look at the content, and adapt the display for this use case.
Course page frontend
The course page has three custom blocks:
- The Hero Section block uses custom fields to pull the course’s teaser description, background image or background video.
- The Start Class block automatically takes the user to the next available lesson they have not completed in the course.
- The Lesson List displays a list of all the lessons in a course, using similar logic to the playlist discussed above with dynamic Vimeo thumbnails.
Query slider block
In various places around the site, we display a scrollable grid of courses.
This is handled by a block variation of the Core Query Loop block.
It injects the arrows as well as the JavaScript code for the Swiper library and initializes a Swiper instance for the grid.
Ambassador group frontend
This page has a number of blocks:
- The ambassador social icons which show social icons based on custom fields on the ambassador post type.
- The ambassador video which displays a video if a video ID exists in the ambassador post type. It supports legacy embed codes from their previous site, as well as a cleaner “vimeo video id”‘” field.
What were the results of the redesign?
With the new site redesign, MPC saw:
- Increased conversion rates
- Increased community engagement
- Increased user happiness
- Easier LMS management
- Easier community management
This is what the client had to say about the redesign.
Testimonial
I recently had the pleasure of working with Armando on a WordPress website and Learning Platform. He clearly understood the intricacies and needs of my project and executed accordingly.
Armando’s ability to skillfully design as well as develop, resulted in a website and learning platform that exceeded my expectations. Armando paid meticulous attention to all of the project requirements while remaining flexible when we needed to pivot.
He understood the scope of work and instructions clearly, executed and delivered a quality product. He was collaborative, organized and was an excellent communicator throughout the project. Timelines were adhered to, and updates were provided regularly, ensuring a smooth and transparent process.
I am thoroughly impressed with the final outcome, and I can confidently say that I would absolutely hire Armando again for future projects
What were the lessons learned by the agency?
What did the team at PerezCarreno & Coindreau learn during this project? Let’s hear from Armando Perez Carreno, Principal Software Engineer:
“This project was our first introduction to both blocks and the Site Editor, and it was a gratifying experience.
Before this project, we spent part of our time building React applications and the other part building Elementor-based WP sites. In Elementor, however, to meet our performance goals, we ended up having to code our widgets and queries anyway. This made me rethink the validity of using a page builder.
Around the time this project came along, I was introduced to what ‘Gutenberg’ was really about. Once I understood that, everything changed.
Page builders may have been a blessing in the past, but that’s not the case anymore.
Improvements
This being the first block-based project I worked on, most of the custom blocks were dynamic PHP blocks. This was partly because I was new to the Editor APIs and partly because they didn’t need a UI, as they only exist inside templates that are not edited by the staff.
Now that I have a better understanding of the relationship between the Editor APIs and React, I can build blocks that are not only functional but also enhance editors’ user experience.
Also, block bindings weren’t a thing yet, so some of the custom blocks can now be achieved with bindings on core blocks.
And, of course, the Interactivity API is fantastic, and I will explore it more in upcoming implementations.”
Final thoughts
The first project with a new technology is always tricky. And I commend the team at PerezCarreno & Coindreau for having the courage to build such a challenging site as their first block-based project.
The results speak for themselves.
I’m impressed by how the team chose pragmatic solutions, and was able to circumvent the technical and design challenges in an elegant way.
If you are on X, make sure to checkout out Armando Perez Carreno’s profile. Here Armando shares lots of useful information about building with modern WordPress and WooCommerce.
Armando is also a valued member of the WP Development Courses student community.
If you want to learn how to build websites using Full-Site Editing, then join the Block Theme Academy and Block Development Mastery courses.
