LOADING, PLEASE WAIT..

Tangram

Democratizing custom bicycle
building experience

Infos

Project Background

Google UX Design

Project Type

Identity
Art Direction
Website

Tools

Figma
Photoshop
Illustrator

Role

UX Research
UX & UI Design

Date

@2025

     Tangram is an innovative online bicycle shop that empowers riders of all skill levels to design and build personalized bikes tailored to their specific needs. By combining an intuitive self-building platform with expert-level customization options, Tangram serves a diverse community ranging from urban commuters to weekend adventurers and trail enthusiasts.

Problem

Off-the-shelf bikes force trade-offs on fit and performance. Going custom means navigating components, compatibility, and pricing most riders don't understand, so they either overpay through a shop or give up.

Solution

A guided builder that starts from the rider's needs, checks compatibility in real time, shows cost as it changes, and explains every technical term, then assembles and tests the bike professionally before it ships.

Tangram's

Visual identity

Tangram logo animation on black background, GIF file
Tangram logo wordmark on a black background with repeating green triangle pattern
Tangram brand color palette showing black, green, and off-white swatches with hex codes
Tangram brand typography: Russo One and Inter font pairing with weight variations

SOLUTION
Breaking Down Barriers to Bike Customization

Tangram makes custom bike building more accessible through guided customization, adaptive cycling options, transparent pricing, and real-time budgeting tools. Educational resources and intuitive guidance help riders confidently create a bike that fits their needs and budget.

The Result:

Tangram achieves exceptional customer satisfaction by balancing guided customization with creative freedom. A thriving community sharing builds and experiences creates a feedback loop that continuously improves the platform and strengthens user loyalty.

Features Breakdown

Customization Tools

Riders shape their ideal bike without needing technical expertise, guided by real-time visualization and adaptive options at every step.

Pricing & Budget Management

Real-time compatibility checks remove the fear of costly mistakes, so riders can build within budget and still get exactly what they want.

Guidance & Education

By explaining every choice along the way, Tangram turns first-time builders into confident ones, matching each recommendation to riding style and fit.

Quality & Delivery

Every bike ships fully assembled and tested to professional standards, backed by a personalized maintenance guide for the long run.

Community & Sharing

A growing community of riders sharing their builds keeps the platform improving, one story and one bike at a time.

Selling confidence, not configuration

Tangram reframes bike customization as an end-to-end product experience where guidance does the heavy lifting. By replacing the rider's fear of choosing wrong with guardrails, transparency, and plain language, the concept is designed to lower the barrier to custom builds, and to be tested, not assumed.

Ideate

Building the Perfect Bike, Step by Step

Customers start with a quick questionnaire about their riding style and needs, receiving a personalized starting point.

As they build, real-time 3D visualization shows their bike taking shape while compatibility checks prevent errors and a budget tracker shows costs.

Educational tooltips explain technical terms, and comparison tools clarify component trade-offs. The platform suggests fit adjustments based on their measurements.

After ordering, they track professional assembly through photos and updates, then receive their bike fully built, tested, and ready to ride with a personalized guide.

User Flow

Low-fidelity prototype

The Ideal Tangram Journey

I focused on creating the key screens showing Sam's complete journey from landing on the website to purchasing his personalized bike, covering the questionnaire, frame selection, component building, review, fit check, and checkout process.

More projects

[ UX/UI ]
[ Product ]
[ Brand ]
[ Mobile ]

2024

[ UX RESEARCH ]
[ HUMAN-CENTERED DESIGN ]
[ PRODUCT DESIGN ]
[ ACCESSIBILITY ]

2024

[ IDENTITY ]
[ ART DIRECTION ]
[ VISUAL IDENTITY ]

2019

[ IDENTITY ]
[ Business Collateral Design ]
[ WEB ]

2019