PIN JUI HUANG (MICKY) 03616573 Date of Final Presentation: 08. 05 .15 1st Submission Graduate School of Web Design & New Media
l
Academy of Art University
TABLE OF CONTENTS
01
02 OVERVIEW
03 PROOF OF CONCEPT
04 STRATEGIC PROCESS
UX PROCESS
10
CONCEPT VIDEO LINK
22
MARKET RESEARCH
46
USER TESTING PLAN
05 AUTOBIOGRAPHY
11
PROTOTYPE LINK
28
COMPETITOR ANALYSIS
47
USER TESTING
06 RESUME
12
INFORMATION ARCHITECTURE
33
COMPETITOR MATRIX
48
KEY WORDS
07
THESIS ABSTRACT
13
USER TASK FLOW
34
UNIQUE POSITIONING
49
WIREFRAMES
08
STATEMENT OF INTEREST
14
TASK 1 - Cutomize Bike Information
35 INSPIRATION
50
TESTING RESULTS
16
TASK 2 - Cutomize / Save Bike
37
THE KEY USER NEEDS
19
TASK 3 - Redesign Bike / Buy Bike
38
CONTENT MAP
39
USER EXPERIENCE MAP
40
TARGET AUDIENCES
04
ELEVATOR PITCH
41 PERSONA
05
06
VISUAL PROCESS 04
MOOD BOARD
05
TYPOGRAPHY & COLOR
07
TECHINICAL PROCESS 63
TECHINICAL SPECIFICATION
CONCLUSION 70
CONCLUSION
71
NEXT STEP
06 LOGO
72
PORTFOLIO LINK
07 ICON
73
DIRECT STUDY JOURNAL HIGHLIGHTS
08 SKETCH
74
BIBLOGRAPHY
OVERVIEW ELEVATOR PITCH AUTOBIOGRAPHY RESUME THESIS ABSTRACT STATEMENT OF INTEREST
OVERRVIEW /
ELEVATOR PITCH
In San Francisco, we can see a lot of bike shops. But most of bike shops, they don’t support online customize services. “ONE GEAR” is a computer browser end first website which helps people who wants to make their customized fixed gear and single speed bikes. Also, users can know more information through this website.
5
OVERRVIEW /
AUTOBIOGAPHY
“
The best place to succeed is where you are with what you have.
”
— Charles M. Schwab
I’m from Taitung, Taiwan. When I was a child, I have showed a
I start to learn how to do coding, user testing, and design
passion for art and liked to discover new things in my life.
websites. Therefore, I understand to build a good website requires good user testing and interface. The interface
I attended Shih Chien University and my major was Computer
indicates how to use this product because the designers can’t
Simulation & Design. While in the university, I developed my
always stand next to users to teach users how to use it. I want
skill in programing and computer simulation because I like
to develop in coding, user experience, motion graphics, and
to use math to create a user-friendly environment and user
visual design in Academy of Art University.
platform. After I graduated, I decided to study web design, so I came to Academy of Art University to learn more about new
My career goal is to become a web programing designer
web technology. I am very interested in Web design & New
because I can analyze user’s needs and create useful
media because I can learn a lot of programing techniques in
websites. I want to make my design more interactive and easy
this major.
for people to use.
ONE GEAR
6
OVERRVIEW /
RESUME
MICKY HUANG / PIN JUI HUANG mickyhuang.com 415.728.5935 MICKYH29@GMAIL.COM
EDUCATION San Francisco, 2012 - 2015 Academy of Art University, MFA Web Design & New Media Taiwan, 2008 - 2011 Shin Chine University, BFA Department of Computer Simulation & Design Taiwan, 2007 - 2008 Chang Jung Christian University Department of Athleties Sports
ONE GEAR
EXPERIENCE
TECHINICAL SKILLS
ZOOMFORTH, 2015 Visual Designer, San Francisco - Web design
Software : Photoshop, Illustrator, InDesign, Dreamweaver, Flash, After Effect
REGAL SEAL International Trading Co. Ltd, 2013 Visual Designer, Taiwan - Poster design - Package design for red wine product - Layout design for product campaign
Interactive : HTML5, CSS3, PHP, JavaScript, jQuery, ActionScript3, C++
TAITUNG Hockey Team, 2012 Visual Designer, Taiwan - Brand design GRUNGE TEAM, 2010 - 2011 Front-end Developer / UI design, Taiwan - Web user interface design - Brand design - Coding (Action Script, PHP)
LANGUAGES Mandarin, English
7
OVERRVIEW /
THESIS ABSTRACT YOUR FIXED GEAR BIKE, YOUR DESIGN. PROBLEM
SOLUTION
In San Francisco, 78% of local bike shops offer customized
“One Gear” is an e-commerce website for custom fixed gear &
bike (Fixed-gear & Single-speed) service. Of those shops, only
single-speed bikes design. The main functions of this website
6% of them provide online bike customization and of those
are that users can customize and upgrade the components
6%, they just give users a simple website to see custom bike
and style of their bike all the way down to the text on the
information like color and style options. The main problem is
frame.
that this information is not enough for users to customize a bike.
“One Gear” provides a place for users to enjoy a fun and interactive bike design process. Selecting from multiple
In the 21st century, most of our everyday products can be
design offerings, users can select frame size, color, and parts
customized by consumers through the internet, such as
in an innovative 3D interface. One Gear cyclists can also
clothes, shoes, accessories, etc. Why don’t we customize our
share their custom bikes through gallery.
bikes online?
ONE GEAR
08
OVERRVIEW /
STAEMENT OF INTEREST I am a cyclist. Ever since elementary school, I have ridden
technology and design skills to build an interesting website. I
almost every day. After moving to San Francisco, I encountered
decided to build a site that would allow my target audience to
a lot of problems when I tried to assemble a fixed gear bike.
customize fixed gear & single speed bikes as my thesis project.
I want to solve the problem of assembling fixed gear bike. I tried to do the research and analysis about fixed gear & Single-speed bikes to understand every detail of their construction. I think that can help me more quickly go to a bike shop and build my dream custom bike.
I am passionate about my favorite things. I want to apply my web
ONE GEAR
PROOF OF CONCEPT CONCEPT VIDEO LINK PROTOTYPELINK INFORMATION ARCHITECTURE USER TASK FLOW TASK 1 - Customize / Buy Bike TASK 2 - Redesign / Repair Bike
10
PROOF OF CONCEPT /
CONCEPT VIDEO LINK
WATCH CONCEPT VIDEO ONE GEAR
11
PROOF OF CONCEPT /
PROTOTYPE LINK
LAUNCH PROTOTYPE ONE GEAR
12
PROOF OF CONCEPT /
INFORMATION ARCHITECTURE HOME CUSTOMIZE
ABOUT
DISCOVER
GALLERY
ACCOUNT YOUR DESIGN
BIKE INTRODUCTION
CUSTOMIZE INTRODUCTION
YOUR LIKE
ACCOUNT
CUSTOMIZE PAGE
CART REMOVE
ADD TO CART
CART
SAVE YOUR BIKE
ACCOUNT
EDIT SAVE
CHECK OUT
ONE GEAR
LIKE
ORDER SUMMARY
EDIT
13
PROOF OF CONCEPT /
USER TASK FLOW
01.
HOME
INTRODUCTION PAGE
BIKE PARTS DISCOVER
GALLERY
LEARN HOW TO CUSTOMIZE
02.
LEARN HOW TO CUSTOMIZE CHOOSE BIKE COLOR SING UP / LOG IN
03.
YOUR ACCOUNT CHECKOUT
ONE GEAR
DESIGN BIKE TYPE BIKE NAME
UPGRADE PARTS SAVE BIKE
YOUR ACCOUNT
EDIT SAVE DESIGN WAITING YOUR NEW BIKE
REDESIGN BIKE
ADD TO CART
14
PROOF OF CONCEPT /
TASK 1 - Customize Bike Information
02 / ONE GEAR ABOUT
01 / ONE GEAR HOME Home, user can see navigation menu, login, carts and learn customize buttons on this page. Also, the online chat feature.
03 / ONE GEAR DISCOVER Bike components tech specs
ONE GEAR
15
04 / ONE GEAR GALLERY User can see different user design and like or edit those bike.
05 / ONE GEAR BIKE CUSTOMIZE INFORMATION User can see all customize information before customize bike. Like bike compoments, colors, personal style. ONE GEAR
16
PROOF OF CONCEPT /
TASK 2 Customize / Save
User can select frame size, gear type and handlebar style, and each bike parts have differnt colors.
01 / ONE GEAR CUSTOMIZE PAGE 3D bike model. User can see three different sections for customize. Each sections have different features work for bike compoments. ONE GEAR
17
03 / LOGIN TO ACCOUNT POPUP If user went to save their design. User most login ONE GEAR shop
02 / SAVE YOUR DEISGN
ONE GEAR
account. After login, the bike will save to personal account.
18
04 / PERSONAL ACCOUNT User can see their design on the personal account. User can remove, edit and buy this bike.
ONE GEAR
19
PROOF OF CONCEPT /
TASK 3 Redesign / Buy
01 / PERSONAL ACCOUNT DESIGN / LIKE
02 / ADD TO CART / UPDATE YOUR DESIGN BUTTON
User can see the save design on the personal account,
When user redesign bike, that page will show update button. If user went to buy
and user can redesign their design. Also user can click
this bike just need to click add to cart button.
like to the some user design and redesign bike. ONE GEAR
20
03 / SHOPPING CART INFORMATION When user add their design to cart, user can see the some design information on this page. And user can choose different type payment (PayPal or other Credit Card)
ONE GEAR
04 / CHECKOUT User can see the checkout step.
STRATEGIC PROCESS MARKET RESEARCH COMPETITOR ANALYSIS COMPETITOR MATRIX UNIQUE POSITIONING INSPIRATION THE KEY USER NEEDS CONTENT MAP USER EXPERIENCE MAP TARGET AUDIENCES DESCRIPTION TARGET AUDIENCES PERSONA
22
STRATEGIC PROCESS /
MARKET RESEARCH RESEARCH 01.
Bike Riding Population in the United States, 2014 Source: thisbigcity.net/green-cities-better-bike-lanes
No.
2
SAN FRANCISCO 2,109,000
ONE GEAR
1
No.
NEW YORK 2,480,000
23
RESEARCH 02.
Cyclists Preference on Three Different Types of Bicycles, San Francisco, 2014 Source: www.thefixedgearworld.com
FIXED GEAR BIKE
ONE GEAR
ROAD BIKE
MOUNTAIN BIKE
24
RESEARCH 03.
ONE GEAR
Bike shops of San Francisco
25
RESEARCH 04.
Custom fixed gear & single-speed bike in San Francisco local bike shops Source: www.thefixedgearworld.com
78% San Francisco local bike shops have customize bike service.
Within 78%, only
6% of them provide online
customization service.
ONE GEAR
26
RESEARCH 05.
Price of customize Fixed Gear or Single-Speed bikes in San Francisco Source: Field research by Micky Huang
Shop
Price
Larbor fee
Shipping fee
Service
Huckleberry Bicycles
$ 700 up
$ 60 - 100
Not include
In store
Mission Bicycle
$ 850 up
$ Free
Not include
In store / Online
ONE GEAR
Freewheel Bike Shop
$ 600 up
$ 100 - 150
Not include
In store
Pedal Revolution
$ 950 up
$ 80 - 120
Not include
In store
Treat Street Bicycle Works
$650 up
$50 - 100
Not include
In store
Market Street Cycles
$ 800 up
$ 80 - 15
Not include
In store
27
RESEARCH 06.
Why do people like custom fixed gear bike? Survey by 50 people
MECHANICAL DURABILITY AND SIMPLICITY
86% EASY TERRAIN AND SHORTER TRIPS
30% FIXED GEAR BIKE AREN'T VERY COMPLICATED MACHINES
64% FOR MOST CITY RIDING, ONE GEAR IS ALL YOU NEED
56% FIXED GEAR BIKE IS THE EASIEST CUSTOMIZED BIKE
ONE GEAR
90%
28
STRATEGIC PROCESS /
COMPETITOR ANALYSIS COMPETITOR 01.
MISSION BICYCLE COMPANY
PLATFORM - Website
Mission Bicycle Company is a local fixed gear bicycle shop in San Francisco. Mission Bicycle Company was formed in 2008 with a simple premise: to build the most beautiful, practical and customizable bikes on the market. URL: www.missionbicycle.com
FEATURES - Online shop - Online customize bike system - Online Gallery
PROS - Local bike shop in San Francisco - Highly integrated features - Simple customization features bike
CONS - No clear picture or model description bike design aspects - Not enough details on every aspect of design bike
ONE GEAR
29
COMPETITOR 02.
MASHSF MASHSF is a local bike shop, they only sell a bike brand components. Also, they have online shipping service. URL: http://www.mashsf.com/
PLATFORM - Website
FEATURES - An e-commerce website - Online customize bike service
PROS - This website has a simple interface - Users can save their bike to account and share their design to Facebook
CONS - User interface is too cluttered - Doesn't have details to explanation this bike store
ONE GEAR
30
COMPETITOR 03.
MOTOSTRANO
PLATFORM - Website
MOTOSTRANO is a bike shop in San Francisco, and sell diffrent kid of bikes in shop and online. User can buy diferent bike and components from the onlien. URL: http://www.motostrano.com/default.asp
FEATURES - Online shop - Online customize bike service
PROS - This website sell different kid of bikes - For the assembly of fixed gear bike features, it has a lot of options
CONS - User interface is too cluttered - Custom bike page doesn't have enough information
ONE GEAR
31
COMPETITOR 04.
SINGLE BIKES
PLATFORM - Website
SINGLE BIKES is a bike shop in Vancouver, Canada. SINGLE BIKES designs and manufactures their own brand of fixie/Mixte style framesets, wheelsets, as well as Single speed parts. URL: http://www.singlebikes.com/
FEATURES - Online shop - Online customize bike system
PROS - This website has more fixed gear bike images on the gallery page - For the assembly of fixed gear bike features, it has a lot of options
CONS - User interface is too cluttered - Custom bike page doesn't have enough information
ONE GEAR
32
COMPETITOR 05.
STATE BICYCLE Co. State Bicycle Co. is rider-developed. In 2009, State was launched by three Arizona cycling nuts with big dreams. URL: http://www.statebicycle.com/
PLATFORM - Website
FEATURES - Online shop - User account
PROS - Beautiful and clean user interface - Explicit user shopping classifications
CONS - Doesn't give users enough bike part upgrade details - Too many types of bikes in this shop
ONE GEAR
33
STRATEGIC PROCESS /
COMPETITOR MATRIX MASHSF
3D BIKE MODEL
CIRCLE TABLE FUNCTION
BIKE PARTS INFORMATION
CHOOSE BIKE COLOR
UPGRDES BIKE PARTS
GALLERY
ONE GEAR
MOTOSTRANO`
SINGLE BIKES
MISSION BICYCLE COMPANY
ONE GEAR
34
STRATEGIC PROCESS /
UNIQUE POSITIONING
ONE GAER is a local bike shop in San
ONE GEAR will provide users a better
Users can build their personal accounts
Francisco that provide online bike
way to customize their bikes. Users can
on ONE GEAR website. They can save their
customization service.
customize their bikes with a 3D model,
designs and redesign it anytime.
and have information about how to customize a bike,
Also, users can share their designs and get inspirations from other users’ designs.
ONE GEAR
35
STRATEGIC PROCESS /
INSPIRATION INSPIRATION 01.
NIKEiD Nike has a good interface design for its customized shoe section. NikeiD website does not only offers a variety of shoe design options (size, color, user id), but also gives consumers plenty of materials to choose from. This provides a very user-friendly and customizable designing experience. URL: http://www.nike.com/us/en_us/c/nikeid
ONE GEAR
36
INSPIRATION 02.
Audi Audi has a 3D car model for user to customize, and user can choose different car type. Audi has a very clean user interface, and they give user exquisite 3D car model. User can see the customize step to customixe car, moreover user can check car model to change that design. URL: http://www.audiusa.com/
ONE GEAR
37
STRATEGIC PROCESS /
THE KEY USER NEEDS “One Gear” is an e-commerce website for custom bikes. After customizing their bike on this website and use can use personal account to save or share their bike.
Personal Account
Customsize Bike
Urban people / Customize bike lover
One Gear Website E-commerce ONE GEAR
38
STRATEGIC PROCESS /
CONTENT MAP FRAME SIZE
BIKE PRICE GEAR TYPE CUSTOMIZE BIKE
PART TYPE
HANDLEBAR STYLE
FRAME
BIKE COLOR
FORK
INFORMATION ABOUT ONEGEAR
HANDLEBAR
CUSTOMIZE SYSTEM
FRONT / BACK WHEEL
PARTS DETAIL
MAIN NAVIGATION DISCOVER BIKE
BIKE STYLE
GRIPS / TAPE
PART FEATURES
BIKE NAME FONT TYPE
BIKE SIZE SAVE BIKE
PROFILE
BIKE GALLERY LIKE
SHIPPING CART
LOGIN / SIGN IN
ORDER BIKE PROFILE
CUSTOMIZE SYSTEM
REDESIGN
REDESIGN / REPAIR SHIPPING CART
NAME ADRESS
SHIPPING INFORMATION
ACCOUNT SETTING
DESIGN BIKE
MAIL PHONE ORDER DEBILT / CREDIT CARD INFORMATION PAYMENT INFORMATION
ORDER CONFIRM
ONE GEAR
LIKE BIKE
39
STRATEGIC PROCESS /
USER EXPRIENCE MAP STAGE
INTERESTED
CUSTOMIZATION
ACCOUNT
BUY
DOING Online Search
Fixed Gear / Single Speed bike Color / Size / Parts upgrade
Personal Account
E-commerce website
THINKING
This kind of bike only has one gear. This kind of bike is popular in San Francisco.v How to get this kind of bike? How to know customized bike price?
How to check the bike frame size. How many parts can upgrade and change color. Bike customize information. Telling users each bike handlebar details?
Can I save my design to my account? How to redesign my bike or other users bike? Is users can like bike on gallery and add to account?
How much for the final customize price? Is this website only can customize bike?
OPPORTUNITY
A website about helping urban people / customized bike users to understand Fixed Gear / Single Speed Bikes more efficiently with some useful basic information.
A way to help users know what frame size fits, and telling users each kind of handlebars technical information. Show users photos to let them know each parts change & upgrade information.
Users can use the personal to save their bike design and like other users design on gallery. Also, users can see their deisgn on account and other users bike.
When users use this website, they can clearly know their custom price and they can alter their design before they checkout. This website offers free shipping.
ONE GEAR
STRATEGIC PROCESS /
TARGET AUDIENCES PRIMARY - Urban people - 25 - 35 years old - People who wants a cool and fashion bike - People who want to customize fixed gear / single speed bikes
SECONDARY - Bike shops who want to have a customize bike service for their online shopping site
STRATEGIC PROCESS /
PERSONA Some people like to design their own thing. For those fixed gear bike beginners in San Francisco, they want to customize their own bike. They interested in customization fixed gear & single-speed bikes.
42
PERSONA A
Iris Lin
“
Any suggestions for fixed gear shops here in SF?
”
Age: 25
NEEDS
Location: San Francisco
- The customize parts details
Languages: English, Mandarin
- A place can ask customize introduction - User accounts
Iris is a student in AAU and she likes to ride a bike. The first time she heard about fixed gear bike is in 2013 when she came to SF.
USER GOALS - Can save the user design - Easy to use the customize bike model
She is now a fixed gear bike beginner and she PERSONA
wants to buy her first fixed gear bike here. She hopes she can ride bike to enjoy life in SF.
USER TASK FLOW HOME
INTRODUCTION PAGE
LEARN HOW TO CUSTOMIZE UPGRADE PARTS ONE GEAR
DESIGN BIKE TYPE NAME ON BIKE FRAME
BIKE PARTS DISCOVER CHOOSE BIKE COLOR SAVE BIKE
GALLERY
43
PERSONA B
Joe. R
“
I wonder where I can get start to design my own fixed gear bike.
Age: 27
NEEDS
Location: San Francisco
- Bike customize details introduction
Languages: English
- A clear customization interface - Bike patrs upgrade
Joe is an engineer, and he lives in SF. When he lives in SF, he saw many young
USER GOALS
people ride a kind of bike. It is Fixed Gear
- Can easy to see the bike color change
Bike.
- Can easy see the bike customize parts and upgrade
PERSONA
He wants to customize his own first fixed gear bike. He thinks Fixed Gear Bike is cool and fashion bike.
USER TASK FLOW HOME CHOOSE BIKE COLOR SAVE BIKE ONE GEAR
INTRODUCTION PAGE UPGRADE PARTS
BIKE PARTS DETIALS
DESIGN BIKE
TYPE NAME ON BIKE FRAME
”
44
PERSONA C
Danny. K
“
A fixed gear bike of my own desing.
”
Age: 29
NEEDS
Location: San Francisco
- Easy to see the customize interface
Languages: English
- A clear customization interface - Bike patrs upgrade
Danny is astudent, and he lives in SF. He bought
USER GOALS
his first Fixed Gear Bike from online, but his wants to customize a Fixed
- Can easy to see the bike color change - Can easy see the bike customize parts and upgrade
Gear Bike by himself.
USER TASK FLOW HOME REDESIGN BIKE
ONE GEAR
SING UP / LOG IN BUY BIKE
CHECK YOUR ACCOUNT
EDIT SAVE DESIGN
UX PROCESS USER TESTING PLAN USER TESTING KEY WORDS WIREFRAMES TESTING RESULTS
46
UX PROCESS /
USER TESTING PLAN Phase
Time
Numbe of People / Store
Prototype
Bike store interview
Oct 18, 2014
6
N/A
Interview
Oct 19 - 20, 2014
50
Survey
Low - Fidelity paperprototype
Nov 30, 2014
5
Test with paper
Height - Fidelity paperprototype - A
Dec 18, 2014
6
Test with paper
Height - Fidelity paperprototype -B
May 12, 2015
6
Height - Fidelity paperprototype - C
Test on Invrison URL : http://invis.io/383LF1KAU
Test with cyclist Jun 26, 2015
6
URL : http://mickyhuang.com/onegear/index.html
Test on class Prototype
ONE GEAR
Jul 31, 2015
6
URL : http://mickyhuang.com/onegear/index.html
47
UX PROCESS /
USER TESTING “One Gear” customsize bike page user testing, Bike customize information, customize bike features, and user account login. by jun 05, 2015
ONE GEAR
48
UX PROCESS /
KEY WORDS DISTINCTIVENESS FASHION
CHILL YELLOW
SPORTS
SF BICYCLE COALITION COOL CREATIVITY
SINGLE-SPEED
3D BIKE MODEL LIFESTYLE
CHARACTERSTIC SIMPLE BICYCLE LOVER
ONE GEAR
SELECT
BIKE
FIXED
CUSTOMIZE PERSONALITY
49
UX PROCESS /
Wireframes - Customize Bike Page Search
CUSTOMIZE
Search
1
CUSTOMIZE FRAME Choose a frame color
Size Color
Find Your Perfect Frame Siz e
FRAME Size
GEAR
Color
HANDLEBAR
GEAR
SADDLE
HANDLEBAR
CRANK
SADDLE
CHAIN
CRANK
PEDAL
CHAIN
STYLE
PEDAL
ADD TO CART
ONE GEAR
ADD TO CART STYLE
( Yo u r h e i g h t )
50 cm
53 cm
56 cm
5’4’’ - 5’6’’ 162cm - 167cm
5’7’’ - 5’9’’ 170cm - 175cm
5’10’’ - 6’ 177cm - 182cm
59 cm
62 cm
6’1’’ - 6’3’’ 185cm - 190cm
6’3’’ - up 190cm - up
$700
1
50
UX PROCESS /
TESTING RESULTS PREVIOUS VERSION
Changed homepage design style and redesign logo.
ONE GEAR
FINAL VERSION
Added a video background and customized bike button.
51
PREVIOUS VERSION
FINAL VERSION
Maked fixed gear / single speed bikes information on the same page. and added button on bike model, users can click button to show the bike information.
ONE GEAR
52
PREVIOUS VERSION
Remover choose handlebar section.
Before user start customizing page, add customized bike information.
ONE GEAR
FINAL VERSION
53
PREVIOUS VERSION
FINAL VERSION
THE FIXIE DESIGN
$
ORDER
COMPARE PRICES
FROM
800
SIZE & SPECS FRAME SIZE
Three main
50 cm SPECS SIZE
customized
1/8 ”
COLORS
parts section.
FRAME
PARTS UPGRADES (Optional) SADDLE $ 20.00
Origin 8 Urban Aero Saddle YOUR EMAIL ADDRESS SAVE
Redesign customization section.
ONE GEAR
RATE
Main customized
User customized
colors section.
style section.
54
PREVIOUS VERSION
FINAL VERSION
THE FIXIE DESIGN
ORDER
COMPARE PRICES
ODER SUMMARY
Subtotal
$850
Shipping
FREE
Estimared Tax
$56.50
Total
$906.50
ADDRESS Country*
United States
Name*
First Name
Last Name
Street Address* Unit
Apt, Suit or Floor
City* Select
State*
Zip Code*
SHIPPING ADDRESS Ship to my Billing Address Ship to a Different Address
CONTACT INFORMATION PARTS
SIZE & SPECS
PARTS
HANDELBAR
BULLHORN
FRAME
SADDLE
Origin 8 Urban Aero
FRAME
50 cm
RIMS
STRAPS
Retrospec FGFS
SPECS
1/8”
CRANKSET CHAIN PEDALS
COLOR
UPDATEDF PARTS (option)
Phone*
(123) 456-7890
Email Address* DELIVERY PAYMENT ODER REVIEW
Remove bike customized details section.
Make a clean payment interface, and the shopping details. user can step by step to check their payment.
ONE GEAR
55
PREVIOUS VERSION
FINAL VERSION
THE FIXIE MY SAVED DESIGNS 15.07.2014 PARTS
SIZE & SPECS
PARTS
HANDELBAR
BULLHORN
FRAME
COLOR
SADDLE
UPDATEDF PARTS (option)
Origin 8 Urban Aero
FRAME
50 cm
RIMS
STRAPS
Retrospec FGFS
SPECS
1/8”
CRANKSET CHAIN PEDALS
EDIT
ORDER
10.07.2013 PARTS
SIZE & SPECS
PARTS
HANDELBAR
BULLHORN
FRAME
COLOR
SADDLE
UPDATEDF PARTS (option)
Origin 8 Urban Aero
FRAME
50 cm
RIMS
STRAPS
Retrospec FGFS
SPECS
1/8”
CRANKSET CHAIN PEDALS
EDIT
ORDER
Add user account, user can see the design and like page. And user can make their personal photo, and infromation. Previous user save design page. User onle can see their own design on the user account.
ONE GEAR
VISUAL PROCESS MOOD BOARD TYPOGRAPHY & COLOR LOGO ICONS SKETCH
57
VISUAL PROCESS /
MOOD BOARD
ONE GEAR
58
VISUAL PROCESS /
TYPOGRAPHY & COLOR COLOR SCHEME
T Y P E FAC E R: 041 G: 041 B: 041
C: M: Y: K:
71 65 64 67
P R O X I M A N O VA
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
R: 244 G: 180 B: 42
C: M: Y: K:
04 31 96 00
C: M: Y: K:
82 43 03 00
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz ROCKWEEL
R: 031 G: 127 B: 189
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz R: 033 G: 104 B: 166
ONE GEAR
C: M: Y: K:
89 60 09 00
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
59
VISUAL PROCESS /
LOGO PREVIOUS VERSION
THE FIXIE THE FIXIE
THE FIXIE
ONE GEAR
FINAL VERSION
60
VISUAL PROCESS /
ICONS One Gear Main Icons User / Cart / Chevron Down / Chat / Go Top
One Gear Gallery Icons Like / Edit / Comment
One Gear Social Network Icons Facebook / TWitter / Instagram /Google Plus
One Gear Contact Information Icons Phone / Location / Time
ONE GEAR
61
VISUAL PROCESS /
SKETCH
ONE GEAR
TECHNICAL PROCESS TECHNICAL SPECIFICATIONS
63
TECHNICAL PROCESS /
TECHNICAL SPECIFICATIONS SPECIFICATIONS 01.
Ps
Ai
Ae
Visual design. “ONE GEAR”
Using HTML, CSS, JavaScript
fonts, colors, icon, images, and
to create a 3D customize fixed
user interface.
gear and single speed bike
HTML5 / CSS3
Photoshop / Illustrator / After Effects
website.
& three.js 3D MAX
3D BIKE MODEL Save 3D obj file for each bike parts.
Blender
JSON Export 3D obj file to JOSN file, and change to JavaScript file.
JavaScript & three.js By using JacaScript ( three.js), the 3D model can smoothly run on the HTML website.
ONE GEAR
64
SPECIFICATIONS 02.
ONE GEAR 3D model
Blender 2.75a Blender is being made by hundreds of people from around the world; by studios and individual artists, professionals and hobbyists, scientists, students, VFX experts, animators, game artists, modders, and the list goes on. URL: www.blender.org/
ONE GEAR
65
SPECIFICATIONS 03.
ONE GEAR Prototype HTML, CSS, JS resources
Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. URL: getbootstrap.com/
Bootstrap javaScript Bring Bootstrap’s components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one. URL: getbootstrap.com/javascript/
Bootstrap UI 0.13.1 Bootstrap components written in pure AngularJS by the AngularUI Team. URL: angular-ui.github.io/bootstrap/ ONE GEAR
66
SPECIFICATIONS 04.
ONE GEAR Prototype HTML, CSS, JS resources
jQuery 2.1.1 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. URL: jquery.com/
jQuery UI 1.11.4 jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. URL: jqueryui.com/
ONE GEAR
67
SPECIFICATIONS 05.
ONE GEAR Prototype 3D model resources
three.js Three.js is a library that makes WebGL - 3D in the browser - easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that. URL: threejs.org/
ONE GEAR
68
SPECIFICATIONS 06.
ONE GEAR 3D model JavaScript
3D model js on html
ONE GEAR
CONCLUSION CONCLUSION NEXT STEP PORTFOLIO LINK DIRECT STUDY JOURNAL HIGHLIGHTS BIBLOGRAPHY
70
CONCLUSION /
CONCLUSION ONE GEAR provides a platform for groups who want a
A big challenge, I decided to use a 3D bike model in my
customized fixed gear or single speed bike. Users can get
custom bike site. I did a lot of research on custom page
more information through the custom bike from on this site.
design and UI / UX. I tried to design a clean interface for the
ONE GEAR’s design concept allows beginners to quickly
user to customize their bike. Also, I learned a lot about 3D
understand and build their personal bike. This website
Javascript using the three.js library resources. I went through
provides a personal account and gallery so users can get
many iterations testing the 3D model. I wanted the 3D model
more inspiration as they customize their bike.
to runs very smoothly on the site. I believe this is a very cool website. Moreover, I got to do a lot of thinking on UI / UX
Building a customized bike is difficult. You need a lot of
design. I know I want to be a front end web designer, and
information before you can even begin. First you need to
learning about code
understand the differences between fixed gear and single speed. Second you need to know what bike parts fixed gear and single speed bikes need. Finally you must know your frame size you need to choose the gear type (fixed gear or single speed). With the information collected in the process, I met many friends and bike shop workers. They gave me a lot of web design advice and inspiration.
ONE GEAR
is the first step.
71
CONCLUSION /
IN THE FUTURE In the future, ONE GEAR will have responsive desgin that can be used on mobile devices. Users will be able to cutomized their bike anywhere, anytime.
ONE GEAR
72
CONCLUSION /
PORTFOLIO LINK
GO TO MY WEBSITE
ONE GEAR
73
CONCLUSION /
DIRECT STUDY JOURNAL HIGHLIGHTS Responsive Web Class GDS Journal URL: www.mickyhuang.com/gds_journal/ www.tumblr.com/blog/micky-gdsrw UX Class GDS Journal URL: www.tumblr.com/blog/micky-gdsux Visual Design Class GDS Journal URL: mickyhuang.com/style_guide/index.html
ONE GEAR
74
CONCLUSION /
BIBLOGRAPHY RESEARCH www.nike.com/us/en_us/c/nikeid?cp=usns_kw_AL!1778!3!34161622022!b!!g!nikeid%20com!c thisbigcity.net/green-cities-better-bike-lanes www.thefixedgearworld.com www.reddit.com/r/AskReddit/comments/gsbtk/why_do_people_ride_fixed_gear_bikes_in_the_city/ IMAGE www.popsugar.com/photo-gallery/30844322/August-2010-Joseph-Gordon-Levitt-rode-fixed-gear-bike-while www.flickr.com/photos/67996869@N00/14593724904/in/pool-singlespeed/ www.pedalroom.com/bike/raleigh-professional-1803 hypebeast.com/2009/8/carnival-tokyo-x-kinfolk-fixed-gear-bike www.behance.net COMPETITOR RESEARCH www.bigshotbikes.com www.missionbicycle.com www.fixiestudio.com www.singlebikes.com
ONE GEAR
75
ONE GEAR