Problem
Outdated Custom Bike System with Unclear UI and Low Engagement
The client's original "Customer-Made Bicycle" feature was purely text-based, accompanied by static images that lacked visual hierarchy and interactive cues. Key components of the customization process appeared unclickable, making it unclear to users how to begin or navigate the experience.
The page design lacked engagement and failed to evoke the excitement typically associated with building a personalized product.
Understand Business Goals
Balance the Client Goals & User Needs
Our Team
Client /GIANT
Users Benefit
Challenge
Ambiguous requirements and minimal access to end-users
Need to design UI that complemented an immersive 3D environment
3 to 4 weeks deadline with limited user research time
Process
I conducted desktop research and discovered a bike repair game that inspired interactive design elements. This helped me understand how users engage with bike-related activities in a digital space and informed the customization features of the virtual bike shop.
I analyzed both competitor platforms and internal workflows to identify pain points and optimize user flows. This helped ensure the design would be both competitive and user-friendly, providing a seamless experience for bike customization and purchase.
User Flow
We streamlined Giant’s original 5-step customization process into 3 key steps by combining model selection, colors, and parts. The goal was to make the experience more immersive, creative, and game-like—making the bike-building journey simpler and more engaging.
Define & Develop
Wireframe Skipped
Delivered high-fidelity mockups early to gather fast feedback
Clients feedback and Validation
Client Expected a More Striking Experience
Overall process is fine and the step is good and clear. The content and bike description is correct. However they have higher expectations of visual and the 3D scene design. The current version is too boring.
What did we do afterward?
Improved UX & Interaction Flow
Improve UI and 3D scene to create a gaming like interface , immersive and add more fun
We simplified Giant’s original 5-step customization process into a streamlined 3-step flow by combining related steps. A fixed stepper was added to clearly show progress, and the layout was adjusted by moving the selection panel from left to right—freeing space and keeping the 3D bike view prominent for a smoother interaction.
UI & 3D Scene
Enhanced UI & 3D Scene for a Game-Like Experience
By combining the model, color, and parts selection stages, we streamlined Giant’s original 5-step customization process into a more intuitive 3-step flow while maintaining clarity. A fixed stepper was added to guide users, and the layout was adjusted—moving the selection panel from left to right—to optimize space and ensure the bike preview remains visible.
Feature Highlights
Step 1
Choose a Bike Model
Users begin by selecting their preferred bike model from a range of options.
Step 2
Customize Components & Colors
Users can personalize their bike by customizing each component, including colors, gear types, front and rear tires, and more.
Step 3
Review and Finalize Order
Once customization is complete, users can review their order. They can either be directed to Giant's official website for purchase or opt to schedule a meeting with a specialist at a Giant store for further assistance.
Feedback from Clients
Giant responded positively to the immersive experience and flow clarity
Giant’s were impressed how we manage to rebuild their customize cycles service which is creative and can bring a whole new shopping experience towards their customers. However, the POC project didn’t have chance to be launched and become a real product. The main problem is technical cost. In order to fulfill live stream gaming scene we use Unreal engine and 3D live streaming technology which cost on cloud service is huge.
Takeaway & What I have Learn
✦ Learned to align better with the 3D team's visual constraints
The key is keeping communication with the key man in this project is the our contact person from Giant’s who deeply knows their requirement and domain knowledge. From quickly crafting a mockup to verify our idea and gradually refine the result.
✦ Would prioritize user testing or internal surveys if more time was available
As for my self, the next time I could do better with communicate the 3D team to know what actual background might look like therefore the make sure the UI could perfectly fit with 3D scene. As for this project, the distance between UI and the 3D model bike is a little bit too close to each other. Some of the UI cover the 3D model.