E-commerce DTC Solution
for PVC Tile Manufacturer
Mobile Web, WebAR
Launched in August 2022
50% of Shipping Labor Reduced
Project Overview
A direct-to-customer solution with WebAR product preview features that enables customers to visualize and interact with materials in their own environment using mobile devices, reducing 50% of shipping labor.
Problem
The traditional tile sales process relies heavily on local retailers and physical samples.
During product selection, customers face a slow and inconvenient experience due to repeated sample requests and returns, while manufacturers absorb high shipping labor costs and significant material waste.
These inefficiencies reveal a growing need for a digital transformation that streamlines product evaluation, reduces waste, and modernizes the purchasing experience.
Role
Product Design Intern
Company
TRONNOVATE Design Laboratory
Team
3 Product Designer
1 Developer
Responsibility
Led UX research and experience design for a WebAR tile preview experience to streamline sample ordering.
Built production-read prototype for proposal pitching to stakeholder support visualized the experience design.
How do customers purchase tiles?
Through ethnographic interviews, we identified key pain points in this industry.
Typically, the material-selection process requires two rounds of sample shipping.
Customer visit the retailer store in person, request for a physical sample book. (For free)
Comparing the texture in the sample book with their place, contact the retailer for shipping selected 1:1 samples.
Try on the tile in the designated site.
Request and ship the final texture from the company.
Turn in the unwanted samples in the same delivery.
Pain Points of Stakeholders – What’s on Their Minds?
Through further interviews, we gained insight into the challenges faced by both Sunkite CORP and their customers.
Problem Statements
For Manufacturer (Sunkite CORP)
How might we optimize Sunkite CORP’s sales channel to reduce sample waste and shipping labor?
For Customer
How might we help customers select the right tile intuitively without geographical limitations?
Design Ideations
Shipping and returning tile samples is time-consuming.
We focusing on the solution that optimized the selection accuracy and lower the product returning rate.
Solution 01: Mini sample cards
Inspired by paint color samples, there's a possibility to make a sample book into a similar format using real tile materials to save the sample waste. Purchased the sample card for a small amount of cost as a discount for the selected purchase.
Solution 02: AR product preview (Selected)
Applying AR technology to product preview features provides an opportunity to improve the selection process.
The proposal been selected due to technical feasibility, we seeing the opportunity to embed this feature in mobile web.
Solution Storyboard
Experience different tile materials instantly with AR filters, eliminating wait times.
With this approach, only one physical sample shipment is needed.
Customer browsing products on the website with real product scenarios shoots on the website for reference.
Use the AR filter to intuitively test different tile textures in real time, allowing you to find your ideal match quickly without ever needing to visit a retailer shop.
Once confirmed, the tiles are shipped directly to your location, completing the hassle-free digital experience.
Wireframing
Identifying the optimal moment to introduce AR preview features within the mobile website flow.
Prototype and Challenge
Usability testing revealed differences between digital renderings and real-world lighting.
To address this, the team conducted product photography in actual environments to ensure AR previews accurately reflect real lighting conditions.
AR digital modeling
Modeling the digital model in .usdz format.
Align the patterns and the diameter setting.
Usability Testing
User testing with colleagues on different devices (IOS/ Android).
The rendered model colors were off from the actual tiles.
Matching digital and physical
Having product shoots in real-life environment as the reference to adjust the virtual renders.
Product Launch
Landing Page
Scenario slideshow with company mission and values.
Showcasing the brand image and product quality.
Product Category Section
Layout featuring product series, best sellers, and potential promotions. Product scenario shots are used as card components for a quick understanding of product attributes and use cases.
Product Details Page
High screen ratio of single tile texture and scenario shot, featuring 3D models for tile up example.
AR Filter Preview (design proposal)
Intuitive interaction allows customers to try different textures and take screenshots for easy comparison. This saves on sample shipping costs and the time/effort of tiling up samples for customer evaluation.
This feature didn't publish due to development cost.
Real-time environment light adjustment (design proposal)
Customers can adjust the environment lighting for the AR 3D model to match their physical surroundings. This feature would allow for the best possible match between the digital and physical shaders.
This feature didn't publish due to development cost.
Business Impact
Boost Customer Experience
Simplified the complex purchasing process with a more intuitive customer experience.
Lower Shipping Cost & Labor
Reduced sample waste and saved 50% of shipping costs and labor through the DTC solution.
Borden the Business
Broke geographical resale limitations and expanded the business nationwide.