Discover how GetDevDone partnered with The Playground design agency to build a feature-rich WordPress platform for the Music Publishers Association (MPA) in the UK. Our team transformed detailed designs into a responsive, Retina-ready website and integrated WordPress with CiviPlus CMS, ensuring seamless content management and a flawless user experience.
The GetDevDone team is famously known for our knack in handling a wide range of projects, whether it’s fixing small issues, customizing themes, building business-critical plugins, or crafting complex enterprise-level websites from scratch. This ability not only benefits individual clients but also appeals to digital agencies looking to expand their services and boost profits.
In this post, we want to share a story about our collaboration with The Playground design agency, one of our long-standing partners, on a large-sized, feature-rich WordPress development project. Let’s explore the details.
The Playground is a strategic design studio dedicated to humanizing brands. Their expertise lies in crafting brand identities and digital solutions for businesses at any stage of their journey, from ambitious startups to established companies aiming for significant growth.
The studio offers a broad spectrum of services, assisting businesses in strategizing, defining, creating, and implementing their marketing plans. This encompasses running digital marketing campaigns and building websites among other offerings.
We’ve jointly worked on multiple projects of varied scopes and complexity for over five years now, always delivering outstanding results to The Playground’s clients.
This time around, The Playground turned to us for assistance in developing a WordPress-based online platform for the Music Publishers Association (MPA) from the United Kingdom, featuring an elaborate structure and engaging interactive effects.
As usual, the designs were created by the studio, while our mission was to convert them into pixel-perfect, responsive, mobile-friendly, and Retina-ready web pages, plus set up the WordPress back end for effortless content management.
We also needed to integrate the WordPress build with the CiviPlus CMS that the MPA used internally, which added extra effort for our team.
All in all, there were 11 pages that we needed to code and integrate into WordPress:
Apart from converting the designs and creating the pages in WordPress, the MPA wanted us to add a large number of dynamic/interactive effects and features to the website using JavaScript, including:
Finally, since the MPA is a socially aware organization that cares about disabled people, they requested adding the essential accessibility features to comply with the WAI/WCAG key requirements such as keyboard navigation.
Once we shook hands with The Playground on the collaboration conditions, our developers set out to bring the client’s vision to life. We didn’t have a minute to waste, considering the vast project scope.
The entire description of the work we did could take more than one post. Let’s focus on the most notable features that we created using the staple web technologies: HTML/CSS/JavaScript and WordPress.
One of the most engaging features of the entire website is the animated MPA logo on the Homepage.
When the mouse cursor is not on the logo, it pulsates once every second like a sound wave. However, when you place a cursor over any of the lines that make up the logo, the pulsation stops and the line where the cursor is positioned scales up to 170% of its height with no change to the width.
The lines located directly to the right and left of the current one, in turn, scale up to 140% with the width intact, while the second lines to the right and left – to 130%. The rest of the logo lines remain unchanged.
As the hover moves to another line, the same animation starts happening to the lines affected by that, in the same way.
It did take us some time and JavaScript magic to get this animated logo right, but we achieved the exact result the client expected. We used the GSAP animation to achieve this feature:
By clicking the Find out more arrow link underneath the MPA animated logo, the user gets to the hero section below with a smooth scrolling effect.
We also created a user controlled carousel in the What we do section, consisting of three subsections. Users can move from one subsection to another by clicking the numbered round buttons. The button for the selected subsection is painted black with the number having the color of the current section. For instance, number 1 is yellow since the Policy and Outreach subsection is yellow too.
Another feature worth mentioning is the section at the bottom of the page with two tabs: News and Events, highlighting the latest MPA news and events correspondingly. The beauty of this setup is that it saves space on the page, displaying the content of each tab within the same frame.
Users can also scroll horizontally within the tabs using the arrows in the upper right corner.
The standout feature on the Events page is the Filter that allows users to find specific events easily by category such as Education or Industry, by specifying a date range in the handy datepicker, or by typing keywords into the search box.
MPA’s history spans several centuries. To present it in an engaging and compact way, highlighting the organization’s most significant milestones, we developed a user controlled carousel. By clicking a specific year at the top of the carousel, visitors can find out about the main events that impacted the MPA at that particular period of time.
In addition to features specific for each page, we created several functionalities that work across the entire website.
We made the website’s header hide as soon as a user scrolls down below the fold and reappear once they start scrolling up regardless of their current location on the page, even if they’re at the footer.
This feature is an excellent way to keep the users’ focus on the content, reducing distractions to a minimum.
To improve the user experience even further, we added a search functionality so that users could quickly find information they’re interested in instead of scrolling through the website page by page.
The search is enhanced by the auto-complete feature that we implemented using the Revanassi WordPress plugin.
Another feature that’s used across the website is infinite scrolling. We enabled it by using the AJAX technology, which allows for asynchronous content loading, enhancing user experience and making the website dynamic and interactive.
As requested by the client, we implemented the key accessibility guidelines to make the website easy to navigate and use by people with various forms of disabilities. In particular, we did the following:
Since there was so much work, we divided the project into batches for the client’s maximum convenience. They had some comments and update requests with every batch we delivered. For example, they asked us to change the rollover state on white buttons to lighter grey.
On the whole, however, The Playground was more than happy with our performance and diligence. They got a visually attractive, functional, interactive, and accessible website with engaging content and captivating dynamic effects and animations to add another point to their agency’s popularity rating.
It took us 63 business days to develop the platform from start to finish. This, again, showcases our capabilities in handling projects of any scope or complexity, invariably delivering topmost-quality results.
Want to be our next happy client? Let’s get in touch!
Learn why creating an e-commerce website with Drupal 8/9 and Drupal Commerce is the right decision. Looking for a suitable platform to build an online store? Among many possible choices, Drupal 8/9 coupled with the Drupal Commerce extension is one of the best options, hands down. In this post, we explain what benefits your business […]
Struggling to choose between WordPress and Webflow to build your website? This post should help you make the right decision.
Is WordPress multisite a good thing compared to a single WP website? In this post we answer this question, describing all the pros and cons of multisiting.
