1140
development hours
10
reworked Magento extensions
27
points higher performance score
The Overview
Lichtnelke is a German family-owned perennial nursery established in 1973 that has been operating an online store since 2014.
Whidegroup has been providing ongoing support of the store since 2020, by working on regular upgrades, performance optimization, and general maintenance. Due to the seasonal nature of the business, most customization work is scheduled during off-peak periods.
The Challenge
The client addressed Whidegroup with the following requests:
- Improve website performance metrics, which at that time led to a decrease in Google rankings and a rise in the cost of contextual advertising
- Replace the Porto theme used, which has a vast number of settings that overload the interface and slow down the site
- Modernize the outdated design
Together with the client, we agreed to switch the existing theme to Hyvä. This Magento theme allows to speed up load times, improve SEO and performance metrics, and freely customize the design and user interface. But there was a catch.
The Porto theme uses the Require.js framework, and Hyvä uses the Alpine.js one. They have a huge architectural difference. Therefore, almost all third-party extensions and custom features written for the Porto theme were not compatible with Hyvä.
Thus, almost the entire custom website logic had to be rewritten. Moreover, the client wanted the overall look of the pages to remain familiar to customers without making any drastic changes.
Wrapping up, the Whidegroup team faced the following task:
- Migrate the Porto theme to Hyvä
- Rework existing logic that is not compatible with Hyvä theme
- Update the design while avoiding radical visual changes
The Solution
We divided the work on the development and implementation of the new Hyvä theme into several stages and started with the new design.
#1 New website design creation
First, we meticulously developed a new site design, which would later be implemented on the Hyvä theme.
We made a complete redesign of the home page, product, and category pages in accordance with the best practices of modern design and Hyvä opportunities. We made numerous changes to the pages layout and implemented modern conversion-focused solutions to enhance the overall functionality and user experience. These updates are described in detail in the previous case study.
Before
After
#2 Magento Update to 2.4.6
While our designer focused on the visual overhaul, the development team initiated the technical update of the website.
Since the store was using Magento 2.4.5, we prioritized upgrading it to the latest version, 2.4.6. This strategic approach helped isolate potential Magento upgrade issues from Hyvä theme compatibility problems.
We began by assessing the compatibility of existing extensions with the new Magento version, disabling and removing the extensions that are not currently in use. Following a compatibility assessment, we carried out an upgrade and began the theme migration process.
#3 Code adaptation
We updated the existing code to work seamlessly with Alpine 3.0, the JavaScript framework that Hyvä relies on, to make all logic that was used with the Porto theme properly work with Hyvä. This was especially important for the correct operation of the checkout process, so we had to change the GraphQL requests and update the scripts to make Hyvä React Checkout work smoothly. As a result, we not only enhanced the website's functionality but also ensured that it fully leverages the modern capabilities and streamlined architecture of the Hyvä theme.
#4 Hyvä theme installation
After completing the necessary preparations, we implemented the Hyvä theme. At this stage, we started by applying the theme in the development environment.
To ensure a seamless checkout experience, we also enabled Hyvä React Checkout. This modern and user-friendly checkout solution is a key feature of the Hyvä theme. By integrating these components, we laid the foundation for an improved online shopping experience.
#5 Design changes implementation
At this stage, the developers integrated the new design with improved UI/UX characteristics.
The implementation of this design took 240 hours of work and involved six specialists.
#6 Other useful improvements
We made various small adjustments to improve the site’s functionality and user experience. This included:
- Configuring pages pagination
- Adding email notifications and social media login extensions
- Customizing captcha styles on the customer account creation page, and more
#7 Bug fixing
After completing this extensive development work, we focused on thorough testing and bug fixing. This stage involved identifying any issues that arose during the migration to provide the client with a polished and reliably working online store.
#8 Testing and optimization
We measured the Core Web Vitals and optimized performance characteristics according to the requirements. After several iterations, we achieved metrics that satisfied both the client and our team.
#9 Launch of the updated store on live
Finally, we launched the updated store, transitioning it from the development environment to live production. The new website, built on the Hyvä theme, now offers an enhanced user experience that not only delights customers with faster load times and a modern design but also drives better business results.
The Result
The total time spent on the project reached 1,213 hours. This included Magento store upgrade to the latest version, migrating from the old theme to Hyvä, creating and implementing the new design, and refining the characteristics of the updated site to near perfection.
Migration to the Hyvä Magento 2 theme significantly improved the Core Web Vitals, which have been an official Google ranking factor since June 2021.
We got the following results:
- The Cumulative Layout Shift (CLS) level dropped from 0.158 to 0.006 — it is an improvement of almost 96%!
- The Largest Contentful Paint (LCP) decreased from 3.7 to 1.5 sec
- Although the Total Blocking Time (TBT) slightly increased, it still remained within the good responsiveness range
- In general, the overall site performance score increased by 27 points, entering the green zone.
TBT
30 ms
50 ms
LCP
3.7 s
1.5 s
CLS
0.158
0.006
Performance score
67
94
Google also now considers 97% of URLs to be "good". This, along with the increase in performance metrics, has improved the site’s Google ranking and reduced the cost of contextual advertising.
Before the migration
Mobile
0 poor URLs 59 URLs need improvement 1,317 good URLs
After the migration
Additionally, the new website design remains familiar to regular customers while offering an improved UX for better visitor satisfaction and resulting in improved conversion rate for the company.
Henning Bargest
Lichtnelke
Head of IT Department
“ The Whidegroup team did an outstanding job migrating our site to the Hyvä theme. Their professionalism in communication, quality of work, and respect for timelines and budget were impressive. They helped us create a faster, more optimized website that exceeded our expectations.“
TELL US ABOUT YOUR PROJECT - WE’LL RESPOND IMMEDIATELY!
Magento Website Redesign & UI/UX Improvement For the German Garden Plants...