Trek Bike Archive_UI

Single brand model year

Bike archive landing page

Bike model details page

Bike model support page

Multiple brand model year




Condensed model list




Version 1

Last modi�ed: 2012-10-22 by Matthew Litherland

Bike ArchiveUI / User Interaction Design

Matthew Litherland

Table of contents

2 - 4

2

3

4

5 - 7

5

6

7

8 - 10

8

9

10

Bike Archive: User Interface Design 2

Single brand model yearBike archive landing page

Last updated2012-10-22 by Matthew Litherland

1. Intro Headline / Copy

2. Headline support image(s)

3. Choose a year headline

4. Model year navigation

5. Current model year

6. Past model year (default)

7. Selected model year headline

8. Alphabetical list of model names

9. Past bikes not in archive

10. You might also like

1

3

4

9

10

5

6

7

8

2

3Bike Archive: User Interface Design

Single brand model yearBike archive details page


1. Pill button back to bike archive

landing page (2012 selected)

2. Year, model name

3. Color swatches with active

highlight for model colorway

shown

4. Model details tab active

5. Details headline

6. Model details

7. Limited lifetime warranty or

Register your Trek promo


1

23

5

6

1

7

4


Single brand model yearBike model support page




2. Year, model name



shown

4. Model support tab active

5. Support headline

6. Support copy

7. Additional resources headline

8. Additional resources copy

9. Additional resources links




1

23

4

5

6

7

8

9

11

10

5

Multiple brand model yearBike archive landing page

Bike Archive: User Interface Design







6. Selected model year


8. Alphabetical list of model names


10. Model year with more than one

brand


1

3

4

9

11

5

6

7

10

8

2

6



2. Year, brand B, model name



shown


5. Details headline

6. Model details




Multiple brand model yearBike model details page



1

23

5

6

8

7

4

7



2. Year, brand B, model name



shown


5. Support headline

6. Support copy







Multiple brand model year Bike model support page



1

23

4

5

6

7

8

9

11

10

1

3

4

9

10

5

6

8

2








6. Past model year (default)


8. Combined alphabetical list of

model names



Condensed model list Bike archive landing page

7

9

Condensed model list Bike model details page





2. Year, model name



shown


5. Details headline

6. Navagation for combined

models

7. Model details


1

23

4

5

6

7

8

10

Condensed model list Bike model support page





2. Year, model name



shown


5. Support headline

6. Support copy







3

1

2

4

5

6

7

8

9

11

10

Trek Bike Archive_UI

Documents

Transcript of Trek Bike Archive_UI