Michael Cale LeRoy 2013
CONTENTS 2
Introduction background, secondary research
10
Research users, primary research
26
Experience Design wire frames, mock–ups
32
Design Direction mood board, color & patterns
40
Implementation final design, video
54
References and Thanks
INTRODUCTION
MY PERSONAL STORY Since becoming a college student in 2009, biking has increasingly become a bigger part of my life; and in 2012 I began cycling to my jobs on a regular basis. A pothole caused me to have a fairly serious accident after I began biking on a daily basis (far right). My sister (right), Amy, was in a very serious bicycle accident that sent her to the emergency room. This incident caused a concussion, a black eye, and a few other injuries. Her accident was caused by gravel on the street. Both accidents could have been avoided if we had been forewarned about these obstacles.
Amy LeRoy in ER after a biking accident
2 3
TREKET: MICHAEL CALE LEROY
INTRODUCTION: BACKGROUND
BACKGROUND Biking, walking, and active transportation improve the quality of life for not only for the cycler but for others as well! It enhances physical and mental health, helps to protect the environment, encourages energy efficiency, and fosters independence. It also adds a secondary community of active travellers. In addition, the biking community is a lively and fun group of people who enjoy meeting others and going for leisurely bike rides. However, cyclists and venues currently do not have the most effective means of communication.
Cale LeRoy cuts on hand after minor biking accident
STATISTICS 618 deaths and 52000 injuries from bicycle accidents were made public in 2010. However, bicycle injuries are severely under reported and some statistics suggest that only 10% are recorded. In Texas for instance, the Department of Public Safety records only crashes that involve motor vehicles in which the motor vehicle sustains enough damage that it has to be towed From 1995 to 2010 there has been a 16% reduction in deaths and injuries, which is a step in the right direction. However more can always be done to improve cycling safety. This statistic may also reflect a possible drop in biking.
4 5
TREKET: MICHAEL CALE LEROY
INTRODUCTION: STATISTICS
WHERE CYCLERS RIDE sidewalks paved roads bike paths
road shoulder bike lanes unpaved roads
Graph showing where bikers are reported to ride. Paved roads, sidewalks, and unpaved roads account for about 67% of where bikers ride but these are the most dangerous places to ride.
Paved Roads are usually where bikers travel. This is where the majority of accidents happen. Paved roads signifies cycling in the driving lanes with motor vehicles. Sidewalks are one of the most dangerous places a biker can ride due to pedestrians. In most places cycling on sidewalks is illegal. Cyclists are subject to the same laws on the road as a vehicle. Bike Paths are segregated cycling lanes separated from the roads. These are the best and safest places that a bicycler can travel. Road Shoulders are another good place for cyclers to travel because there usually aren’t pedestrians or motor vehicles in them. However, they may be riddled with gravel, potholes and other obstacles. Bike Lanes are designated areas on the road for cyclers to travel. This is an optimal option but these are rarely present when needed. Unpaved Roads are complicated with gravel, potholes and many more obstacles. These are rarely safe places for a biker to ride.
TRENDS IN SECONDARY RESEARCH Cyclists are legitimate users of the roadway and an integral part of our transportation system. Cycling refers to a range of uses including commuter bicycling, as well as recreational uses, and exercise. Unlike cars, cyclists have no structured safety unit. Main factors of cycling safety include directness, continuity & connectivity, and perceived comfort.
LOCATION FACTORED CRASHES Rural Urban
Intersection
Intersection–Related
Non-Intersection
Non-Roadway
Factors that contribute to bicycle crashes include location factors (intersections, driveways, alleys), speed factors (the faster the speed the higher the occurrence), seasonal factors (weather and surface conditions), and behavioral factors (such as failing to yield and turning errors).
6 7
TREKET: MICHAEL CALE LEROY
INTRODUCTION: STATISTICS
BICYCLE & MOTORIST BEHAVIORAL FACTORED ACCIDENTS FHWA (early 90’s)
North Carolina Urban (04–08)
North Carolina Rural (04–08)
Orlando Metro Area (03–04)
crossing path accidents
percent of total crashes
motorist failure to yield – intersection
14.4
13.9
5.5
14
bicyclist failure to yield – intersection
16.8
15.3
7.9
14
bicyclist failure to yield – midblock
11.7
8.6
10.8
9.3
motorist failure to yield – midblock (driveway/alley)
6.9
8.5
3
10.1
turning errors – bicyclist and motorist
1.4
1.5
1.7
2.7
bicyclist failure to clear intersection
1.4
1.3
0.2
0
crossing path total
52.6
49.1
29.1
50.1
parallel path accidents
percent of total crashes
motorist turned/merged into path of bicyclist
12.1
13.2
6.9
8.1
motorist overtaking bicyclist
8.6
8.9
29.3
8.1
bicyclist turned/merged into path of motorist
7.3
6.8
16.9
5.4
bicyclist overtaking motorist
2.7
1.6
0.7
0.6
operator wrong/side/head-–on (motorist or bicyclist)
2.8
2.1
5.6
2.5
motorist loss of control
0.6
0.3
0.5
0.3
bicyclist loss of control
1.8
2.2
1.3
1.0
parallel path total
35.9
35.1
61.2
26
Bicycle accidents occur everywhere and for different reasons. By examining the Bicycle and Motorist Behavioral Factored Crashes chart, I was able to better understand the depths and limitations of how I could contribute to a safer cycling environment for the bicyclist as well as motorists and pedestrians.
GOALS
MOVING FORWARD OBJECTIVE For my senior thesis project, my objective was to make navigating while biking through a city easier, safer and more informed for everyone. As I have found in my secondary background research, an immense amount of people are affected by bicycling accidents each year. For my thesis I plan to help cyclers control and avoid dangers of the road through the use of an iPhone application that provides an intuitive and comprehensive routing system based on personal preferences. No iPhone (or any smartphone) application has attempted to do this. Therefore, I had to set clear goals and have a detailed plan of action to solve these problems in the future.
Safety Routing System Goal: to improve cycling safety through cities and dense riding areas This will include: user submitted results of optimal roads, GPS system altered by the safety ratings, and personal preferences of each cyclist Long Distance Advice Goal: to provide advice and guidance for riding long distance trips (city to city) This will include: user submitted information pertaining to prior trips, and a search for trips from one city to another Events Board Goal: to connect cyclists to bicycling events occurring in their area This will include: an events board (that can be updated by users) detailing upcoming events, and include a conduit to RSVP via Facebook
8 9
TREKET: MICHAEL CALE LEROY
INTRODUCTION: MOVING FORWARD
SCHEDULE September
By creating a schedule for myself and strictly staying on task, I was able to complete my senior thesis with enough time to make revisions to the design.
Secondary Research Primary Research
October User Experience Design November
December
January
February
March
April
May
Visual Language Development
Identity & Branding Smart Phone Application App Video
Senior Show Panel
RESEARCH BACKGROUND To collect research for my thesis project I used a combination of primary and secondary sources guided by my own unanswered questions. My curiosity led me to the realization that there were aspects of biking that I did not fully understand. In order to improve the cycling experience, I needed to answer my questions and learn about aspects of biking that I had never considered. From my research I was able to gain a substantial amount of valuable and helpful information.
In my secondary research (some of which can be found on previous pages), I was able to gain a vast amount of knowledge concerning the issues that arise for bicyclists while on the road. This enabled me to focus in on my primary research. After my secondary research was concluded, I was able to begin identifying users, working with personas and stories, interviewing, and exploring options with bikers, etc.
user filling out the visual activity
10 11
TREKET: MICHAEL CALE LEROY
RESEARCH: OBJECTIVES
RESEARCH OBJECTIVES
PLAN AND METHOD
Research basic safety precautions for biking (secondary research)
Perform secondary research (articles, movies, documentaries, and interviews)
Identify users
Use secondary research and prior knowledge to cultivate a questionnaire
Discover biker’s primary safety concerns when biking Ascertain the mapping needs of bikers Conduct a drawing exercise to learn what bikers desire on this app
Find respondents who are willing to talk about their biking experiences Perform questionnaire in a conversation based setting After the conversation, have the respondent perform a visual activity based on apps and smart phones Discover what best suits the app while bikers are en route
USERS The primary users for the Treket phone application include an assortment of bicycle riders. I have defined three groups of cyclists (right) that could utilize the app for different reasons. Instead of simply setting up a few personas, I categorized different types of bikers and completed studies of diverse subjects within these categories. The great thing about Treket is that no matter how old you are, what your activity level is, or how often you bike, this app can be very useful to all people.
NEW RESIDENTS & TOURISTS Uh-oh! Run! Tourists and new residents ride the wrong way in the park, too fast on the sidewalk, and just bad all around; particularly tourists who are riding and unfolding a map at the same time. This app enable these cyclists to easily navigate their way through unfamiliar areas.
WEEKEND WARRIORS Weekend warriors are people that cycle occasionally, either to get from place to place or for leisure and fun. Usually too slow to be of harm, they may end up on sidewalks. This app facilitates the discovery of safe riding areas and tours for new cyclists that are interested in biking more frequently.
RESPONSIBLE COMMUTERS Responsible commuters are the people that cycle to work but want to be as safe as possible. They also like to switch their route every once in a while for a change of scenery. This group of people would use the app for an update on road safety, construction, and other unforeseen obstacles that can pop up at any time.
12 13
TREKET: MICHAEL CALE LEROY
RESEARCH: USERS
CONVERSATION QUESTIONS What visual alerts could be used on a phone while riding? What audio alerts could be used while riding to cue directions? What kind of general alerts could be used to make your trip safer? Rate how concerned you are with the following safety issues of biking. Crime Bad Road Quality Construction Cars Busy Roads Pedestrians Intersections Animals Hills
How often do you bike? Do you bike leisurely, for exercise, or just to get from place to place? What is the best part of using a bike to get around? What is the most difficult aspect of using a bike to get around? What are some of your safety concerns? Can you explain a particular incident? What is your biggest concern that may appear in the roads? What type of path/road/lane do you normally bike on?
The questions to the left were created with the intent of conversing with users to better understand bicyclers and their different experiences. The questions were used as prompts to spark discussions about experiences, incidents, and ideas about city biking. By creating broader questions I was able to have similar conversations with people from different user groups. The column on the far left encompasses questions that I ensured that everyone answered. The second column of questions were secondary prompts for even more conversation.
14 15
TREKET: MICHAEL CALE LEROY
RESEARCH: CONVERSATIONS
VISUAL ACTIVITY Users who are frequent bikers have been given this template (right) and asked to imagine the iPhone 5 mounted onto their bicycle handlebars. They were then asked to sketch their ideas on the blank phone template with the intention of facilitating road navigation and safety. The sketching ideas were completely determined by the user. By leaving it as open ended as possible, I was able to draw ideas from the results about different aspects of the app. The space on the left side of the sheet was left blank so that the users could write in other ideas or annotate the drawings that they had created.
RESULTS The following pages display the discovered results from conversations with the different user groups of cyclists. Not all user activity results have been displayed. A highlighted selection of user’s answers demonstrates areas of concern taken into consideration while creating the app design and user experience.
AMOUNT OF CONCERN WITH SAFETY ISSUES The main take away from this survey was that every person had completely different safety concerns. Each category had at least one not concerned and at least one very concerned. This demonstrated that the app would need to have the option of personalizing priorities for each particular user.
Crime Road Quality Construction Cars Busy Roads Pedestrians Intersections Animals Hills
16 17
TREKET: MICHAEL CALE LEROY
RESEARCH: RESULTS
AMY LEROY Age: 26 Profession: Child Life Specialist at Nationwide Children’s Hospital Status: active commuter for two years (rides about 20 miles everyday) Quote: “I work hard to bike a lot but it can have it’s drawbacks as I learned when I got in my accident.” Amy rides to her job at Nationwide Children’s Hospital whenever it’s nice outside. It’s 10 miles each way. She has been in 2 accidents in the past two years, one of them which sent her to the ER (bruises, scrapes and a concussion). Amy thought that word size would be extremely important to the system when viewing directions. For example, she would like to see the street names and arrows in large text (pic1). She also discussed the possibility of having a split screen with a map on the bottom and directions on the top. Additionally, she thought that a countdown would be useful enabling turn anticipation (pic2). She also discussed the possibility of having weather (pic3) and traffic updates (pic4) on her biking route.
LUKE ANDERSON Age: 21 Major: Architecture Status: active commuter for 4 years Quote: “I don’t really have any other options, I can’t drive to Knowlton (School of Architecture) everyday but it is too time consuming to walk” Luke rides for transportation but every so often he rides for exercise. He believes the most difficult part of getting around are the limitations on where he can travel. He always wears a helmet due to a past minor collision with a car. He used the phone templates to explain how the app would work for route progress. He suggested the app always show large directional arrows and large words for the anticipated turn (pic1), a 10 second beeping countdown based on your current/ average speed with a flashing arrow. When it’s time to turn the whole app could become a different color (pic3).
18 19
TREKET: MICHAEL CALE LEROY
RESEARCH: RESULTS
MARY LANGE Age: 20 Major: Architecture Status: just beginning to commute to and from school Quote: “I could use an app like this because I am just starting to learn the roads that work well to ride a bike on!� Mary recently purchased a bike to ride to and from class. She stated that she would love to use an app like this because she is still unfamiliar with the road safety in and around campus. She is concerned for her well–being, even when she is obeying traffic laws is wary of cars. She used her templates to show that she would like to be alerted of changes in traffic patterns, such as approaching signs, stoplights, and crosswalks (pic1). She would also like to be notified when her friends are nearby. Lastly she wants to know where the the nearest bike shop is located in case her bike is in need of repair (pic2).
AARON PYNOS Age: 24 Profession: Music Business Status: leisure rider Quote: “If I could bike everywhere I would, unfortunately we live in the suburbs.” Aaron lives in Pittsburgh and rides his bike occasionally for fun. He stated that he would most likely ride his bike more if he didn’t live in the suburbs. Occasionally, he cycles to nearby restaurants or small adventures. Aaron is most nervous of road hazards because of a past episode with a pothole which caused him to fly off his bike. Aaron drew two images on his phone templates. One shows that he thinks the route should always show the anticipated turning direction (pic1). His other image depicts blinking a color when approaching the next turn (pic2).
20 21
TREKET: MICHAEL CALE LEROY
RESEARCH: RESULTS
ALEX AUTRAN Age: 20 Major: Biomedical Engineering Status: active commuter & leisurely rider Quote: “It’s (biking) the quickest way to get anywhere less than 2 miles, especially when campus is busy (with pedestrians).” Alex bikes several times a day, mostly to and from class. This adds up to a few miles. He also enjoys leisurely bike rides with friends and recently introduced his girlfriend, Claire, to biking. Alex expressed difficulty in finding a safe place to lock his bike and dealing with heavy foot traffic such as on campus. He used his phone template to depict first seeing a route overview (pic1). He would then like to see a street view while riding (pic2). Alex also expressed his desire to easily access bike racks and safe areas to leave his vehicle. He would like this to appear in the app when the rider is close to his destination (pic4).
EMILY MOHR Age: 21 Major: Architecture Status: mostly leisure rider Quote: “bikes are fun, but I only ride them when it’s nice outside... and I’m in the mood... and already late to class” Emily usually rides her bike for leisure but occasionally rides to class when she is running late. She says her biggest fear when biking is moving cars as well as parked cars opening their doors. She often uses side roads or alternative routes to avoid congestion, forfeiting road proper quality. Her sketches signified that she would like to know when to start signalling prior to turns (pic 1 & 2). She would also like the app to denote where in the lane her bike should be riding (pic 3). Lastly she would like to be alerted when lane conditions change with large eye–catching notifications (pic4).
22 23
TREKET: MICHAEL CALE LEROY
RESEARCH: RESULTS
STEVE SARVER Age: 21 Major: Architecture Status: occasionally participates in races & actively commutes Quote: “I bike a lot but I should more. Everyone should bike more” Steve is very familiar with biking and even races occasionally. He stated that he would use this app because he is very particular about his bike and doesn’t want to damage it. Steve used his templates to explain that he wanted to discover alternative biking routes such as greenways vs. bike trails vs. paved roads. He added he would like the app to alert him of approaching rear traffic including what is approaching and on what side (pic1). Steve would like to be alerted of the type of road he will be travelling such as whether it is a hard-paved trail, greenway or road route (pic2). Lastly he wants information on water stops are on his route so he could make a pit stop if needed (pic3).
EXISTING COMPETITION
B.iCycle Price: 9.99
Cycle Tracker Pro Price: 4.99
Cyclemeter GPS Cycling and Running Price: 4.99
Features: Tracks time, speed, distance, calories, and altitude Integrates with OpenStreetMaps to view user submitted bike trails
Features: Easy to use interface Tracks your cycling information Integrate music from phone
Features: Tracks cycling information Records heart beat with purchased extension App announcements regarding speed, performance, time Comparison with prior workouts
Where it could improve: Main function is a cyclometer No GPS routing or rerouting Lacks rating system for travelled roads App Store rating: “I have tested a bunch of similar apps, and had high expectations for this one given the very high price tag. The interface leaves much to be desired, and the app lacks basic features found in many free products...”
Where it could improve: Requires use of headphone which are illegal when cycling App often fails to open and/or track No GPS routing or rerouting Lacks rating system for travelled roads App Store rating: “This app is okay. Kind of buggy and often stops working while I am riding. I wish that there were more to it.”
Where it could improve: No GPS routing or rerouting Lacks rating system for travelled roads Lacks planning for day to day biking Marathons segment suited for runners App Store rating: “Great app for cycling; I only wish it had more features to support long distance touring.”
24 25
TREKET: MICHAEL CALE LEROY
RESEARCH: EXISTING COMPETITION
OVERALL There are many bicycle and active transportation apps that currently exist in the app store. To the left I have highlighted five of the top rated biking apps. POSITIVES Map My Ride Price: 2.99
Cycle Watch Price: 1.99
Features: Tracks route with cycling information Bragging rights on Facebook about stats Audio alerts while en route
Features: Tracks route with cycling information Rides organized by routes and date Tracks fitness
Where it could improve: No GPS routing or rerouting Lacks rating system for travelled roads It is only supposed to track your path “Routes near you” feature not helpful
Where it could improve: No GPS routing or rerouting Lacks rating system for travelled roads Intended only for path tracking Lacks social media aspect Not reliable
App Store rating: “Love that I can use it for both riding and running and can either view them together or separated.”
App Store rating: “Unable to sync with Facebook and Twitter I really like this app but you guys need to fix these bugs PLEASE.”
Most of these apps have the possibility of tracking fitness, connecting to Facebook, Twitter, etc. Overall, audio alerts and sounds have positive feedback from users. NEGATIVES Most apps are created for the purpose of tracking one’s own progress. No apps offer a turn–by–turn GPS option. A road rating system does not exist in any of the current apps. None of the apps offer a community events board. Long distance route advice is also lacking in all the apps.
EXPERIENCE A major challenge when designing this biking app was engineering it to be safe and extremely easy to use while en route. Considerations included: personalization, clear and concise alerts, audio and visual alerts for route turns, visual needs for day time and night time use; access points, routes, decision points, destinations, and etc. The first step in creating the app was to create a detailed list of all the criteria that would be needed for each aspect of the app. The different aspects of the app included Safe Route Search, Long Route Advice, Community Events, and Rating Roads and/or Areas the biker previously travelled.
26 27
SAFE ROUTE
Features: Search for a Destination start from current location start from separate location add second destination Route Confirmation easily changeable start button view turn–by–turn Turn–by–Turn Directions rating from this screen option start/end button easy to get back to en route calorie/weather/time predictions En Route GPS Directions active & easily accessible directions captivating visual & audio directors view turn–by–turn live action alerts: accidents/weather
LONG ROUTE
Features: Search for a Destination start from one city end in another city Advice Story Results multiple results based on similar trips rated by variety of other users Individual Advice Stories option of rating story map time frame stops on the way difficulty level
EVENTS
Features: Events List list of occurring events based on user’s location discloses RSVP’d events connect with Facebook shows Facebook friends attending reveals number of guests Individual Events time date about location friends attending number attending RSVP option connect with Facebook
RATE
Features: Search for a Location can start from turn–by–turn enables search for location select either road or area Select Area/Road draw on screen if road: snap drawings to roads if area, able to draw all over map Confirm Area/Road show calculated area/road ask to confirm option of going back/restart switch option to area/road Report Problem categories of possible problems select from numerous options per category
WIRE FRAMES
AREA The next step in creating the user experience design of the app was to wire frame the separate pages of the app. This enabled me to understand the requirements for each individual page of the app.
ROAD at BLAH STREET
Color in General area that has been a problem
From there, the individual pages of the app were integrated into an overall map of the app (shown right). This revealed how not only each individual page would work, but how the app as a whole would perform. It also pointed out any flaws in the design that had been overlooked.
two screens from wire framing the overall app map used to explore user experience design
28 29
TREKET: MICHAEL CALE LEROY
EXPERIENCE: WIRE FRAMES
START HERE
What would you like to do?
Route a Safe Route Report an Area/Road
Route Overview based on your safety concerns
Long Route Local Bike Events
start north on this street and then turn left onto blah street and then turn right onto other street total time: infinity estimated calories burned: 1 weather predictions/WARNING
MAP
at BLAH STREET THIS WEEK
Search Location or Road
Search Starting Point
Search Location
Search Destination
From
START
automatically
You have arrived at your destination: 1835 N 4th St
at BLAH STREET
automatically
Drag route to change
Event 1 Event 2
Current Location
Event 3
THIS MONTH
Or Add a Long Route story
Event 1 Event 2 Event 3 JANUARY
select one
after searching 2 places when button hasn’t lit up
AREA
AREA
ROAD
Select the area of the road that is a problem
Color in General area that has been a problem
when button lights up
ROAD Event 1 Time & Date Location This is a description of event 1 which is probably going to be super cool and fun because it has to do with bikes!
Route Name Tagline Columbus to Cinci Safe easy route Columbus to Cincinnati Route with not too many hills Columbus/Dayton/Cincinnati 3 Day trip
There are no accidents reported on your route Would you like to...
There is an accident in the future of your route on the corner of High Street and 3rd Avenue!
Report an accident at current location?
Continue Route
Report an accident at previous location?
New Destination
Reroute to avoid
Find nearest bike store
Do you want to end your route?
Displaying Bike Racks and safety Levels
bike pump bike shower
yup nope
Reroute to start
RSVP:
ATTEND MAYBE
RATE
AREA
AREA
ROAD
YES
ROAD
IS THIS CORRECT?
IS THIS CORRECT?
YES
NO
NO
Columbus to Cinci Safe easy route Route overview would go here that talks about the basics of the trip. Road 1 Road 2 Road 3 Stop 1 Road 4
AREA
ROAD
What’s Wrong With This Area/Road
Crime Bad Road Quality Construction Cars Busy Roads Pedestrians Intersections Animals Hills
30 31
MOCK–UPS ON MOQUPS.COM Creating an app map enabled discovery of holes and flaws in the user experience design. Next, more needed to be accomplished to understand the functions of the app. Using the website Moqups allowed me to upload actual pages designed for the app and have potential users work through them. I gave them a few goals to try to accomplish with the app. Making this “moqup” was one of the most beneficial components done to fully understand the user experience design. The images to the left show the app designs with the clickable links highlighted in blue. Holding the shift key enables the user to view the highlighted links; or the mouse can be scrolled over these areas to reveal link.
DESIGN DIRECTION A clear design direction was needed before the interface design work was initiated. Multiple design directions were outlined but in the end, The Suave Mathematician, was the final direction chosen. Designing the interface to appear “cool” and “badass,” should lead the user to want to be seen using the app. The design direction was inspired by real life elements from travel and roadways.
THE SUAVE MATHEMATICIAN Have you ever tried lying down on a thousand vibrating phones? Experience the titillating rush of using Treket! Each use of this app makes you feel like you are computing an algebraic equation with extreme ease. After a closer look you might just realize there is a certain simplicity in the complexity of the design. Stimulate your senses by exploring the world through Treket. Attributes: Scientific Badass Classy Technical Enigmatic Progressive
32 33
IF THE DESIGN DIRECTION WERE A . . . Magazine: Esquire Celebrity: Daniel Craig Motor Vehicle: Rolls Royce
TREKET: MICHAEL CALE LEROY
DESIGN DIRECTION: COLOR AND PATTERN
COLORS AND PATTERNS
Treket CySafe Pedal Plan Sprockpas CyLine Transcycle final six names for app
36 37
TREKET: MICHAEL CALE LEROY
DESIGN DIRECTION: NAMING PROCESS
TREKET THE NAMING PROCESS The app name is one of the most fundamentally important aspects of the branding. Once an app is released to the app store, the name of the app will determine which users download it. When determining a brand name, considerations were target market, app features, design direction, etc.
images show how to use the word, Treket, in a sentence
The first step in deciding on a name was to list out all the possible words associated with the app. Some of the broad categories included biking, cycling, safety, maps, routes, destinations, rides, and exercise. Next a word play process began. I experimented with the words by combining them, splicing them, adding prefixes and suffixes, etc. The list was narrowed down to the six names listed to the left. Potential users were asked to determine and vote on which name best suited the goals of the app. The final name was determined to be Treket.
I’m just going to use Treket, I’ll be there soon!
What’s the best way to bike to your house?
Oh, we can just Treket!
MARK DEVELOPMENT TREKET
TREKET
TREKET
DEVELOPMENT
TREKET
TREKET
From the start, my inspiration for the branding of the app was a bike frame. I loved the way a bike frame created two triangles in it’s negative space. Triangles quickly became a focus of the logo. Eventually the design evolved into an arrow. Other sources of inspiration include directional options, the typeface Bodoni, lines, circuit boards, and the idea of moving from place to place. FINAL LOGO
TREKET
TREKET
TREKET TREKET
TREKET
TREKET
TREKET
TREKET
The final logo draws inspiration from real life sources seen and associated with biking, roads, maps, and cities. It also clearly represents an arrow and forward movement. The grid applied within the logo identifies the arrow with a city grid and road navigation from an aerial perspective.
final logo and lockup with wordmark
IMPLEMENTATION FINAL DESIGN Treket is a highly personalized biking GPS application. The final look and feel reflect the goals of the design direction. The app design is effective due to user experience research. Treket is the product of a combination of many different aspects of research and user experience design.
logo applied to app button dark and light version of the home screen displaying the options: find a safe route, long route search, report area/road, and local bike events
40 41
TREKET: MICHAEL CALE LEROY
IMPLEMENTATION: FINAL DESIGN
HOME SCREEN
completed app button among others on iPhone home screen home screen showing the option of current weather instead of current location option
42 43
TREKET: MICHAEL CALE LEROY
IMPLEMENTATION: HOME SCREEN
drop down menu that can be utilized at any point throughout the app
FIND A SAFE ROUTE
START
START
search for a safe route
route overview, user can change route by dragging it
direction list, viewable by moving scrolling bar at bottom of previous screen, top of this screen
en route view of road
visuals to notify user of approaching turn
end route screen reveals places to lock bike and safety levels in the area
LONG ROUTE
long route search results discloses various route options from other users user initiated story describing specific long route experience; includes map, rating, time, roads, and personal story
LOCAL BIKE EVENTS local area bike events arranged in order by date and time specific bike event page displays map of the location and event information: date and time, location, event details, friends attending, and RSVP option
REPORT AREA/ROAD AREA
ROAD
SUBMIT
search for a general area or road to report
map before reporting an area
AREA
ROAD
SUBMIT
map with hand traced line to report road
AREA
ROAD
SUBMIT
map with hand drawn line to report area
AREA
ROAD
YES
system confirmation on report
NO
specific options available listed under general categories to report
VIDEO MOTION GRAPHICS VIDEO After the app was designed and the individual screen pages completed, a video was created to demonstrate how the app would actually work. Seeing an app move is very different from looking at the screen shots. The video portrays the different functions of the app. Find a Safe Route is the primary function so it was also the main segment of the video. Also included in the video is a tutorial on navigating between the screens and app functioning while en route. The video displays how to easily switch from navigation to rating a road previously travelled. The Local Bike Events portion of the app is also highlighted in the video. introduction segment of the video
The video displays similar visual language as that used in the app. A dynamic, color changing circle was employed to move around the app depicting user selections and gestures.
50 51
TREKET: MICHAEL CALE LEROY
IMPLEMENTATION: VIDEO
scrolling bar to reveal the turn–by–turn directions en route segment of video displays how the audio and visual alerts function in the app
swipe feature of the turn–by–turn allows the user to rate a road directly from their route drawing on the map to report an area
selection of a button pop up menu
MOVING FORWARD THINKING AHEAD Most apps have frequent updates delivered to phones from the app store. If I were to continue working on this app, following are some things that I would continue to develop to make the app even more powerful. Additional Attributes: Cycle meter with the purpose of tracking progress, speed, and safety on route Exercise routes that would not need a particular destination Personal profile that can be linked with Facebook to brag about workouts
REFLECTION In retrospect, I would love to be able to expand the app even further and possibly develop Treket into a fully functional app. Overall, I learned a lot about user interface design, design research, and designing with the intention of solving problems. This project expanded my knowledge of interface designing. This is my first interactive design project so designing a user experience was completely new to me. I discovered the importance of using the most direct approach to perform a function. I also learned how to create a logical workflow and work from nothing into a functional project. Designing with the intention of enticing return users was another challenge. An app used once is not a success. An app that users frequently rely on is successful. I learned how to create intuitive and inviting sections of the app
that will make cyclists want to use it time and time again. Designing for special needs was another challenging aspect of this app. Creating a GPS app had the added difficulty of accessibility. To present the app well, I had to design with larger type sizes and more attention grabbing alerts. It was rewarding to find an aesthetically pleasing look as well as one that would function optimally. In hindsight I am pleased with the end result of the project and content. Working through this class has taught me a lot; not only about design but also about myself. I am grateful for the opportunity to learn and stretch my abilities.
REFERENCES Krausz, John, and Vera van der Reis Krausz. The Bicycling Book. New York City, NY: The Dial Press, 1982. Baker, Arnie, M.D. The Essential Cyclist. New York City, NY: The Lyons Press, 1998. Clarke, Andy. Smart Cycling: Promoting Safety, Fun, Fitness, and the Environment. N.p.: Human Kinetics, 2010. “Bicycle Safety Tips for Adults.” National Highway Traffic Safety Administration. Podcast video. 2006. Pedestrian Transit Guides for Safety Agencies. N.p.: U.S. Department of Transportation, Federal Highway Administration, 2008. Good Practices Guide for Bicycle Safety Education. N.p.: U.S. Department of Transportation, Federal Highway Administration, n.d. Bicycle Road Safety Audit Guidelines and Prompt Lists. N.p.: U.S. Department of Transportation, Federal Highway Administration, 2012. Hewitt, Ben, ed. Bicycling Magazine’s 1000 All-Time Best Tips. N.p.: Rodale Books, 2005. Simon, Lyle. All About Bicycle Safety Including Notable Training and Race Deaths, the Rules of the Road, and Safety Devices. N.p.: Webster’s Digital Services, 2011. 54 55
TREKET: MICHAEL CALE LEROY
REFERENCES AND SPECIAL THANKS
SPECIAL THANKS Thanks to everyone who helped me with this project. I truly believe that Treket is an app that could be produced and serve as a tool to increase bicycle roadway safety. The success of my design is largely due to other’s contributions. This work would not have been possible without the guidance of my senior thesis advisor, Paul Nini, and my senior thesis professor, Peter Chan. Thanks to all the users who underwent testing, especially: Amy LeRoy, Luke Anderson, Mary Lange, Aaron Pynos, Alex Autran, Emily Mohr, and Steve Sarver. Another special thanks goes out to Luke Anderson for his help with printing, and to Brandon Smith for user experience advice. Thanks to all my classmates for
constant feedback on my work; especially Alex Safchuk, Kelly McNicholas, Natalie D’Andrea, and Hanna Klein for dealing with my constant pestering. Thanks to my Mother, Debby LeRoy, for making me, that was pretty cool; but also for taking the time to edit all my work on this project. Thanks to anyone else who contributed to my design and process work! Thanks Again, Michael Cale LeRoy