USER RESEARCH

SEE PROTOTYPE

TANGRAM

Democratizing Custom
Bicycle Building Experience

Infos

PROJECT BACKGROUND
Google UX Design

PROJECT TYPE
Website

PROJECT TOOLS
Figma
Photoshop
Illustrator

ROLE
UX Researcher
UX Designer
UI Designer

RESPONSABILITIES
Interviews
Paper and Digital Wireframing
Prototyping
Usability Studies
Accounting for Accessibility
Design Iterations

PROJECT TIMELINE
2 months

@2023

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

Custom bike seekers face a frustrating dilemma: mass-market options don't match their specific needs or style, while professional custom builds are prohibitively expensive and require technical expertise. Adaptive cyclists and those with unique requirements often find no suitable options at all, forcing most riders to compromise or give up on customization entirely.

Solution

Tangram's online platform makes custom bike building accessible through an intuitive interface with clear guidance, compatibility checks, and visual previews. Customers choose from pre-curated packages or fully custom builds, supported by integrated tutorials that demystify the process. Every bike receives professional assembly and testing, ensuring quality regardless of the builder's expertise.

Process

Analysis

Briefing
User persona
JTBD
Functional analysis

Research

User flow & CJM
Information architecture
User interview
Competitive analysis

Prototyping

Service structure
Functional prototype
Wireframes
Technical specification

Design

Visual concept
Design system
Icon design

Testing

Main flow testing
Interactive prototype
Specification

Ideate

Step-by-Step Tangram Bike Building Process

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.

Designing Tangram's website

Visual identity

SOLUTION
Breaking Down Barriers to Bike Customization

Tangram democratizes custom bike building by offering dedicated adaptive cycling options with full ergonomic customization that traditional shops lack, while making bespoke bikes affordable through transparent pricing and flexible budgeting tools. The platform's real-time cost tracker lets users prioritize key components and choose cost-effective alternatives elsewhere, while educational resources and intuitive guidance make technical customization accessible to everyone regardless of ability, experience, or 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.

Customization Tools

What Tangram solves:

auto_awesome Intuitive online bike builder with real-time 3D visualization

auto_awesome Flexible customization levels (pre-configured, semi-custom, fully custom)

auto_awesome Smart compatibility checking to prevent part mismatches

auto_awesome Dedicated adaptive cycling options with ergonomic customization

Impact:

Anyone can confidently build their perfect bike without technical expertise or costly mistakes. Real-time visualization, flexible customization, and adaptive options make personalized bikes accessible to all. The result is a bike truly tailored to individual needs, abilities, and preferences.

Pricing & Budget Management

What Tangram solves:

auto_awesome Dynamic budget tracker with transparent, component-level pricing

auto_awesome Budget optimizer suggesting alternatives at different price points

auto_awesome Real-time cost updates as components are selected

Impact:

Complete pricing transparency eliminates surprise costs and enables smart trade-offs. Users build their dream bike within budget by seeing exactly where money goes and exploring alternatives at different price points. The result is maximum value without compromise or regret.

Guidance & Education

What Tangram solves:

auto_awesome Personalized recommendations based on riding style and needs

auto_awesome Educational tooltips and tutorials demystifying technical terminology

auto_awesome Component comparison tools highlighting performance and price differences

auto_awesome Automated fit verification based on user measurements

Impact:

Tangram removes knowledge barriers, transforming novices into confident builders who understand their choices. Personalized recommendations and fit verification ensure the bike matches both riding style and body. The result is a perfectly tailored bike built with understanding, not guesswork.

Quality & Delivery

What Tangram solves:

auto_awesome Professional assembly and quality testing for every build

auto_awesome Assembly progress tracking with photo updates

auto_awesome Personalized maintenance guides specific to each build

Impact:

Every custom bike meets professional standards with quality assurance and transparency. Customers receive a meticulously assembled, tested bike ready to ride immediately, plus personalized maintenance guides for long-term care. The result is professional-grade quality with zero assembly stress or uncertainty.

Community & Sharing

What Tangram solves:

auto_awesome Social media sharing of 3D bike renders

auto_awesome Community platform for sharing builds and experiences

Impact:

Users showcase their unique designs and connect with fellow riders, creating pride and community. The result is ongoing inspiration, feedback, and support that enhances the entire customization experience.