KwantaC_MidpointBookReduce (/file

Transcription

“Any sufficiently advanced technology is
indistinguishable from magic.”-Arthur C. Clarke
TABLE OF CONTENTS
Autobiography
Resume
Portfolio
Thesis Abstract
Statement of Interest
Inspirations
Thesis Project Proposal
Proof of Concept
Technical Specifications
Visual Design
Timeline
Usability Testing
Bibliography
1
2
3-7
8-11
12-13
14-15
16-36
37-53
54-56
57-60
61-62
63
64
AUTOBIOGRAPHY
My name is Kwanta Chetthasombat. I am 26 year-old. I was born in
Thailand. I got a bachelor degree in Information and Communication
Engineering at Chulalongkorn University. When I was studying in the
second year, I started to be interested in design, so I took many
design-related classes both inside and outside of the university. I took
Certificate Course in Interior and Product Design at Chanapatana
International Institute of Design which is a branch school from Florence,
Italy. I also took Computer Graphic and UI Design for my elective classes
in my fourth year.
My senior project was iPhone application that can track restaurants
queue in a mall. It can also give users a shortest path from where they are
at to the restaurant. This is very challenging because it is an indoor way
finding application.
After I graduated, I did internship as a web developer for three months
and another one as a web designer for a month. This is where I want to
take designing skill seriously.
My goal is to become an amazing teacher. I also want to open up my own
application development company as if to keep me update to technology.
I love the scence of be able to solve those coding problem. It really is
challenging.
Page 1
RESUME
Kwanta Chetthasombat
EDUCATION
[email protected] | 415.987.2394 |
641 Post Street, San Francisco, California
Chulalongkorn University
BE, Information and Communication Engineering, 2007–2011
Chanapatana International Design Institute
Certificate, Interior and Product Design, 2009–2011
EXPERIENCE
Intern
Atapy.co.,LTD, 2012
Web Developer
True Corporation Public Company Limited, 2010
Developed and analysed the used of websites,
Department of Customer Management
SKILLS
Programming Lauange
Java
C++
MySQL
PHP
HTML
XML
CSS
Java Script
JQuery
OpenCV
OpenGL
Action Script
Software
Xcode
Eclipse
Photoshop
Illustrator
After Effect
Flash
Dreamweaver
3ds Max
AutoCAD
GIMP
Blender
Page 2
PORTFOLIO
PORTFOLIO 1/4
Art title: Haruki Murakami
Class name: Inside Programming
Instructor: Dave Kanter
Tool: HTML, CSS, JavaScript, JQuery
Semester: Fall 2012
www.hnamwan.com/InsideProgramming/Murakami
Art title: CA Vipasana Meditation Center
Class name: Web Technology I
Instructor: Mark Badger
Semester: Fall 2012
www.hnamwan.com/cavipassana/index.html
Page 4
PORTFOLIO 2/4
Art title: My Favorite Artists
Semester: Fall 2012
Art title: Recipes Site
Semester: Fall 2012
www.hnamwan.com/WebTech/KwantaChetthasombat_Artist/pa
ges/StarckDid.html
www.hnamwan.com/WebTech/myRecipes/index.html
Page 5
PORTFOLIO 3/4
Art title: The Crooked Milk Pudding
Class name: Time Based Media
Tool: Adobe Flash
Semester: Spring 2013
Art title: My Favorite Thai Restaurant
Tool: Adobe Flash
www.hnamwan.com/flash/kwanta_craneStory.swf
Page 6
PORTFOLIO 4/4
Art title: Wandervation Prototype
Class name: Mobile Web Technology
Instructor: Dave Kanter
Tool: PHP, jQuery Mobile, jQuery UI, Google Map plugin
www.hnamwan.com/mobileweb/wandervation
Page 7
Art title: How to instal flash to iOS device.
Tool: Adobe Flash
THESIS ABSTRACT
Page 8
THESIS ABSTRACT
Wandervation is a way finding mobile first responsive web application. It
gives an alternative way to commute due to the steepness of the route.
For bicyclists, it allows users to select hill and road type option for the
smoothness and safety. It will generate multiple results for users to select.
On the map, the route will highlight in color indicators which represent
the steepness of each road along the path. Lastly, users can save there
favorite results for the future use.
Page 9
THE PROBLEMS
The hill, landscape of the city, as everyone knows San Francisco is
famous for its hills. According to "Hills of San Francisco," published
in 1959 by Chronicle Publishing, there are more than 50 hills within
city limits. Some neighborhoods are named after the hill on which
they are situated. Near the geographic center of the city, southwest
of the downtown area, are a series of less densely populated hills. It
is really hard to go from place to place in San Francisco without
facing one of those hills. They may have a smoother way to go.
Page 10
THE SOLUTIONS
Provide a way fiding tool for users to find a less steep route.
Users can choose how steep they want to go. The route must
show the steepness of the route.
“There's a hill up into the Haight... It's not that far
away, but I don't go there and I think of it as distant,
even though it's not.”
Page 11
STATEMENT OF INTEREST
Page 12
STATEMENT OF INTEREST
San Francisco is famous for its hills. According to “Hills of San
Francisco,” published in 1959 by Chronicle Publishing, there are
more than 50 hills within city limits. Some neighborhoods are
named after the hill on which they are situated, including Nob Hill,
Potrero Hill, and Russian Hill. Near the geographic center of the city,
southwest of the downtown area, are a series of less densely
populated hills.
Going from place to place in San Francisco by only looking at the
map cannot tell which way is more steep than the others. Some
people prefer to go for longer distance but less steep.
I would like to create a mobile first responsive web application as a
way finding tool for people who prefer less steep route than the
shortest one. This web application will enable bicyclist users to
select the hill options (avoid all hills, reasonable hills, and take me up
the hills) and type of route(mostly bike lanes, some bike lanes, and
most direct route). This will give multiple results to choose. Results
for bicyclist is in 2 miles different from the shortest one. Results for
pedestrian is in 1 mile different from the shortest one. Users can
also see the steepness of the route along the path highlight in colors
indicator which represent different grade of the hill scales from 0-10
%(http://www.roberts-1.com/bikehudson/r/m/hilliness/index.htm#gr
ade). For this thesis project I will simplify those down to 3 to 5
colors indicator. Lastly, users can save favorite route to personal
favorite page for the future use.
Page 13
INFLUENCES
Page 14
INFLUENCES
Google Bike Map
I love the interaction of an application.
Page 15
Amarpai
This is an open source bike planner responsive
website. It is well functional. It combines all
open source map provider to a better one.
Nike Run
This influences me on how the highlight
running path in different color indicates the
speed of the runner.
THESIS PROJECT PROPOSAL
Page 16
THESIS PROJECT PROPOSAL
Wandervation is a way finding tool that helps ease bicyclists
and pedestrians life by generating a route due to the steepness
of the road and bike friendly path. What challenge me about
this project is combining multiple open source provider to
make a better way finding especially for bike. This application
will be a mobile first responsive web application because from
my survey almost everyone prefer to use smartphone as their
first computer. Also, this application is a way finding application
so the major use will be anywhere anytime instantaneously.
Smartphones have so many operation system and screen size
so it would be nice to make it responsive.
Page 17
RESEARCH 1/9
Topography and Bicycle Travel Patterns show that there is a way to
avoide the hill.
http://www.sfmta.com
Page 18
RESEARCH 2/9
San Francisco is trying to increase percentage of communicationg
by bike from 3.5%-8-10% and walk from 17.5%-19-21%
Page 19
RESEARCH 3/9
“There's a hill up into the Haight... It's not that far away, but I don't go
there and I think of it as distant, even though it's not.”
http://groups.ischool.berkeley.edu/mentalmaps/barriers.html
Page 20
RESEARCH 4/9
Bicycle has the highest benefits and lowest emission.
Page 21
RESEARCH 5/9
Number of bicycle crashes trend to increase.
It is safer to ride on the bike route.
Page 22
RESEARCH 6/9
This map shows the streets in San Francisco colored by slope.
http://www.datapointed.net/2009/11/the-steeps-of-san-francisco/
Page 23
January 2012
The majority is age 25-34 followed by 35-44
http://www.go-gulf.com/blog/smartphone/
RESEARCH 7/9
June 2012
Age 18-44 seems to take over 50% of the total.
http://www.walkinginfo.org/facts/statistics.cfm
Page 24
RESEARCH 8/9
Majority of the bicyclist is around the age of 5-15 followed by
16-24 and 25-39.
http://www.bicyclinginfo.org/facts/statistics.cfm
Page 25
Majority of the bicyclist is around the age of 5-15 followed by
16-24 and 25-39.
RESEARCH 9/9
http://policy.rutgers.edu/faculty/pucher/TRA960_01April2011.pdf
Page 26
TARGET AUDIENCE
Primary
Target audience is male bicyclist who has a smartphone.
He prefers to ride a bike on a smooth route than shortest one.
The age is 21 to 44 years old.
Secondary
Target audience is female pedestrian who has a smartphone.
She prefers to walk on a smoother route than shortest one.
The age is 21 to 44 years old.
Page 27
SURVEY
Have you experienced with steep road?
16
22
Users N = 38
28
10
Do you use any bike app. to find direction?
1
37
How do you normally find direction?
Google map [18]
Other navigation app. [4]
Map [2]
GPS [2]
Guess [1]
Follow Others [1]
No Answer [10]
Page 28
PERSONAS 1/3
John
Tourist
Age: 32
Device: Samsung Galaxy SIII
NEEDS
1.To find a route to bike.
2.To find a smoothest route.
3. A tool that estimate time to bike.
4. To see steepness of each route.
John is a tourist from Amsterdam. He loves to bike. He decided
to use a bike as his transportation when he is in San Francisco
but he has never ridden on hills before and the city is too hilly
for him. He wishes he knew the city better so he could
chooses smoother routes and explore the city in a fun and
easy fashion.
“I am a bike-aholic. I love to tour cities on a bike because you
really get a feel for the place. I’m sure there are flatter roads in
San Francisco, but how do I find them?”
Page 29
PERSONAS 2/3
Sam
College Student
Age: 22
Device: LG G2
NEEDS
1.To find a route for bike in San Francisco.
2. To be able to choose route that goes on which street
because sometimes the route take him to unsafe area.
3. To find a route that has bike lane if there is any.
Sam is a college student. He is from Chicago. Biking is his favorite hobby. He brought his bike with him to San Francisco. He
studies Environmental Management at San Francisco State University. He loves to explore the city. He loves to go to new
places. He needs a tool to help him find a flat route so that he
can bike long distances.
“Exploring San Francisco is amazing. How I would love to ride my
bike and explore the city without tiring myself!”
Page 30
PERSONAS 3/3
Yuki
Craft Store Manager
Age: 29
Device: iPhone
NEEDS
1.To find the most level route.
2.To see steepness along the way.
3.To know how much time it will take.
4.To save the search for next time use.
Yuki is a craft store manager. She lives in Nob Hill. She usually
loves to walk to places and discover hidden art stores and art
galleries, but the thought of walking uphill makes her lazy and
not want to go. She wants a tool that makes walking in San
Francisco easy without having to climb steep hills.
“There are some beautiful art shops in Upper Haight... It's not that
far away, but I don't go there and I think of it as distant, even
though it's not.”
Page 31
COMPETITOR ANALYSIS 1/4
1. It functionally works
amazing.
2. It combines functions
from many map providers.
3. It is responsive.
4. It is an open source!
Amarpai
www.armarpai.com/bikemap
1. It is not a user friendly
application.
2.Visual design is so conservative.
3. It does not have a great
user experience design.
Page 32
1.It is good for exercise
purpose.
2.It shares data with
destop version.
3.It has voice over.
4.It can share through
social network.
5.It is user friendly.
MapMyRide
Page 33
1.Users cannot plan a
route using iphone
version.
2. It has too many
functions which confused
first time user.
1. It works very well.
2. Nice collapes search
bar.
3. It has weather forcast.
4. It can find nearest bike
shop.
5. It can know availability
of bike share on each
dock.
Ride the City
1. It has too many menu
bar which takes up space
of the screen.
2.It highlights path in
colors representing the
type of road.
3.It does not show steepness of each road.
Page 34
1. It works very well on
destop version.
2. Nicely use Google map.
3. It shows elevation along
the path.
511 Transit
Page 35
1. It only works on
destop.
2. Direction pops up as a
dialog box.
3. Since it is a destop
version. It is not a printer
friendly.
COMPETITOR MATRIX
Responsive
Hill level option
Multiple results
Auto fill
Social network
Bike lane option
Pedestrian friendly
Availability of bike share
Road type
Page 36
PROOF OF CONCEPT
Page 37
PROOF OF CONCEPT 1/16
John
Tourist
Age: 32
Device: Samsung Galaxy SIII
NEEDS
1.To find a smoothest route to bike.
2. A tool that estimate time to bike.
3. To see steepness of each route.
4. To be able to save search for later use.
TASK FLOW
Login
Fill Search
Select Result
Click on heart
to save result
Tab again to go
back
Tab info bar for
more info
Hold on heart
to go to Favorite
Tab on edit
to remove
Remove
Page 38
1/13 Welcome Page
0:00 AM
Better way to find a route
Register
Page 39
Log in
2/13 Login
0:00 AM
Log in
[email protected]
Log in
Forget Password?
Page 40
3/13 Search
0:00 AM
From:
To:
Page 41
Tab on search bar
4/13 Search
0:00 AM
Direct Route
Some Bike Lanes
Mostly Bike Lanes
Avoid Hill
Reasonable Hill
Go on Hill
Search bar slides down
Selecting hill and road
type option
From:
To:
Page 42
5/13 Search
0:00 AM
Direct Route
Some Bike Lanes
Mostly Bike Lanes
Avoid Hill
Reasonable Hill
Go on Hill
From: Currente Location
To: g
Golden Gate Park
Golden Gate Bridge
Geary
Germany
Page 43
Fill out From: and To:
Once tap on textfill area
the keyboard will automatically
raises up
When start tapping on an alphabet,
auto fill appears.
6/13 Result
0:00 AM
From: Current Location
To: Golden Gate Park
39 minutes bicycling
When finished filling search bar, the
search bar will slide back to original
place.
Multiple results will appear.
Some Bike Lanes, Resonable Hill
Via San Francisco Bicycle Route 32 and John F Kennedy Dr
5.2 miles
Tab on one that you prefer.
Get Direction
Via San Francisco Bicycle Route 30
5.3 miles
Get Direction
Page 44
7/13 Map Direction
0:00 AM
When finished filling search bar, the
search bar will slide back to original
place.
Multiple results will appear.
Tab on information bar to get the
direction step by step.
Via San Francisco Bicycle Route 32 and John F Ke...
5.2 miles
Page 45
8/13 Step by step
0:00 AM
5.2 miles
1) Ride east on Pist Street
0.2 miles
Information bar will slide up, also
with the direction step by step
Tab again to return to Map
Direction
2) Left on Powell Street
346 feet
3) Left on Sutter Street
1.5 miles
4) Right on Steiner Street
0.3 miles
5) Left on Clay Street
1.2 miles
6) Left on Cherry Street
325 feet
7) Right on Sacramento Street
0.1 miles
8) Right on Arguello Boulevard
106 feet
9) Left on Lake Street
Page 46
9/13 Map Direction
0:00 AM
5.2 miles
Page 47
Tab on Heart to save the result to
your favorite page.
10/13 Map Direction
0:00 AM
Hold on any Heart to go to Favorite
page.
5.2 miles
Page 48
11/13 Favorite
Tab on Edit to remove favorite
0:00 AM
Favorite
Edit
5.2 miles
Get Direction
Page 49
12/13 Favorite
Remove tab will appear.
0:00 AM
Favorite
Edit
Tab on Remove to remove that
favorite.
5.2 miles
Remove
Get Direction
Page 50
13/13 Favorite
Your favorite had been removed.
0:00 AM
Favorite
Edit
Nothing has been add into your favorite.
Page 51
Extra Register
0:00 AM
Register
[email protected]
Register
Page 52
Extra Result
0:00 AM
Sorry, there is no result.
Please try again with another requirement
OK
Page 53
No result search
THESIS ABSTRACT
TECHNICAL SPECIFICATION
Page 54
SITE MAP
Welcom
Register
Login
Search
Result
Map Direction
Page 55
Favorite
DATA DIAGRAM
Google API
This will be a mobile first responsive web application. It is
mobile first because from the survey nowadays people trend
to use mobile as a primary computer. Mobile has many
operating systems and screen sizes so this is the reason why it
need to be responsive. This application can be divided into four
parts.
Amarpi + Bikesy
First, responsive user interface, I will built this using html, css,
and jQuery.
Second, Google map, I will use Google map API to get the
actual map. I will also get latitude and longitude of starting and
ending point. This part will also include the path highlight in
different color depend on the steepness of the route.
mySQL
php
HTML+CSS+JS+JQuery
Third, find a path due to elevation and bike path, I will use
Google Eeevetion API to get the elevation of each road and I
will write some function using php and javaScript to create
route that match with user’s requirement. I will also use open
source provider Amarpai to find a bike path route.
Lastly, user account to save favorites route, I will use php and
mySQL to connect with the database.
Tablet
mobile
Desktop
Page 56
THESIS ABSTRACT
VISUAL DESIGN
Page 57
LOGO
Wandervation comes from Wander and Elevation. So I design
to have slope as W shape and the circle represents wander way.
The reson why I use red color is because this is a way finding
application that can use in San Francisco.
Page 58
TYPEFACE & COLOR
FONT
COLOR
Gill Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Gill Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
R:186 G:19 B:25
R:255 G:255 B:255
Page 59
MOOD BOARD
Page 60
PORTFOLIO 4/4
TIMELINE
Page 61
TIMELINE
Spring 2014
WNM 801
User Experience 1
WNM 801
Responsive Web
Summer 2014
Fall 2014
WNM 801
Visual Design
WNM 801
User Experience 2
WNM 801
Scripting Interactive and Web
Services
WNM 801
Infographic
WNM 801
Responsive Web
GLA 604
Professional Practices and
Communication
Final Presentation
Impliment
Core Function
Responsive
UX Test 1
Finish Core
Function
Visual Design UX Test1.5
UX Test 2
Final Presentation
Page 62
USABILITY TESTING
Spring 2014
Summer 2014
Fall 2014
UX Testing I
UX Testing 1.5
UX Testing 2
Last quarter of the semester, I will be
almost finish with core functions and
responsive part.
After improving from what I get from
UX Testing 1. I will take visual design
class which I will improving my viuasl
design.
After improving from what I get from
UX Testing 1.5. I will be developing
the final prototype.
I will do the responsive web prototype
testing with 5 bicyclists and 3
pedestrians focusing on mobile. I will
give them 3 senarios about the
function of the app to test on. This
process will be recorded by using
Silverback. At the end I will ask some
questions about how do they feel
about this app, which is the most
difficul part to go through, what they
like about this app., and what do they
think it needs to be change in what
way?
Page 63
Last quarter of the semester, I will have
the improved version of my app. and
better visual design.
testing focusing on mobile and desktop
as the same process as UX Testing 1.
At the begining of the semester, I will do
the last UX Testing.
focusing on mobile, destop, and tablet.
After the last UX Testing, I will
improve the app. from what I get from
UX Testing 2. The application will be
ready to launch.
BIBIOLOGY
http://www.sfcta.org/sites/default/files/content/Programming/TWG/2010Jan/climate%20overview%20-%20twg%201_2
1_10.pdf
http://groups.ischool.berkeley.edu/mentalmaps/barriers.html
http://www.go-gulf.com/blog/smartphone/
www.armarpai.com/bikemap
http://www.bicyclinginfo.org/facts/statistics.cfm
http://policy.rutgers.edu/faculty/pucher/TRA960_01April2011.pdf
Page 64
THESIS ABSTRACT
Page 65
Page 64

KwantaC_MidpointBookReduce (/file

Transcription

Similar documents

Visit a Navy AutoSource Representative on-board

fix-it-yourself bike stand 1693e, 624172

Proposed Xpress Route 423 Schedule, Fare, and Route:

Honda CB450 Restoration

the PDF - Community Cycling Center

Let the Adventures Begin... - Wheaton

Better Than Stock – Bike Feature

2014 Tri-Fold Outer Panes.indd

Carlington Bike Park Proposal - Ottawa Mountain Bike Association

from park(ing) - EcoMobility World Festival