Case Study

GoodTime Monty – a website with beautiful and advanced animations

Collaboration Goals

The main goal of the project was not only to delight visitors with a beautiful visual presentation, incorporating intuitive UX Design, but also to ensure smoothness and efficiency in the website’s operation. The client wanted the site to be built on the WordPress platform to enable easy content management, address SEO-related aspects, and streamline the update process. The designed website was very complex and intricate, featuring many unique sections and exceptional animations.

Among the main client goals to achieve were:

Successful implementation of an advanced and unique graphic design from Figma to WordPress

The requirement for easy website and content management, including blog articles

Achieving maximum website performance and speed

The necessity of smoothly functioning advanced animations on all available devices (mobile/tablet/desktop)

Addressing optimization aspects related to SEO

Providing ongoing project and technical support for the website

Problems and Challenges

The main implementation challenge was the number and complexity of advanced animations envisioned during the design phase of the new website. The website was meant to be the main embodiment of the GoodTime Monty brand spirit in Slow Tourism style, enticing customers with its interactivity and uniqueness to experience something extraordinary within the tourism offering and make tour reservations.

Unique and complex animations on the website

The website features many non-standard and completely unique animations designed during the design creation phase. One of the key challenges was programming all the unique animations in the front-end layer as envisioned in the project, ensuring maximum compatibility across different devices (mobile/tablet/desktop) and web browsers (Chrome, Safari, Opera, Edge).

An example of how an animation works on goodtimemonty.com

UI Design vs. comfortable content editing

Another challenge we faced was reconciling the non-standard design with a large number of animations with comfortable content editing in Gutenberg. Gutenberg, the new block editor of WordPress, had to be intuitive and user-friendly for the client team to edit and manage content on the site.

We created custom Gutenberg blocks that allowed easy addition and editing of complex elements and animations without the need for coding knowledge, and then we conducted training for the client to ensure they could fully leverage the capabilities of these custom blocks and manage content on the site independently.

Iterations of revisions and client feedback

One of the major challenges in implementing completely unique and complex websites like GoodTime Monty is the expected high number of revision iterations and the amount of feedback from the client. The complexity of the project means that new ideas and requests emerge during the work, requiring continuous adjustments. This situation can easily impact the project budget, prolonging the work time and generating additional costs.

How we solved the client’s problems

Building the Project Team

From the beginning, we knew that programming skills and experience would be key to the success of implementing GoodTime Monty. Competent developers not only deliver high-quality code but also contribute to effective project management, minimizing risks and increasing the chances of achieving project goals within the set time and budget.

The project team included the following specialists:

2x WordPress Developer

Project Manager

QA Tester

The entire team needed heightened engagement, aesthetic sensibility, animation expertise, and a high work culture with mutual feedback.

Efficient WordPress Development

WordPress served as the CMS engine for the site. The main idea guiding us in planning the front-end and back-end architecture was to ensure convenient, comfortable, and trouble-free content editing. For this purpose, we utilized the Gutenberg block editor, for which we prepared dedicated blocks according to the provided design. The basic technical principles accompanying the implementation team were:

Easy editing: to allow non-technical users to easily create, edit, and manage content on the site

Minimization of plugin usage: too many installed plugins significantly slow down the site and negatively impact performance, so we limited them to an absolute minimum in the project

Modern technological stack: we applied modern programming environments for site development (JavaScript ES6+, PHP 8, WebPack 5)

Administrator panel customization: with ACF PRO, we could extensively customize the admin panel to adapt it to the project’s specific needs

Optimization of WordPress Performance

Through thorough optimization, the website operates smoothly even on weaker devices, providing users with uninterrupted experiences while browsing the site. We used frontend technologies such as HTML5, CSS3, JavaScript, and GSAP to create smooth and engaging animations.

What is GSAP?

GSAP (GreenSock Animation Platform) is a JavaScript library that enables the creation of professional animations on websites. GSAP ensures maximum performance and allows for highly customized animations that work across all popular browsers.

GSAP allows for animating virtually every aspect of the website, from simple transitions and movements to advanced animation sequences. It can animate CSS properties, SVG, Canvas, as well as JavaScript properties, providing full control over every aspect of the animation, including timing, delays, speed, and easings. This allows for creating very precise and intricate animations, all of which we leveraged in the project.

To optimize performance, we employed various techniques, including:

Lazy loading for images, pictures, and videos

Optimization and auto-conversion of images from jpg/png to webp

Script and style minification

Loading only necessary resources for specific subpages

Separating critical JavaScript code following the Above The Fold technique

Enabling cache and gzip compression

Using Speculative Loading

All these efforts were aimed at reducing page load times and improving performance.

Testing the website on various devices and browsers

During the Quality Assurance phase, we conducted a series of diverse tests to ensure that the interface was intuitive and easy to use, as well as free from functional and visual errors. We performed multi-level tests including:

performance tests

responsiveness tests

functionality tests

cognitive walkthrough tests.

The Quality Assurance phase is a crucial element in the process of building any website to ensure high quality and user comfort when using the site. Through detailed performance, responsiveness, functionality tests, and cognitive walkthrough tests, the GoodTime Monty site meets all expectations and operates flawlessly on every web browser and mobile/tablet/desktop device.

Key Project Management aspects

Continuous client feedback during the programming work and effective project management from the Project Manager were key elements that contributed to the high quality of the final product and client satisfaction. Key aspects in project management included:

Regular status meetings and weekly summaries of work completed in the past week

Transparent communication using tools such as Asana, Slack, and Google Meet

Incorporating feedback at every stage of the project, allowing for quick responses to changes and avoiding major issues in later stages

Building a client-team relationship based on trust and collaboration

Development and Maintenance of the Site

After completing the project, we entered into a partnership with the client for Continuous Improvements, which involves continuously enhancing the site and addressing current issues and necessary fixes. The goal is not only to maintain the site at a high level but also to evolve it in response to changing user needs and market trends.

Continuous Improvements services bring many benefits to the client, including:

Increased performance and security: Regular updates and optimizations ensure that the site operates quickly and securely.

Compliance with the latest standards: The site stays up-to-date with the latest technologies and trends.

Proactive management: Quick response to potential issues before they become major failures.

Improved user experience: Continuous improvement of functionality and user interface.

Continuous Improvements

The Continuous Improvements service is a key element in ensuring the long-term success of a website. Through regular activities involving traffic analysis, working on increasing conversions, and providing ongoing technical support (maintenance), the GoodTime Monty site not only operates efficiently but also continually evolves, responding to the changing needs of the market and users.

Conclusion of the Collaboration

The project was a complete success; the GoodTime Monty site was implemented according to schedule and budget, meeting all client requirements and functional objectives.

A fast and well-functioning website was built based on numerous custom animations and functionalities

Increased data security – regular security updates are provided, and by limiting the number of plugins to the essential minimum, we drastically reduce the risk of security vulnerabilities and unfriendly attacks

Easier maintenance – using modern work environments and current technologies simplifies site maintenance now and in the future

An easy-to-manage WordPress admin panel that facilitated and expedited the work of those responsible for managing the site

The site is SEO-friendly: we wrote semantically correct code with implemented Schema tags and configured <title> and <description> tags.

Codeq skillfully delivered the website within schedule, meeting the client’s expectations. The service provider utilized Asana for effective project management and email and Slack for productive communication. Their technical expertise, talents, and commitment were key elements of their work.