Reduced Calculator for Digital Room
Designed a reduced calculator and product landing page focused on best-selling products for the MKGT CRO test.
Company
Timeline
Platform
My Role
Web
UI Designer
November 2024
Digital Room
About the project
This project was part of a MKGT CRO (Conversion Rate Optimization) test aimed at improving the shopping experience on UPrinting’s product pages. The goal was to design a simplified product landing page with a reduced calculator—limiting the number of editable attributes to help users make quicker decisions.
Design
I designed four UI versions for this project, each with its own unique strengths. This reduced layout guides users through fewer but clearer choices, highlights product benefits, and facilitates easy comparison. Ultimately, it helps drive higher engagement and conversion rates.
Ver. 1: Options on Blurred Image
This version places the selectable options directly over a blurred product image.
Advantage: By keeping the product image visible (but blurred), it maintains a strong visual context while drawing attention to the options. It reduces visual noise and helps users stay focused on the choices without losing track of the product they’re customizing.
Ver. 2: Curtain-Style Sliding UI
This version uses a curtain-like sliding panel that opens and closes to reveal configuration options.
Advantage: The sliding motion offers a smooth and engaging interaction, while keeping the product area clean when not in use. It helps prioritize the viewing of the product and simplifies the UI, which aligns with the goal of reducing distractions and improving decision-making.
Ver. 3: Live Image Preview UI
This version instantly reflects option changes on the product image, providing real-time visual feedback.
Advantage: Users can immediately see how their choices affect the product, which increases confidence in decision-making. This interactive approach reduces uncertainty and supports better comparison, directly contributing to improved conversion rates.
Ver. 4: Card-Style Options Inside Calculator
This version places card-style options within the calculator area, accompanied by thumbnails.
Advantage: By integrating options directly into the calculator with visual thumbnails, it offers users a familiar and intuitive interface that simplifies decision-making.
Figma Prototype
You can directly experience the interactions through the Figma prototype. I created an interactive prototype of the design in Figma and included the link for easy access. Feel free to explore the user flow and functionality as intended.