CyberQP
Just-in-Time Accounts
Cybersecurity
PAM
B2B
MSP
Back
Jakroo is a performance sportswear company specializing in fully personalized gear. Through their e-commerce platform, customers can design their own jerseys from scratch and have them manufactured and shipped directly. The platform also supports team storefronts, where organizations can offer pre-designed jerseys for individual purchase. Central to this experience is the product customization tool, the interface through which every design decision is made.
The existing customization tool was built on Flash, a technology that had become obsolete. It was slow to load, incompatible with mobile devices, and created significant friction at the most critical point of the purchase journey: the moment of creation.
Replacing a core product feature without compromising functionality required solving several complex design and technical problems at once.
The absence of hover states and precise cursor control on touch devices meant every interaction had to be reconsidered. The challenge was not to shrink the desktop experience, but to reimagine it for touch.
How might we enable users to customize a 3D product with full design tool functionality,
on any device, without sacrificing speed or clarity?
By rebuilding the customization tool using modern web technologies and integrating the 3D viewer directly into the product page, we believed customers would feel a stronger connection between the design they created and the physical product they would receive, reducing drop-off and increasing completion rates.
One of the most consequential design decisions on mobile was determining how to handle the competing demands of the 3D viewer and the editing controls within a limited screen. The viewport needed to give the jersey enough presence to feel immersive, while the toolset had to remain accessible without burying it behind multiple taps.
Annotated design specifications for the mobile customization interface;
documenting key decisions around navigation hierarchy, panel behaviour, and developer handoff.
The toolbar was simplified to icon-led tabs (Color, Text, Symbol, Upload) reducing cognitive load while keeping all functions reachable in a single tap. The Buy Now button was deliberately separated from the editing controls and placed top right with a distinct blue fill, ensuring it never competed visually with the customization panel.
The color combos menu presented a specific spatial challenge. On desktop it could sit persistently alongside the 3D view. On mobile, a persistent panel would obscure the jersey entirely. The solution was a collapsible panel, visible on entry to establish the feature, but hideable so users could focus on the 3D model without distraction. This decision was made in close collaboration with developers, who also informed the choice to implement color area selection as a horizontal slider, more reliable to build and easier to use on touch screens.
Designing within a 3D environment on mobile revealed that the most difficult challenges were about gesture conflict and spatial logic. Users needed to rotate and inspect a three-dimensional object while simultaneously editing design elements mapped onto its surface. Standard pinch-to-zoom and drag behaviours conflicted with the interaction model needed for canvas editing, requiring clearly defined gesture zones and mode-switching logic that felt intuitive rather than mechanical.Annotated specifications became an essential communication tool, making implicit design decisions explicit for developers with precision, ensuring the final build matched the intended interaction model.
The new 3D customization tool was successfully integrated into Jakroo's e-commerce platform, replacing the legacy Flash-based solution with a fast, responsive, and fully cross-device experience. Customers could now see their designs applied in real time to a 3D model of their product, directly within their personal portal; making the act of customization feel immediate and connected to the final manufactured item.The most telling measure of the work's quality is its longevity. Designed and shipped between 2018 and 2019, the tool remains the foundation of Jakroo's customization experience to this day, with only incremental additions such as new product models and expanded editing tools built on top of the original system. In an industry where digital products are routinely rebuilt within a few years, a six-year lifespan speaks to the soundness of the underlying design decisions.
.png)
