Expertises
- User flows
- Content strategy
- Web design
- E-commerce
- Development
Technologies
- Craft CMS
- Tailwind CSS
- JavaScript
- Twig / PHP
- AWS
Features
- Shipping fee calculator
- Integration with CRM Prextra
- Product variant selector
- Integration of reviews via an API
- Marketing forms
- Integration with Zapier
Content Organization and Wireframes
The first step involved conducting a thorough content audit of the two existing websites to consolidate them into a cohesive single website. This included identifying redundant content, removing outdated information, and optimizing the overall structure of the website. We ensured that the navigation was clear and intuitive, and the content was easily accessible. We created wireframes to plan the layout and structure of the website, ensuring a smooth and engaging user experience.
Search and Navigation
Products and Variant Selector
One of the advanced features of the project was a selector for different product variants. This involved creating a function that would allow customers to choose specific characteristics they desired for their fences or railings, and then display the corresponding variant and its cost based on those selections.
Product Reviews
We integrated Stamped.io reviews provided by the client directly into the website. To optimize performance, we loaded the reviews after the initial page load. Using their API, we were able to extract real-time reviews and seamlessly integrate them into the site. We developed a custom JavaScript function to ensure a seamless integration of the reviews into the user experience. This allows website visitors to benefit from authentic testimonials while shopping.
Content Pages
We also created carefully crafted and well-designed content pages. We used Craft CMS for content management, enabling easy and efficient management of all the pages. Additionally, we included photos and videos of the company to enhance the visual experience for users. Finally, each page was optimized for SEO to improve its visibility and ranking on search engines.
Cart
When a user adds a product to the cart, a sliding panel appears from the right side of the screen. The panel displays the product name, specifications, price, and quantity. It also provides buttons to remove the product from the cart or continue shopping.
Furthermore, the cart has a feature that checks if the user has added posts to the cart when purchasing fences. If the user tries to proceed to checkout without adding posts, a message appears to prompt them to add posts before proceeding. This ensures that users do not accidentally forget to purchase a necessary product.
Distance-based Shipping Calculator
A key feature of the payment process was a delivery fee calculator that provided customers with an accurate estimate of shipping costs based on their location. This involved connecting to the Google Maps distance API to calculate the distance between the customer's address and the warehouse location, and then using data from the CMS to determine the shipping fees based on a set of predefined conditions.
Payment Process
The payment process is simple and efficient, guiding the user through a few steps to complete their purchase. Customers have the option to either create an account or checkout as a guest. The payment process includes a custom delivery fee calculator that calculates shipping costs based on the customer's address and the distance to their location. Customers can then choose from a variety of payment methods to finalize their purchase.
Performances
We utilized tools to analyze the performance of the website and identify areas for improvement. We examined metrics such as load time, bounce rate, and user engagement to ensure that the website was operating at its best. We made necessary modifications to the website to enhance its performance and provide a seamless user experience.