Virtual Bike Shop Customized Bike Platform
Industry
Bike
Client
GIANT
Project Type
POC High-fidelity prototype with integrated 3D scene
My Role
UI/UX Designer
Duration
Oct-Nov 2024 (3-4 weeks)
My Contribution
Building up the whole prototype from O to 1/ Conduct initial brainstorming sessions / Created wireframes and high-fidelity mockup
Tools
Figma
Team
PM, Front-End Developer, 3D Engineer
Overview
Giant, a globally recognized cycling brand, wanted to refresh its online bike customization experience using modern technology. As the UI/UX designer, I led the UX direction from product brainstorming to prototype development with the engineering team to create demo versions. Our team delivered a working demo within three weeks using Unreal Engine-based 3D streaming.
My Impact
Conduct initial brainstorming sessions
Created wireframes and high-fidelity mockup
Building up the whole prototype from 0 to 1
Background
Giant as nearly 50 years old bike production company, they are trying to make their brand identity younger and keep up-to-date the latest trend in terms of creativity and technology. They are looking for a new way to improve their online customized bike service. When our team receive the demo opportunity, we were told that we only have less than three weeks to present a demo solution. Very short time frame therefore we didn’t have enough time and resources to conduct a full research on the project.
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.
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
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.
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.
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?
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.
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.
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’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.
✦ 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.