Dave Mearsheimer
Product Cards
(Mitutoyo Concept)
Redesigning template blocks within a custom theme to address repetitive elements, low interaction, and admin customization concerns.
.png)
.png)
The mission:
Design WP Block that is 1. Customizable 2. Code Efficient 3. Easy to Cusotmize
The journey to create the Product Card block began with a deep understanding of the client's needs and the capabilities of the WordPress Gutenberg editor as well as cross referencing the existing product with the negative stats collected. The initial phase involved extensive research into the latest design trends, user experience best practices, and the specific requirements of the precision manufacturing industry.
Tools Used:
-
Figma: This versatile design tool allowed me to create high-fidelity mockups, experiment with different layouts, and collaborate effectively with the client.
-
WordPress Gutenberg Editor: This innovative editor provided the foundation for the block, allowing me to leverage its block-based structure and customization options.
It should be noted for practical implementation a Developer would be needed for the server-side logic and database interactions.
Through rigorous testing across 34 iterations, I achieved a remarkable 124.4% improvement in the time required to design individual blocks (It should be noted this doesn't show how poorly optimized the process was initially). This streamlined process not only increased efficiency but also allowed for greater creativity and innovation. Furthermore, the optimized code resulted in a an average of 15% faster load times, enhancing the overall user experience.
By combining customization, code efficiency, and user-friendliness, I successfully developed a Product Card block that is both powerful and easy to use. This block empowers the small team to create stunning product displays that captivate their audience and drive conversions.
Stats + Research
4
New Customization Options
Using the new Gutenberg theme in WP, WP Admins could customize 4 additional features including, background image, font color, font size, and card layout.
15%
Faster Load Times
Deferring off screen images and cleaning up the JavaScript lead to a fast content paint by users.
.png)
124%
Faster Design Time
Time to customize card by content manager decreased by and avg of 124.4% over 34 comparisons
Not just a concept, but practical for all.
Why Concepts like these are important.
These concepts might seem a bit theoretical, but they have a significant impact on real-world user experiences. In UX design, many issues are too subtle for developers/designers to catch. Instead, we use data-driven insights and user feedback to highlight areas for improvement.
For instance, in this case, statistical analysis highlighted opportunities to optimize site speed and simplify page layouts. By addressing these issues, we can significantly enhance user satisfaction and engagement. Studies have shown that a 1-second delay in page load time can result in a 7% decrease in conversions.
