Timeline
Role
Tool
Company
Problem Discovery
D2C store failed to convey premium and personalization value
"How might we help customers intuitively grasp Graviers’ premium value, complete their customization journey without dropping off, and confidently convert on the D2C store?"
Goal
Help customers easily and confidently customize and purchase, boosting D2C conversions and brand trust.
Success Metrics :
Design Process
Iterative design built around user needs and customization excellence
I began by analyzing customer needs, market trends, and competitors to define clear redesign goals.
Based on business impact and development complexity, I prioritized projects starting with the 2D customization configurator, followed by the product detail pages. Each design went through wireframe testing and iteration, incorporating user feedback at every stage.
Key drivers
Optimizing the user experience to communicate premium value and drive conversions
I redesigned the journey so that customers intuitively grasp Graviers’ premium brand value, complete the customization process without drop-off, and seamlessly proceed to purchase. The redesign focused on three key areas:
2D Web Configurator
A real-time preview that instantly reflects customer selections, reducing uncertainty and building confidence throughout the customization process.
Category Page
A funnel-style navigation that guides users step-by-step from product type to design and engraving, ensuring a seamless and intuitive journey.
Product Detail Page
A streamlined flow replacing pop-ups with dropdowns, prioritizing clarity, zoomable visuals, and brand messaging for a premium and cohesive experience.
Research & Analyze
How do customers perceive Graviers’ customization and purchase experience?
I combined qualitative and quantitative analysis, while benchmarking competitor websites, to uncover the core UX issues.
#1: Qualitative Data
By reviewing hundreds of customer reviews on the website, I identified recurring pain points and key sources of confusion and frustration. This analysis highlighted areas that required design improvements and provided actionable insights to guide informed design decisions.
#2 Quantitative Data (Hotjar Analysis)
By analyzing three months of Hotjar session replays and heatmap data, I studied user behavior patterns, device usage, and drop-off points throughout the purchase journey. These findings helped me pinpoint the most critical friction points and set clear, data-backed priorities for the redesign.
CUSTOMER REVIEW
Customers inquired despite available information and also desired full customization
I identified persistent confusion around product size options and repeated requests for larger sizes not currently offered. These findings highlighted the need to clearly communicate essential information to customers while also addressing their desire for 100% customization.
HOTJAR ANALYSIS
I was able to clearly identify the key points of user drop-off and prioritize improvements
in key information visibility, click guidance, and conversion optimization during the redesign.
MARKET RESEARCH
Establishing a differentiated strategy using real-time preview and funnel navigation
Competitors provide easy customization and live previews, yet they don’t fully cover needs such as product or text size adjustments. Graviers can differentiate itself by combining a 2D customization configurator with real-time previews, a funnel that guides users to the most suitable products, delivering an integrated and seamless user experience.
Through research and competitor analysis, we discovered that users often felt uncertain during the customization process, questioning themselves — “Am I making the right choice?”
This ambiguity not only made decision-making difficult, but also weakened their confidence in the product and trust in the brand.
Given that Graviers offers a fully customizable brand experience, we realized the need for a clearer and more immediate way for users to visually understand how their choices impact the final product.
In other words, when every decision is clearly visualized and its effect can be instantly experienced, users can finally enjoy the confidence and delight of making a choice they truly trust.
Based on this insight, we defined the following design goal to guide our approach.
Clarity
Enable users to instantly see the results of their option selections through real-time previews and a clear information hierarchy, providing confidence in their purchase decisions.
Continuity
Design the experience from customization to browsing and checkout as one seamless flow, allowing users to progress naturally without drop-offs.
Less is More
Simplify customization by reducing unnecessary complexity, eliminating distractions, and offering an intuitive UI with short, straightforward actions.
Lo-fi Wireframes
Designing hi-fi screens for usability testing and validation
The focus went beyond visual design — it aimed to explore both the user journey and the underlying system structure that supports real-time customization.
I designed interactive screens that allow users to instantly preview changes on the canvas as they select different options. This approach enabled a more intuitive and efficient select–preview–confirm flow, improving the overall customization experience.
2D configurator Backend
The backend architecture was designed to handle selected option data efficiently and ensure real-time preview updates.
It was structured into two layers — a Default section applied across all products, and individual option layers for product-specific customization — providing both scalability and maintainability.
Building an effortless funnel for category navigation
I redesigned the structure around two key elements to simplify the complex category architecture and enable a seamless transition into the customization process.
Designed a funnel navigation (Product type → Design → Options) to guide users into the customization process.
Simplified complex information architecture and arranged categories and recommendations for quick comprehension.
Product Detail Page
Users struggled to find information and often abandoned the page due to unclear navigation and low trust signals.
I focused on 3 key updates to improve usability and trust.
Replaced popups with a step-by-step dropdown.
Placed key information at the top for easier access.
Added zoom and click-to-view for trust.
Based on insights from usability testing, I developed the functional specification for Graviers’ 2D Configurator to make the customization and purchase flow more intuitive.
On the backend, shared and category-specific logics were structured to support real-time updates and ensure reliable, error-free data handling.
Elegance Meets Function
Color
I introduced a beige-centered palette to express refined elegance and harmonize with Graviers’ signature navy. The palette conveys calmness and trust while reinforcing the brand’s premium identity. Applied across key pages, it elevates both visual cohesion and brand experience.
Typography
Petrona was used for titles to convey a soft yet sophisticated tone, while Inter ensured clarity and usability. The combination supports an elegant customization experience and consistent readability. A responsive type system maintains coherence across desktop and mobile.
Guiding Users Seamlessly from Discovery to Purchase
2D Web Configurator
It gives users immediate feedback and visual assurance as they design their personalized products.
Graviers’ 2D web configurator reflects every selection in real-time previews, allowing users to navigate the complexity of customization with clarity and make confident, informed decisions throughout the entire process.
Category Page
It leads users through a funnel-style navigation, moving them seamlessly from product type to design and engraving.
By breaking down the journey into clear, step-by-step stages, the category page ensures a smooth and intuitive experience, helping users feel confident and in control throughout their selection process.
Product Detail Page
It replaces pop-ups with a streamlined dropdown flow, putting emphasis on clear information, zoomable visuals, and cohesive brand messaging.
This approach ensures a premium and seamless experience, allowing users to explore products confidently while staying fully engaged with the brand.
Before vs After
By implementing a new visual hierarchy and responsive design, we enhanced overall usability.
The updated design keeps a premium tone and a consistent experience across 50 pages and 20 templates, from the landing page to the blog.
Through the Before & After, you can see how each page has transformed and evolved into a more refined user experience.
When designing complex systems in the future, I’ll focus on defining constraints that help users rather than overwhelm them, structuring UX to balance freedom with guidance.
→ In future projects, I’ll build tighter data-driven loops throughout research and prototyping to speed up learning and iteration.
Expressing a “premium” experience meant embedding elegance and clarity across interactions and flow. I learned that true sophistication comes from a smooth, effortless journey.
→ I plan to continue exploring how emotional value and usability can coexist, viewing branding and UX as a seamless continuum rather than separate domains.
Designing the 2D configurator taught me that guiding users through the right flow matters more than offering endless choices. “Less is more” builds clarity and trust.
→ When designing complex systems in the future, I’ll focus on defining constraints that help users rather than overwhelm them, structuring UX to balance freedom with guidance.
