PEDALER | FINAL THESIS PROJECT
WEB DEISNG & NEW MEDIA
PEDALER | FINAL THESIS PROJECT
Table of Contents 1 Project Overvview. . . . . . . . . Autobiography. . . . . . . . . . . . . . . . 02 Résumé . . . . . . . . . . . . . . . . . . . . 03 Statement of Interest . . . . . . . . . . . . . 04 Elevator of Pitch. . . . . . . . . . . . . . . 05 Thesis Abstract . . . . . . . . . . . . . . . . 06
2 PROOF OF CONCEPT . . . . .
Target Audiences. . . . . . . . . . . . . . . 46 UX Testing Timeline . . . . . . . . . . . . . 48 Card Sorting. . . . . . . . . . . . . . . . . 50 Low-fidelity Wireframes 1. . . . . . . . . . 54 Low-fidelity Wireframes 2. . . . . . . . . . 58 Low-fidelity Wireframes 3. . . . . . . . . . 59
6 UI PROCESS . . . . . . . . . .
Concept Video. . . . . . . . . . . . . . . . 16
App Ideation. . . . . . . . . . . . . . . . . 61
Prototype . . . . . . . . . . . . . . . . . . . 16
Moodboard 1 . . . . . . . . . . . . . . . . . 61
Information Architecture. . . . . . . . . . . 17
Visual Inspiration 1 . . . . . . . . . . . . . . 62
Task 1 . . . . . . . . . . . . . . . . . . . . . 16
Moodboard 2 . . . . . . . . . . . . . . . . . 62
Task 2 . . . . . . . . . . . . . . . . . . . . . 18
Visual Inspiration 2 . . . . . . . . . . . . . . 62
Task 3 . . . . . . . . . . . . . . . . . . . . . 26
Logo/Identity. . . . . . . . . . . . . . . . . 63 Color Palette & Typography. . . . . . . . . 66
3 MARKET REASERCH. . . . . . Cycling Market Analysis. . . . . . . . . . . 31 Outdoor Participation Analysis . . . . . . . 32
Design Guideline . . . . . . . . . . . . . . . 67
OVERVIEW
Style Guide . . . . . . . . . . . . . . . . . . 68 Assets . . . . . . . . . . . . . . . . . . . . 69
Mobile Usage Research. . . . . . . . . . . 33
4 STRATEGIC PROCESS. . . . .
7 TECHNICAL PROCESS . . . . . Data Diagram. . . . . . . . . . . . . . . . . 72
Unique Position . . . . . . . . . . . . . . . 36
Open Source Specification . . . . . . . . . 74
Competitive Analysis . . . . . . . . . . . . . 37
Technology Used. . . . . . . . . . . . . . . 78
Competitive Analysis Matrix. . . . . . . . . 44 Inspiration Products. . . . . . . . . . . . . 44
5 UX PROCESS. . . . . . . . . . Experience Map. . . . . . . . . . . . . . . 45 User Research. . . . . . . . . . . . . . . . 45
8 CONCLUSION . . . . . . . . . . Thesis Process Conclusion. . . . . . . . . 80 GDS Journal Highlights . . . . . . . . . . . 81 Bibliography. . . . . . . . . . . . . . . . . 82
Content Map. . . . . . . . . . . . . . . . . 46
WEB DEISNG & NEW MEDIA
OVERVIEW
FINAL THESIS PROJECT | PEDALER
ABOUT ME
PORTFOLOP
AUTOBIOGRAPHY For me, life is always fill with creatives and adventures. My name is Joe. I was born and raised in south part of China. I completed my bachelor degree from Art Education department in Guangzhou Academy of Fine Art (GAFA) in 2010. I have graphic design background so that I am familiar with branding,
to communicate information in the next five years. In the future, I hope I can focus my time and energy on not only learn about aesthetics but also improve my technical skills. I am looking forward to complete my final thesis project with all my passions and efforts.
printing, and package design. I was thinking to be a professional graphic designer would be my future career path. After I graduated in 2010, I worked as a graphic designer in an advertisement company. I was in the E-promotion department and this was my first time to learn how to design a website. I was in this position two years and I found that new media is becoming more popular and more functional than printing media. In future, new media has a huge potential market and play an increasingly important role. Whereupon, I changed my career path and decided to be an UI/UX designer. At the same time, I realized that I am lack of design skills and knowledge of web design and new media, so that I came to San Francisco and continue my education in Academy of Art University. During these years studying in AAU, I learned user experience concept, web technology and motion graphic. Meanwhile, I began to interesting in mobile application development, because I think that mobile application will be the most important bridge
2
3
OVERVIEW
4
FINAL THESIS PROJECT | PEDALER
5
OVERVIEW
6
FINAL THESIS PROJECT | PEDALER
7
OVERVIEW
8
FINAL THESIS PROJECT | PEDALER
9
OVERVIEW
FINAL THESIS PROJECT | PEDALER
RESUME
EXPERIENCE 2010 - 2011
PingCheng Internet Genius (China) Project: ChemeLong Hotel Website User Interface design
http://www.chimelong.com/clHotel/
Project: ChemeLong Amusement Park Website
2014
AAU WNM - Trail’s End Ranch RadioProject: ChemeLong Hotel Website User Interface design
http://www.chimelong.com/clHotel/
EDUCATION
Graphic design/Interaction design
2006-2010
Project: Medicine Website
Art Education/Graphic Design (Bachelor of Fine Art)
Graphic design/Interaction design http://www.lizhudele.com/
2012 - 2013
Freelance (China) Project: IKEA Event Video Director
https://vimeo.com/121208905
Project: PEPSI Event Video Photographer
https://vimeo.com/121210822 2014.5 - 2014.7
Cheetah mobile Project: Clean Master Internship https://vimeo.com/121208905
10
ACHIEVEMENT
Guangzhou Academy of Art (China) Guangzhou, China 2012-Present
Academy of Art University Web design & New Media (Master of Fine Art) San Francisco, CA
SKILLS Adobe After Effects Adobe Premiere Adobe Photoshop Adobe Illustrator Adobe Dreamweaver Adobe Lightroom Adobe Indesign
LANGUAGE Cantonese / Mandarin / English
11
OVERVIEW
FINAL THESIS PROJECT | PEDALER
ELEVATOR PITCH
other users experiences.
PEDALER is an application, which provides a platform for long distance bike journeys. It helps users to plan and give an over view of their bike journeys base on distance, speed, date, and description. Meanwhile bikers can track and share their cycling experiences. More than a navigation tool, PEDALER offers an interactive map for users to
“
easily record their own trips and view other bikers’s
Two roads diverged in a wood, and I— I took the one less traveled by, And that has made all the difference.
“
Robert Frost
adventures.
STATEMENT OF INTEREST Why I love cycling so much? Why am I so compulsively drawn to it? Why does cycling makes me happy in a way that perhaps tennis, or swimming, or footy can’t? As a sport, cycling boots both physical health and mental health. When I am biking, I have to keep my body balance and step on the wheel to make it move that is a great exercise for practice my body. Meanwhile, I experienced amazing views and met many other bikers during my cycling trip. For me, cycling is a not only a sport but also gave me a broad range of positive emotions when I ride. Welling, peaceful, curious, and excited. The most important is that cycling helps me to re-create myself and re-think the current life I have. While cycling helps me to release any pressures from study or work. What kind of life that I truly expected; What’s my mission and goal in my entire life.
12
13
OVERVIEW
PEDALER | FINAL THESIS PROJECT THESIS ABSTRACT / PROJECT DESCRIPTION PEDALER, which means a person who rides a bicycle. As a pedaler, I think if we have a healthy orientation to cycling we feel a broad range of positive emotions when we ride. Joy, contentment, absorbed, satisfied, accomplished, alert, calm and peaceful, confident, powerful, excited – happy. It just feels great to be on the bike! One of the most important things cycling can facilitate is meaningful contribution to something larger than you or I. More than a sport, cycling is an adventure to explore uncertain things. The number of bicyclists is growing rapidly from coast to coast. The National Household Travel Survey showed that the number of trips made by bicycle in the U.S. more than doubled from 1.7 billion in 2001 to 4 billion in 2009. After I did research about cycling marketing, I realized
PROOF OF CONCEPT
that there is a potential market to create an app for pedaler. However, the most of current outdoor social networks only have websites instead of mobile apps. It’s inconvenient for users to get information about bicycle or invite people to join their journey. Therefore, PEDALER provides an easy, convenient, and interactive way for users to upload and track their own bike adventures. Users can also invite other people to join their planned journey or browse
14
WEB DEISNG & NEW MEDIA
PROOF OF CONCEPT
FINAL THESIS PROJECT | PEDALER
INFORMATION ARCHITECTURE Introductory page
2
PROTOTYPE:
2
Explore Planning
Planning Planning
12
Log Planning in / Sign up
2
2
Planning Map
2
Planning Profile
Planning Setting
Name Filter
Location
Near by Basic Infor
Speed/Time Prepare
Pedaling
Complete
Check list Previous
Upcomming
Description
Save Basic infor Speed/Time Check list
3
16
Save
Detail Page
4
Description
CONCEPT VIDEO:
BG Image
Recording
Near by
4
Path
17
PROOF OF CONCEPT
FINAL THESIS PROJECT | PEDALER
PROOF OF CONCEPT 01. Route Tap this area to read the route
TASK 1
detail.
EXPLORE AND JOIN IN Pedalers’ ADVENTURES
Explore journals created by Pedalers’ of
02. About the trip
adventurers from around the globe. Take a look
Tap the button to read the
of the datail pages and join in the upcomming
whole content for journery
journery.
description.
03. Check List Tap the button to read more detail of the equipment check list.
04. Paths Tap the button to read more detail of the equipment check list.
18
Login
Explore
Activity
Activity
Login with Facebook or enter your email and
Explore journals created by Pedalers’ of
Click the photos on explore and get into the
Scroll to read more informations for the journerys.
password to login
adventurers from around the globe.
activity page to read the journery’s datail.
19
PROOF OF CONCEPT
20
FINAL THESIS PROJECT | PEDALER
01. Route
01-1. Route
Tap this area to read the route detail.
Tap the button to read the gradient
02. About the trip
03. Check List
04. Paths
04-1. Paths
Tap the button to read the whole content
Tap the button to read more detail of the
Tap the button to read more detail of the
Tap the button to espand and read the
for journery description.
equipment check list.
equipment check list.
journal upload by pedalers.
21
PROOF OF CONCEPT
FINAL THESIS PROJECT | PEDALER
TASK 2 PLANNING A BIKE JOURNERY Plan a new trip and publish on PEDALER to attract other bikers’ suggestions or participation.
Explore Explore journerys created by Pedalers’ of adventurers from around the globe.
22
Planning-Location
Planning-Time
Planning-Time-calendar
Planning-Route
Enter the location for your journery.
Enter the start date and planed arrivel
Tap the calendar to selcet the date.
Enter the checkpoint to finish the route
date.
for you journey.
23
PROOF OF CONCEPT
24
FINAL THESIS PROJECT | PEDALER
Planning-Route
Planning-Route
Planning-Checklist
Planning-Background Image
Planning-Description
Activity
Tap the icon to pin the location at map
You can add more locations to complete
Selcet the items for the check list to help
Selcet the images for the post background.
Write some description to explan your
Save and create a new post of your journey.
your route
you or your teammates for packing.
journey.
25
PROOF OF CONCEPT
FINAL THESIS PROJECT | PEDALER
TASK 3 RECORD YOUR JOURNALS Join in and strat your journey. Record your journal by combining your GPS trace, the photos you captured, and text you write in an interactive map.
Join the journey Tap the button to ask for joining the journey.
Join the journey
Join the journey
Start your journey
Recording
Write a message and send to the blogger.
Then wait for the blogger confirm your
Tap the button and turn into the recording page
Your path will show in the interactive map,
requestment.
and start your journey.
and you can also track your teammates locations.
26
27
PROOF OF CONCEPT
PEDALER | FINAL THESIS PROJECT
MARKET RESEARCH
28
Pause and End
Journal
Tap the Pause and End button to arrange your
Take photos and write descriptions for your
journey.
journey.
WEB DEISNG & NEW MEDIA
MARKET RESEARCH
FINAL THESIS PROJECT | PEDALER
20% People
California is one of the popular state for cyclist
21%
ride in California
173,460 People The Self-Supported bicycle Tour (Target Group)
57,000,000
People
had ridden bike in the United States, 2014
30
4,130,000 People
had ridden bike in the California, 2014
826,000 People
like long-distance bike trip, 2014
46% 379,960 People The Guided bicycle Tour
33% 272,580 People The Self-Guided bicycle Tour
31
MARKET RESEARCH
FINAL THESIS PROJECT | PEDALER
Who is bicycling?
Most popular outdoor activities
Long distance bicycle trip, as a percentage of all trips, by Age.
22.4% of people.
Outdoor Participation by long distance bicycle trip
Mobile Usage Research
Bicycling(Road, Mountain, BMX) 41000
40250
11%
22.4%
26%
39500
21%
On March 2015, Mobile web browsing has
climbed to 11.3% and desktop is only 10.6%
77.6%
40%
38750
Google says more people search with mobile than desktop)
Mobile users spent 86% of their time on
38000 (People)
32
15-24
26%
25-39
40-64
21%
65-over
40% 11%
apps on 2014. while only 80% on 2013. That
2009
2010
2011
2012
2013
(Year)
is (86-80)/80=7.5% growth compares to last year
Bicycling(Road, Mountain, BMX) Other outdoor activities
33
MARKET RESEARCH
PEDALER | FINAL THESIS PROJECT Where are people bicycling? Long distance bicycle Trips, as a percentage of all trips, by region.
New England Middle Atlantic East North Central
STRATEGIC PROCESS
West North Central South Atlantic East South Central West South Central Mountain Pactfic 34
WEB DEISNG & NEW MEDIA
STRATEGIC PROCESS
FINAL THESIS PROJECT | PEDALER
Functionality & features
User Requirements
•
FIND
Users that access this app are probably bikers who
View routes on a map designed for cyclists
are aim at fitness. The total time for cycling is only in
including distance and an interactive elevation
one day instead of outdoor long distances cycling.
profile. •
RIDE
Strengths •
Users can track and share their cycling trip to
by Etsy members. They can get inspirations from
other users. •
as well.
list view. It’s convenience for users to search the
•
routes.
•
•
•
Who Favorited This View routes with an interactive elevation profile.
•
Users can tap the gradient line to view the
•
The UI design and branding are not match this App. •
No Main Menu Bar Some of the buttons and icons are repeat twice which are unnecessary.
Relevance This app is relevant to my project because I was inspired by the interactive function for checking the gradience of the route. The one of main function of my project is to track and share users their own routes. Bikemap would be a great example of how to record user’s trip.
distance of the route.
•
•
• •
Curated Collection Two versions with routes, include map view and
•
Not Consistent
Grid-Based Layout
The users can browse curated collections created the collections and contribute to a community
•
Who Favorited This The main functions are simple and easy to
TRACK
understand and use.
Record users routes on the go and track distance, duration, speed, elevation gain - even your heart rate (with additional hardware). Users can sync your recorded routes with their route collections on Bikemap.net and add them to their training log
Bikemap Your bike routes
Bikemap assists users with navigation as it shows their current location on an interactive map in real time while cycling on Bikemap routes.
36
to track their progress. •
SHARE Keep users friends posted and share their routes on Bikemap.net, Facebook, Twitter, WhatsApp and email.
Weaknesses •
Request Custom Order The goal of the app is not specific and clarified.
37
STRATEGIC PROCESS
FINAL THESIS PROJECT | PEDALER
Functionality & features •
•
Explore the most popular segments anywhere
TRACK YOUR RUNS AND RIDES WITH GPS
you go
Follow routes you’ve created or found and view your activity map as you record Get key stats like distance, pace, speed, elevation gained and calories burned
FIND PLACES TO RUN AND RIDE
User Requirements The users of Strava are Professional bikers or the
Relevance Starve is a really great example for my project. Especially the recording page, which has clean and simple UI design. It provides many useful settings for users to record their route instead of too much click through.
people who are interest in to be a professional biker.
Collect heart rate, power and cadence data from ANT+ and Bluetooth LE sensors •
CLIMB THE LEADERBOARDS Set personal records and see how you stack up against friends, locals and pros Join monthly Challenges designed to push you further
Strengths •
Grid-Based Layout Clarified and specific Data relate to users cycling or running.
•
Curated Collection Nice UI and UX design of recording page.
• •
Strava
FOLLOW FRIENDS Find your friends and motivate them with kudos and and comments
GPS Run and Ride Tracker
Share your activities on Facebook and Twitter
Strava is a health app, which track your runs and
Share Instagram photos from your activities on
rides with GPS, join Challenges and see how your
your Strava profile
Who Favorited This Useful and helpful functions
Weaknesses •
Request Custom Order Some of the pages are too complicated without organized hierarchy.
•
Not Consistent Users have to pay for some of the functions.
running and riding compares with friends.
38
39
STRATEGIC PROCESS
FINAL THESIS PROJECT | PEDALER
Functionality & features
cycling but also hiking.
•
Strengths
TRACK YOUR RUNS AND RIDES WITH Schedule your running routes and pass them with a few clicks on.
•
•
All in one handy app. It provides topographic
CLIMB THE LEADERBOARDS
maps and turn-by-turn voice navigation to help
Calculate the distance, slope, difficulty and duration of your rounds. •
other runners on komoot. Improved user experience. •
FIND PLACES TO RUN AND RIDE Discover stored & proposed highlights on the map more easily.
•
users focus on the path ahead. •
FIND PLACES TO RUN AND RIDE Many improvements in usability and performance PS Do you like our app? Give us 5 stars, we are delighted.
Curated Collection Always know user’s speed and distance when
FOLLOW FRIENDS Draw your runs and part your highlights with
Grid-Based Layout
they are on the trip. •
Who Favorited This
•
Who Favorited This
Available for all devices. Offline maps without internet.
Weaknesses •
Request Custom Order Users have to pay for some of the functions.
•
Not Consistent The UI design doesn’t match this app.
Relevance Commit has same target audience as my project. This is nice example for me to consider how to help outdoor bikers to plan their trip and explore other
Kommot
users ’s trips.
Experience outdoor adventures komoot is a smart & simple way to experience outdoor adventures. Hikers and cyclists rely komoot, when it comes to topographic maps, precise voice navigation and tips for interesting places.
40
User Requirements Kommot is suitable for all kinds of bikers who ride mountain bike, race bike, and road bike. Not only
41
STRATEGIC PROCESS
FINAL THESIS PROJECT | PEDALER
Yonder
Yonder is an app purpose-built for sharing your red point, single track, pow shot, dawn patrol adventures with a community that’s just as psyched about the outdoors as you are.
Functionality & features •
Discover thousands of geo-located images and videos around the globe
•
· Share your adventures through photos and videos
•
· Search or browse our database of over 20,000 destinations
•
· Explore 25 activities
•
· Follow bikers, hikers, climbers, skiers and more from around the world
•
· Browse a feed or explore the map
•
· Like and post comments
•
· Share directly to Facebook, Twitter, email, and
Roadtrippers Roadtrippers is an application, which aims to help users to discover the best diners, scenic spots, attractions, hotels, and much more with over a million amazing points of interest.Users can plan a new trip or automatically sync their trips and saved places from their mapping site.
Functionality & features •
- Find amazing places around you, on the road
•
- Plan complete trip itineraries, or sync your trips
•
- Save places, trips, and maps for offline access
•
- Book hotels, and other unique stays right from
or at your destination. planned on our website. and syncing. the app •
descriptions, ratings, reviews, addresses, and
iMessage •
· Keep lists of all your favorite experiences and destinations
Yonder was made for everyone from backcountry explorers to backyard wanderers. They have the same as the target audience as I do. After I played with this App, I refined the concept of my project. I realized that I need to consider what the outdoor bikers they need and what they want to post and record when they are on the road.
42
- View rich place details such as photos, phone numbers.
•
- Navigate to any place by connecting your favorite navigation app
Roadtrippers includes many outdoor activities, such as camping, hiking, surfing,etc. I was inspired by their wonderful interactive actions. It’s easy and clear to browse different categories with their customized icons. Also, it Alerts you to cool stuff to see on an already planned road trip. Additionally, it shows time and mileage from place to place.
43
STRATEGIC PROCESS
PEDALER | FINAL THESIS PROJECT
UX PROCESS
44
WEB DEISNG & NEW MEDIA
UX PROCESS
FINAL THESIS PROJECT | PEDALER
PRIMARY
SECONDARY
Self-supported
Unexperienced / Unfamiliar
Experienced bikers
Self-guided / guided
There are three main types of bicycle tours. My primary
Some of these people are fit or have day trip experience.
THE GUIDED BICYCLE TOUR
target audience is long-distance and self-supported
Unfamiliar with predesigned cycling path, make tour
Long distance 18-32
any distance 18-32
A guided bicycle tour is a type of bicycle touring
THE SELF-GUIDED BICYCLE TOUR
THE SELF-SUPPORTED BICYCLE TOURA
users. They have long distance or fitness cycling
plans. These people ask others to make tour plan,
in which you pay to be escorted along a pre-
A self-guided bicycle tour is similar to a guided
Finally, there is the self-supported bicycle tour,
experience that familiar with long-distance cycling,
prepare their equipment,etc. Some of them have no
designed path by an experienced bicycle touring
bicycle tour in that the route, lodging and
which requires you to travel alone (without a
pre-design cycling paths, clothes, equipment and are
any cycling experience and are willing to have a long-
guide or company, and your belongings (such as
meals have all been taken care of for you by
guide) and carry all the clothing, tools, and
preparing food.
distance cycling experience.
your food, clothing, toiletries, etc.) are carried in
an established bicycle touring company. The
gear you need to survive for days, weeks, or
a vehicle that meets you at various checkpoints
difference, however, is that on a self-guided tour
months on end. This type of bicycle travel is also
They are looking for an App can help them to plan their
They want to look at finished paths and tour information
along your route.
you will not be joined by an experienced bicycle
commonly referred to as “traditional bicycle
own path and post their created path to invite more
to help them plan and prepare their equipment,etc. Then
Guided bicycle tours range in size from 2 to
touring guide. Instead, you must navigate a pre-
touring” or “fully-loaded bicycle touring.”
bikers join their cycling tour. Also, they can track their
browse current paths posted by experienced bikers and
20+ people, with tour participants often times
designed course on your own, while carrying
While your food, route details and lodging are
cycling process and share information during the tour.
join in-on their tours.
coming from a number of different countries all
whatever belongings you might have with you on
all taken care of for you in advance by a touring
around the world.
your bicycle (although some self-guided bicycle
company on both guided and self-guided bicycle
tours will transport your luggage each day from
tours, self-supported bicycle touring require you
one hotel to the next).
to figure out all of these details on your own – either in advance or once you get out there on the road.
46
47
UX PROCESS
EXPERIENCE MAP
FINAL THESIS PROJECT | PEDALER
Persona 1: Experienced
“My dream is to travel the world by ridding bike. ” LOG IN Name: Alex Robertson Age: 35 Gender: Male
EXPLORE
Occupation: College instructor Location: Berkeley, CA Activities: Hiking, climbing, camping
DETAIL PAGE
User Scenario Alex is a bike riding enthusiast. Work as a geography instructor in the college. He has
PLANNING
professional knowledge about nature and geography. Alex likes outdoor activates, such as hiking, camping, especially cycling. He had many amazing bicycle touring experiences before, so he is planing to have a new bicycle touring during his summer vacation. Finally, he decided the destination is Yosemite. He checked the current paths posted by other users, but he doesn’t like any of them. He wants to create his own path and invite other users to join him. Bike usage: 30hours/week Experience: From San Francisco to Los Angeles
Location Speed/Time Check list Description BG Image Save
DETAIL PAGE
Goals
48
•
Check current paths and info.
•
Post new path and invite people to join in.
•
Meet bike trip folks just like he is.
49
UX PROCESS
FINAL THESIS PROJECT | PEDALER
Persona 2: Unexperienced
Persona 3: Unfamiliar
“I hope I can do something unique that I will be proud of myself ”
“I would like to use camera to catch movement. ”
LOG IN
Name: Michelle Smith Age: 23 Gender: Female
Name: Jack Noble Age: 29
EXPLORE
Occupation: Freelance tattoo designer
Activities: Yoga, Cycling, traveling
User Scenario Michelle loves work out, healthy life style, and willing to adventure something she has never experienced before. As a fitness guider, Michelle always rides
Location: Santa Cruz, CA
CLICK ON FI LTER
Activities: Photography, travling, surfing.
User Scenario Jack is a freelance tatoo designer lives in Los
SORT THROUGH PRE PARE
Angles. He likes traveling and photography. Jack had several wonderful guided bicycle tour
experience a real bicycle tour to Yosemite. However,
for the current designed path and join them as a
EXPLORE
Also, in order to make this tour unforgettable, he
ROUTE
Bike usage: 10hours/week
ABOUT
Experience: From home to dowtown
Goals •
Browse current paths posted by other users
•
Find a current designed path and join.
•
Meet experienced “pedalers”
•
Look for tips and suggestions for preparing
CHECK LIST
ASK FOR JOIN IN
PHOTO
is looking for a way to combine all the photos he
DETAIL PAGE
team member.
RECORDING
wants to challenge self-support cycling this time.
she doesn’t know how to design a cycling path and prepare all the equipment, food, etc. She is looking
CLICK ON START
experiences with his friends before, so he really
exercise bike in the gym but she never has realistic cycling experience. In this summer, she decided to
UPCOMMING JOURNERY
Gender: Male
Occupation: Fitness guider Location: San Francisco, CA
PROFILE
captured and text he wrote during his journey
TEXT
Bike usage: 8hours/week
INFO
Experience: From Santa Cruz to Santa Brabara
Goals • • • •
Find a current posted path and join in Check other user’s posted Info Meet bike lovers just like he is Find a way to record and save those gorgeous memories during the tour
PATH
equipment, food,cloths,etc.
50
51
UX PROCESS
FINAL THESIS PROJECT | PEDALER
PHASE
52
TIME
PARTICIPANTS
PROTOTYPE
Interview
Sep/2014
16 participants (STREET INTERVIEW)
Survey
Paper Prototype (1st draft)
Oct/2014
6 participants (GDS: UX CLASS)
Test with paper
Paper Prototype (2ed draft)
Nov/2014
5 participants (UX WORKSHOP)
Printed wireframes
Hight - Fidelity paperprototype - A
Feb/2015
10 participants (GDS: VISUAL CLASS)
Invision App https://invis.io/B41O5UKHE
Hight - Fidelity Invision - B
Mar/2015
5 participants (UX WORKSHOP)
Invision App https://invis.io/DJ54K4ZB9
Hight - Fidelity Invision - C
Mar/2015
5 participants (UX WORKSHOP)
Invision App https://invis.io/DJ54K4ZB9
Final Testing
Sep/2015
5 participants
Website dazhourong com/Pedaler/index html
53
UX PROCESS
FINAL THESIS PROJECT | PEDALER
MEDPOINT WIREFRAMES
Explore
Activity
Activity
Activity-Filter
Recording
Explore journals created by Pedalers’ of
Click the photos on explore and get into the
Scroll to read more informations for the journerys.
Enter your request to filter more posts.
Your path will show in the interactive map,
adventurers from around the globe.
activity page to read the journery’s datail.
and you can also track your teammates locations.
54
55
UX PROCESS
FINAL THESIS PROJECT | PEDALER
LOW-FIDELITY WIREFRAMES 1
Explore
Activity
Activity
Activity-Filter
Recording
Explore journals created by Pedalers’ of
Click the photos on explore and get into the
Scroll to read more informations for the journerys.
Enter your request to filter more posts.
Your path will show in the interactive map,
adventurers from around the globe.
activity page to read the journery’s datail.
and you can also track your teammates locations.
56
57
UX PROCESS
FINAL THESIS PROJECT | PEDALER
HIGH-FIDELITY WIREFRAMES 2
58
Explore
Activity
Planning-Route
Route
Profile
Explore journals created by Pedalers’ of
Click the photos on explore and get into the
You can add more locations to complete
Tap this area to read the route detail.
Here is the profile page
adventurers from around the globe.
activity page to read the journery’s datail.
your route
59
UX PROCESS
PEDALER | FINAL THESIS PROJECT
UI PROCESS
60
WEB DEISNG & NEW MEDIA
STRATEGIC PROCESS
62
FINAL THESIS PROJECT | PEDALER
63
MARKET RESEARCH
64
FINAL THESIS PROJECT | PEDALER
65
UX PROCESS
66
FINAL THESIS PROJECT | PEDALER
67
UX PROCESS
68
FINAL THESIS PROJECT | PEDALER
69
UX PROCESS
PEDALER | FINAL THESIS PROJECT
TECHNICAL PROCESS
70
WEB DEISNG & NEW MEDIA
UI PROCESS
FINAL THESIS PROJECT | PEDALER
VISUAL DEVELOPMENT
PROGRAMMING
DEVICES
MAP
72
73
UI PROCESS
74
FINAL THESIS PROJECT | PEDALER
75
UI PROCESS
76
FINAL THESIS PROJECT | PEDALER
77
UI PROCESS
PEDALER | FINAL THESIS PROJECT
CONCLUSION
78
WEB DEISNG & NEW MEDIA
CONCLUSION
FINAL THESIS PROJECT | PEDALER
Conclusion More than a sport, cycling is an adventure for exploring uncertain things. The number of “pedalers” is growing rapidly from coast to coast. However, there are just a small group are self-supported pedalers. I think there is a huge potential market to create apps or tools for self-supported pedalers. I hope “Pedaler” would be a truly useful app for users to make their bicycle tour unforgettable. As a pedaler, I have to ride my bike to experience ever moment. Ever step on my way contains joyful, loneliness, and effort. Same as doing my Final project, it has been a Fmemorable process doing my final thesis. I will never forget the days I spent in the lab and the teachers and classmates who gave me a lot of supports and feedback. I am so happy to see the final design. In the future, I will continue refining the app to make it more useful and professional. Also, I hope I can find collaborative opportunity to promote my project and launch it as a commercial product.
80
81
CONCLUSION
PEDALER | FINAL THESIS PROJECT
Bibliography Market Research *thisbigcity.net/green-cities-better-bike-lanes *thisbigcity.net/green-cities-better-bike-lanes *http://bicycletouringpro.com/blog/types-of-bicycle-tours/ Prototype *https://invis.io/B41O5UKHE *https://invis.io/DJ54K4ZB9 Product Site *dazhourong.com/Pedaler/index Concept Videp *youtube.com/lattejoe/244326532
82
WEB DEISNG & NEW MEDIA