- Case Studies, Shopify
- 3 min
Building The Crappy Planet Store Based on the Shopify Debut Theme
Read this case study to learn how we designed and customized The Crappy Planet Shopify website, making it multilingual and customer-focused.
We know how crucial time is for digital agencies looking to grow and boost their income. The faster they complete client orders, the more trust they earn and the more requests they receive. That’s why it’s vital to choose a dependable web development service provider that can bring your agency’s creative vision to life seamlessly and quickly.
In this post, we want to share a story about a WordPress development project we did for a British design agency. It showcases our ability to transform ideas into well-performing and visually attractive websites right from the outset, without time-wasting back-and-forth.
The Client
Hiya is a UK-based design agency specializing in creating visually appealing websites and user-friendly apps. They cater to a diverse range of clients, spanning from small startups to large enterprises, where they excel at translating concepts into elegant and intuitive digital products.
The agency’s approach emphasizes the seamless integration of cutting-edge aesthetics with effortless user experiences, ensuring that functionality never takes a back seat to design trends.
The Challenge
Hiya turned to us for assistance with the redevelopment of SOLJET Construction’s website. It was way behind the modern design trends and needed an urgent facelift.
Making the new designs was Hiya’s responsibility, while our task was to convert those designs into HTML, CSS, and JavaScript code and integrate it into WordPress. All in all, we needed to develop seven pages:
- Home
- About
- Services
- Case Studies
- Case Studies Single
- Careers
- Contact
The client also wanted us to add interactive JavaScript effects to some of the pages.
The Solution
After all the formalities were sorted out, we got down to converting the designs into pixel-perfect, clean, well-validated HTML/CSS/JavaScript code that we then integrated into WordPress in exact compliance with SOLJET’s specifications and expectations.
Here are the most notable things we did.
Homepage
Apart from integrating a background video into the hero section to make the site more engaging, we also created the Services carousel with three cards representing SOLJET’s main offerings. Clicking on each takes you to the respective section on the Services page.
Notice the sliding up/down effect when hovering over a card, which we created applying our JavaScript expertise.
Services
The Services page may seem straightforward at first glance, but it has a special “space-saving” feature that we made with JavaScript and CSS. These are three tabs: Design, Construction, and Aftercare.
Clicking on one of these tabs displays information about the corresponding service without having to reload the entire page or open one in a new tab. This feature is an excellent way to improve the user experience, simplifying content presentation, which may encourage visitors to spend more time on the website and potentially bring SOLJET more leads and conversions.
Case Studies
The most distinctive functionality we developed for this page using JavaScript is the Filter. It allows visitors to easily navigate to the category they need, such as Commercial or Industrial.
Each category tab in the Filter menu also displays the total number of case studies in that category at the moment.
Site-Wide Features
Besides page-specific functionality, we created several features that work across the entire website. Let’s take a look at those.
For small-screened devices, such as smartphones or tablets, we added a burger menu to the website’s top right-hand corner. The menu is accessible from each page, enhancing the user experience for SOLJET’s prospects.
Also, notice the fade-in/fade-out effect when you open and close the burger menu.
Running Line
Another site-wide feature is a running line that we developed with JavaScript. The line showcases the logos of SOLJET’s key clients and partners in a loop. It runs until a user hovers over one of the logos, which stops it. Hovering away from the logo resumes the motion. Each page has this line above the footer.
In addition to converting the designs into WordPress-powered web pages, we made the site Retina-ready, catering to owners of devices with high-resolution screens, and accessible to visitors with various forms of disabilities, implementing the essential WAI (A) standards.
The Outcome
It took us 20 business days to convert the client’s designs into a modern, visually attractive, easy-to-navigate, and accessible website in strict adherence to SOLJET’s requirements and well within Hiya’s budget. Thanks to the use of the powerful WordPress platform, updating the site’s content is now straightforward and quick.
Hiya didn’t have many comments when we delivered the work. As with the overwhelming majority of our projects, we managed to bring the client’s vision to life right on attempt one.
Here’s what the client said when he saw the new website for the first time:
Just going through it now. Initial thoughts – amazing!
Looking for a reliable WordPress development company that delivers value? GetDevDone is here for you. We create visually stunning, fast, and feature-rich WordPress websites to give you a competitive edge. Our services cover a wide range of WordPress development options, including:
- Custom theme development
- Theme customization
- Builder-based theme development (Elementor, Divi, WPBakery, etc.)
- Design to WordPress conversion
- WooCommerce development
- Custom plugin development
- Speed & performance optimization
- API Implementation
- Assistance with migration to WordPress from another platform such as Webflow, Hubspot, Wix, and others
- Maintenance & support
Need something else? Reach out to discuss your project details. We’ll be delighted to help.
