Tangram
A bike as unique as you.
Project Type
Independent Concept Project
Role
UI/UX Designer & Visual Designer
Scope
Product Concept
UX/UI Design
Visual Identity
Interactive Prototypin
Tools
Figma
Adobe Illustrator
Tangram is a fictional e-commerce concept that reimagines the experience of building a custom bicycle online.Combining a bold visual identity with a guided digital interface, the project explores how complex customization can become a more intuitive, engaging, and accessible experience.
01 — THE CHALLENGE
More choice shouldn't mean more complexity.
Customizing a bicycle opens up countless possibilities, but technical specifications, compatibility requirements, and changing costs can make the process difficult to navigate.
The challenge was to make these decisions easier without limiting creative freedom.
02 — THE IDEA
Different pieces.
One perfect fit.
Inspired by the geometric puzzle, Tangram turns individual components into a cohesive whole. The same principle shapes the experience: each choice contributes to a bicycle built around the rider's needs, preferences, and budget.The identity turns that idea into a system. Triangles became the brand's building blocks, repeated as a pattern and tucked into the logo mark.
03 — VISUAL IDENTITY
A system built to move.
The visual language translates the modular nature of bicycle building into bold geometry, confident typography, and a high-contrast palette. A flexible system brings energy to the brand while keeping the digital experience clear and consistent.
04 — THE DIGITAL EXPERIENCE
From possibility to personal.
Tangram brings the customization journey into a single, visually guided experience. Riders can explore options, understand their impact, and move from an initial idea toward a complete bicycle with greater confidence.
Based on their riding preferences, experience, and priorities, riders receive a curated selection of bicycles tailored to their needs. Clear comparisons help them explore suitable options and confidently choose a starting point for customization.
05 — PERSONALIZED START
The right bike starts with the right questions.
A short introductory questionnaire helps riders identify their goals, riding habits, and preferences before choosing components. By starting with the person rather than the product catalog, Tangram creates a more relevant starting point.
06 — THE CONFIGURATOR
One decision at a time.
Rather than presenting every technical option at once, the builder introduces components progressively. A clear step-by-step structure keeps the experience manageable, while a central bicycle preview connects each decision to the evolving build.
07 — GUIDANCE & COMPATIBILITY
Confidence in every choice.
Contextual explanations, fit recommendations, and compatibility feedback help riders understand their options without leaving the builder. Technical information becomes useful at the moment it matters, supporting decisions rather than interrupting them.
The Ride Concierge supports riders throughout customization, offering guidance on components, compatibility, fit, and adaptive options, with access to expert advice when needed.
08 — PRICING & CONTROL
Every choice, clearly accounted for.
A continuously visible budget overview helps riders understand how component selections affect the overall cost. By keeping pricing connected to the customization process, Tangram makes trade-offs easier to evaluate.
09 — Your Build, Coming Together
Made by you. Built for you.
Every selection comes together in a clear, interactive overview. Riders can review their chosen components, check compatibility, and track the total cost of their build before moving toward the final configuration.
User-Flow
A guided journey from discovery to delivery
The experience is structured to make complex decisions feel manageable. Riders can begin with personalized guidance or explore independently, then progressively refine their build with compatibility checks and transparent pricing.
Low-fidelity prototype: The Ideal Tangram Journey
Reflection
Tangram was an exploration of how visual design and interaction design can work together to make a technical process more approachable. The concept demonstrates a cohesive direction for guided customization, while usability testing and technical validation would be the next steps toward a real product.
More projects
