OffRoads
A Persuasive Website for Motivation of Fuel Conservation Through
Raised Awareness of Effects of Current Energy Consumption
Presentation of Design
During the original design phase, this application was called “Paths”, as will be noted in the low fidelity prototype screen shots. The name of this application was a struggle. The desire for a catchy and short name was never successful. The acronym “Paths” wasn’t acceptable (“Preferred Alternative Transportation Help System”). “Roads” (“Reliable Outcome Altenative Driving System) was also tested out. Both of these acronyms seemed too contrived. So, the team strayed away from acronyms and settled on “OffRoads”. However, the quest for a catchy name continues.
Website - Calculator Portion
The main portion of the OffRoads website will provide summary information about the possible benefits of switching from primary car transportation to mass transit. It will allow users to browse default values and enter their own specialized information to see the specific results they would attain. Entering this information will be very easy to do and browsing the information will be simple also, as the website has a very shallow tree of screens. In the design explored in this prototype, a very simple, sleek, colorful and modern look is given.
There will be distinct portions that will each have the purpose of calculating and presenting a different aspect of information. One section will provide the cost savings for the user. To calculate this, information will be needed about a user’s current commute and the alternative commute. Other factors will be considered such as car maintenance and ownership. Another section will calculate environmental benefits. This will mostly be expressed in carbon dioxide (CO2) emissions, but it may include other effects or indicators of pollution impact. The last section will provide personal health and wellness information. This will include exercise and time savings. Exercise will be expressed in calories burned. Time can be associated with a user’s favorite pastime such as a number of books read.
The interface will rely mostly on numeric entry fields for specifying the parameters that will be used for the calculations. It will also provide default values so users will quickly see the estimated possible results. It may rely on using existing calculators to determine several aspects of the formulae. As previously mentioned, to suggest local public transit routes, the wmata.com trip calculator will be used. The website terrapass.com calculates annual emissions based on the make, model, and year of car for a given number of miles. There is a feature on edmunds.com that calculates the true cost of owning a car, again based on the make/model, etc.
The main page (figure 1) will simply have a colorful bar for each of the categories of benefits. While the colorful background is visually appealing, it may need to be modified if it is deemed to be not easily readable or accessible for many users (continued usability testing will help determine this). Selecting anywhere on the colored bar will move the user to the detailed level where they can see how the total was calculated and they can enter their personal data to tailor the results more specifically to them. This selection mode may be a bit different for users, as they are used to having to click on a single small button or link as opposed to an entire screen region, so we will want to find a visual cue to demonstrate this to users. This mode will not seem strange though as clicking on any element within that screen region will provide the desired behavior, they just may not realize that they can click anywhere in the colored block to get the same effect. It is unfortunate that this is the expectation of how web interfaces work, but since it is the normal design, we will find a way to adhere to it and unfortunately this design may not be possible with certain technologies.
Originally, it was thought that the website would provide multiple distinct modes that the user would have to choose from that would require varying amounts of time to enter data. This revised design will not require the different modes because the default values will be filled in for all components, allowing the user to pick and choose which values he/she would like to alter. In this way, they will customize how they use this system to be as quick and rough or as detailed and exact as they prefer. If they think the default estimates are close enough to their reality then they can leave them as they are. If they don’t have the time to determine a more accurate value that is closer to their situation, then they don’t have to, they can defer it to another time. Eventually, this system will allow profiles to be stored so that users can come back and refine them as changes occur or as they gather data rather than having to re-enter their data.
The secondary pages will show the details of how the totals were calculated (see figure 2). This secondary page should be sufficient for the “Emissions”, “Health”, “Foreign Dependence”, and “Time” categories. However, the “Money” display will in actuality require another level of retractable windows since there are so many aspects and details to this final calculation (see screen shot 3). Therefore, the sample screen shot 2 will be more indicative of the design for the other categories in a future design (unfortunately not the “Money” screen). A design that is similar to other interfaces such as the one in Flash that allows a window to be collapsed (when the black triangle is selected) to just a header will be employed so that the summary information for sub-groupings of data can be retained while the details are hidden until needed. This website should only need to be 2-3 levels deep in terms of screens, although the secondary screens will have this capability to hide/show panels. In reality, all the secondary windows could be implemented as these expanding/collapsing panels from the first page, but that would make for a very lengthy page if all panels were expanded simultaneously.
All data on the website that the user can enter will be denoted so that it is obvious to the user. A different color will be used for the font, but for color blind users another visual cue will also be used such as a pointing arrow.
For the many questions that are asked of the user, there will be a hover-like pop-up that will give them more details if necessary. For example, where they will see the question: “What kind of car do you drive?” The pull down menu has the following selections: “Small Sedan”, “Medium Sedan”, “Large Sedan”, “4WD Sport Utility Vehicle”, “Minivan”. The hover information will give examples of what cars fall into these categories: “Small sedan examples are the Chevrolet Cobalt, Ford Focus, Honda Civic. Medium sedan examples are the Chevrolet Impala, Ford Fusion, Honda Accord, Toyota Camry. Large Sedans are the Buick Lucerne, Toyota Avalon, Nissan Maxima.”27 Having this kind of information in a hover form will prevent the user from having to do a lot of window opens/closes. It will need to be confirmed that this is not a violation of any accessibility guidelines.
For a few of the secondary windows, the user will be able to select how the results are expressed. For example, the “Time” benefits can be expressed as a number of calories burned off which can in turn be expressed as a favorite snack, purely for fun. For example, if the new commute requires 1 mile of walking per day, that would be equivalent of 93 calories expended per day. Annually, this would be 23,250 calories. Merely as a form of entertainment, the user could see that this is equivalent to 516 Oreos (45 calories per). Or they could simply see how many miles that would be, in this case 250 miles, roughly equivalent to the distance from Washington, D.C. to New York City28. Users would feel a sense of accomplishment to know that they walked such a long way when it is presented in this manner. It helps a user see that a little bit every day can accumulate to something big.
Figure 1 – Low Fidelity Prototype : Main Screen
This main screen is intentionally stream-lined and uncluttered and uses a modern palette of colors. This design is missing access to the blog which should appear as a button on the top portion, but this would appear in an operational version. Also, there will always be a Help button (shown in the High Fidelity Prototype later). The slogan “Make a Switch and Make a Difference” will appear throughout the application. (Note the name of the application changed after this design process).
Figure 2 – Low Fidelity Prototype : Displaying Breakdown of Annual Dollar Savings
Note that a “Back” button appears in the upper right hand corner of all screens below the first.
Figure 3 – Low Fidelity Prototype : Entering Current Commute Information
Sequence of Events for Typical Usage
The screen shots show a typical sequence of events:
1. Enter website and browse summary information (figure 1)
2. Select one of the areas of interest
3. View average values for data (figures 2 and 3)
Note: Figure 2 with collapsed panels will only be applicable to the “Money” benefit. The other benefits will go directly to a screen that looks more like figure 3 where data is entered.
4. Change the average values to be more representative of users actual values (figure 3)
5. View updated summary results (figure 1)
Figure 4 - Transition Diagram : Website
Task Details
There will be many specific calculations that will help provide summary information for the user. Some calculations will be of more interest to some users than others, as users interest in this website will have different motivations from economical to political to environmental to health. The areas of savings fall into three major areas: monetary, environmental, and personal.
Monetary Savings
This section will query the user about his current commute: how many days a week, what time of day, from what location to what destination, etc. This information will be used to determine current gas utilization and car maintenance costs. There are many authorities that provide supporting data to make these calculations. A primary source will be the American Automotive Association (AAA) and the Edmunds online reference. Current gasoline costs will be used to calculate this expense with respect to the users car.
As an optional adjustment to the monetary savings, the user will be asked about the possible sale of an existing car or if the user currently does not own a car and is considering a purchase. This may also be of interest to a small group of users who are visiting this website to determine how much they already are saving by using mass transit, but this group is not a goal of the service provided by this website.
Also in this portion of the website, the user will be assisted in finding an alternate method for his current commute via car. Finding the alternate commute will not be the primary goal of this website, but will be provided via existing websites in a first version but will be improved on in later releases. The primary goal of this portion of this task is to calculate the cost associated with the alternative solution. The Washington Metro Transit Authority1 (WMATA) provides just such a service currently for the Washington metropolitan area, including College Park, Maryland. However, the intention is that this website not be limited to this region, as it is applicable to all areas of the country, but it would rely on the existence of such a functionality, as offered via the local government or transportation authority.
In summation then, this portion of the website will calculate :
1. Current gas utilization multiplied times current gasoline prices +
2. Car maintenance costs +
3. Car purchase costs (optional) -
4. New commute’s cost =
5. Total net savings.
Environmental Effects
This portion of the website will calculate the total environmental effects of using less gasoline. It will not only consider the reduced CO2 emissions, but the environmental impact of the oil refinement process, although this information has not been obtained yet. Unfortunately, it will not be feasible to determine the environmental impact of the increase in mass transit use, but it is assumed that this would be fairly negligible.
Personal Effects
An often overlooked benefit of a daily public transportation commute is the increase in free time afforded by not driving. In this section of the website, the user will see how much time is saved and how much exercise is to be gained by making the switch to public transportation. While sitting on a bus or train, commuters are able to enjoy activities that they might not otherwise be able to enjoy as much. Reading, needle work, puzzles, even personal or professional phone calls are common activities you will see on any public bus or train. The benefits can be expressed in hours or in something more tangible as a number of books read, that will be selectable by the user via a drop-down box. For example, if the user would like free time expressed in terms of books read, then the calculation will be made to convert the number of hours to a number of books. Arguably, the “free time” is limited in what can be done, i.e. one can not be cleaning their house while commuting to work. But it is important for people to realize that 2 hours of driving to and from work is 2 hours wasted in a day. However, 2 hours in a train can be 2 hours of reading that they would have done at home. Since a certain percentage of time is spent getting to and from public transit, the website will adjust the free time accordingly so as not to have the unrealistic expectation that 100% of commute time can be considered free time. The time it takes to walk to the local station will also be deducted from the free time so that it really represents time for other pursuits.
When a commuter changes from driving to mass transit, often a small amount of exercise is added to their daily routine. While this may be small on a daily basis, when multiplied over the frequency of a 5-day a week commute for 50 or so weeks a year, the increase in physical activity may be significant and should be considered a serious benefit. The profits of this can be equated by the user to a number of calories burned and the distance walked. Users will be able to see this benefit expressed both ways. The miles walked will be displayed in the number of miles and also a sample of how much that is will be provided. For example, if they would walk 250 miles in the course of a year, they will be told that they would successfully walk from Washington, D.C. to New York City! They may want to take this one step further and translate that into a number of their favorite snack (such as Oreos). This could be a great advertisement tie-in also for generating revenue for the website support.
Methods of Usage
The user will be able to use this website in three different ways. The user will have control over the accuracy of the results in several different levels of detail, depending on the time allowance and interest:
1. Default Data – In this case, the user will not need to enter any data specific to his commute. Using this method, the information displayed in this mode will be obtained from national averages. In a later revision of this website, these default values could also be based on the average results of past users. The bottom line numbers will hopefully entice the user to spend the time to enter personal information to see how significant the particular results may be.
2. Quick Calc – This mode will allow the user to see tailored results with only a requirement of a few minutes time to enter a minimal set of data with regards to his current commute. They may just need to answer these questions: “How many miles a year do you typically drive?” (select from a small list) and “What kind of car do you drive?” (sedan, SUV, etc.). These few bits of information are good indicators of current commute costs. After data from different regions of the country have been gathered via this website, a zip code could help refine this data further. The purpose of this method is to keep the users interest long enough to see tailored results. The hope is that they will continue on to the Detailed Estimate at some point, perhaps if necessary, at a more convenient time.
3. Detailed Estimate – To get a detailed estimate that is more accurate, the user will need to spend some more time entering more specific information such as the exact commute distance
User Profile
Most users will be people who currently commute to work regularly by car. These users will have many reasons for taking interest in this website:
1. Curiosity about current gas consumption
2. Interest in the environmental repercussions of current daily commute
3. Desire to change long drive to an alternative method
4. Justification for consideration of the possibility of not owning a car
5. Political concern for the U.S. dependence on foreign oil
6. Desire to reduce stress of driving
7. Desire to increase physical activity
8. Interest in increasing free time
There may also be a small percentage of curious users who would like to check some portions of the website for fun. But the hope would be that some of these happenstance visitors would be so profoundly influenced by the data that they may consider reducing their gas consumption too.
Typical Tasks
There are many different categories of tasks that this website will address. Therefore there are many different tasks that will need to be delineated. The following are a subset of tasks that provide a robust variety that were considered in the design.
1. A man who lives in Silver Spring, Maryland and works in Crystal City, Virginia thinks that the price of gas has gotten so high that it would be cheaper to use public transportation instead of driving his minivan to work everyday. He would like to know what the difference in cost is between the two methods of commuting so that he may decide if he wants to change. He is not willing to give up his car due to weekend trips and local convenience, but he is willing to consider the idea of mass transit for his 5-day work week. He does not think he is concerned with the other possible benefits, such as environmental impacts, but he would like to review this information if easily available. He would like to spend the time required to know exactly what the results would be so he is willing to provide all the detailed information about his daily commute. This would be a most common type of user.
2. A woman has grown increasingly concerned that the use of her SUV has such adverse ecological effects that she may consider not using it for her daily commute, and possibly even selling it and relying solely on public transportation. She would like to know just how much CO2 emissions her SUV is responsible for. After visiting the “myfootprint” website and seeing how wasteful she is, she would like to know what the net effects of her gas utilization really are so that she may possibly be able to adjust her usage. She is also willing to spend the time necessary to provide detailed information about her current commute. The concern for the environment will be one of the more common motivators, but not the most, so this example will be fairly common.
3. A student drives his 2000 Toyota Camry to University of Maryland campus 4 days a week from Vienna, Virginia. His classes are scheduled such that he does not have to travel during rush hour. He wonders whether he could afford the time to take public transit instead of drive. The student user will probably be more rare than the professional commuter, so this task may not be as common.
4. A recent American University graduate still lives in Tenleytown and just got a job in Georgetown. He is wondering whether it is worth buying a car or not for his work commute primarily. Parking at his new job costs $15 per day. He only periodically needs a car on the weekend for visiting relatives in Philadelphia and various errands around the city and suburbs. There will probably be very few people in such a situation in which they are currently considering a car purchase, so this task will not happen very regularly.
5. A man who lives near Suitland, Maryland works at the Smithsonian from 9-5. He is tired of the drive and the wasted time sitting in a car. He does not mind adding some walking for exercise to his daily routine, even if it adds additional time to his daily commute. His company will give him $105 per month in Metro fares. He currently pays $150 a month in parking fees. He would like to get a quick estimate without spending the time to provide details about his commute, but would reconsider spending more time if the results looked significant. This example will probably be fairly common.
6. A young woman is concerned about the United States dependence on foreign oil. She would like to do anything she can to minimize her contribution to this. She wants to know how many barrels of oil she has been using in the past year of her commute from Rockville, Maryland to Springfield, Virginia. She is willing to spend some time providing the parameters necessary to make the calculations accurate, but not a lot. Political concerns will probably not be high motivators, but will still occur, so this may be a less likely example than many others.
7. An older couple has recently been in an accident in their only car and it needs to be replaced. They would like to save up to take a month long European cruise. They are trying to find out how much money they can save from the purchase of a new car by learning to use the bus system to get to their doctors appointments and the grocery store from their apartment on Connecticut Avenue in D.C. This is probably the rarest type of usage and indeed, it may not be within the scope of this system to address this case.
These are just a few examples that can be used to test the efficacy of this website. There are many other similar situations that will need to be considered to have a complete and balanced sample of the wide range of possible users. This list of typical tasks may need reconsideration and some expansion in scope and detail as progress is made with the design of the system.
Help and Tutorial
Help will be provided in two forms: short context-sensitive help text and movie like tutorials. The help text will be provided in the form of a popup dialog box. It will be used to provide information about a particular field if the user needs clarification of the input required. It will also be used for error reporting. Figure 10 shows a sample of this kind of help text.
The movie tutorial will tell the user step-by-step how to use the system. It will show the user exactly how to perform the most common tasks through use of a video to show exactly where to click and what to enter. An audio narrative will explain the features.
Website - Blog and Forum
The website portion of the project that allows users to post and read messages will be known as OffRoads Blog and OffRoads Forum. The blog will allow the users to access information and stories left by other users. The Forum will be more structured for help and feedback.
Account Information
Users will be able to create an account by clicking the appropriate links on the website. They will specify their full name, last name, and email address, however, these fields are not mandatory. The only mandatory fields are the nickname and password, both used to log in. Users will be warned that if they do not provide a working email address, then they cannot request their password via a “Forgot My Username” or “Forgot My Password” link. This is done to match design standards of security. The site does not contain important identity information, however, if users wish to leave their name and email out of the database, they can easily choose to do so.
The account information will not have anything to do with the Cost Calculators, or not as of now. In the initial release, the Cost Calculators will only maintain averages for an “easy comparison” based on all the users’ inputs. The more advanced and time consuming calculators will be user driven, via entering values in text boxes.
The long term plan is to coordinate both the user accounts and the flash so that they can save their preferences as well as previous data. The way to do this is to link PHP to a database and to the flash. More research will be necessary on this topic to understand the details.
Access without Logging in
Access without logging in is limited, but allowed and the users will have read only access to the blogs and forums. This will allow users to get involved without making a commitment that is often perceived when you have to enter personal information or create an account. The user may read any posting on all the pages, but may not respond. It is necessary to log in or make an account in order to post properly. It will be verified that the user knows that any post can be viewed publicly without an account and any member can answer any post.
Blog Usage
The actual blogs can be whatever the user or the Webmaster of the site wants to post about. It can be different each day or it can be changed each week. If this site does become a success, there may be hundreds of users, and this will encourage more interaction and more frequent updates.
Many blog websites make categories the user can go into and then find an appropriate blog for his or her post. Categories like Introduction and Help sections are normal. In this case we would have more sections on “Public Transportation Options” or “Find a Ride Here” kinds of blogs where users can find appropriate outlets for their blogs.
There will be a wide variety of users and all with be in the demographic area of Washington DC Metro. It will be assumed that more of the users are considered novice or intermediate users. Therefore there will not be very many blog sections, but just a few to have some variety. They will be informal and very open to whatever the users want to discuss.
Forums Usage The forums part of the website is more structured in the way its organized. It is a place to post help information, website feedback information, and request or make new accounts and passwords.
This section is very similar to blogs so it might be appropriate to combine them into one. This is something that will be evaluated later on. The reason is to give the user or guest many options to the site, but to not overburden them with complexity or cause confusion.
Mobile Device
The mobile device aspect of this project is designed to target a broader audience than the website alone could reach. The limitations of designing websites to be viewed from cellular phones and PDA’s are significant, and will result in a simpler interface with fewer options. The benefit however is that this site can be visited from anywhere with service and a cell phone. While the number of users with PCs in the US is high, 223 million, compared to the next highest country – Japan with 69 million , the number of users with cellular phones has risen to 207 million in 2005, representing 69% of the U.S. population . It is reasonable to assume that there is overlap between the pc and cell phone users, but the convenience and portability of the mobile device ROADS website should pull in additional users.
The mobile device website will be written using Wireless Markup Language (WML), a language based on XML, but with stricter rules to allow sites to be viewed on a variety of phones, including older, limited monochrome screen phones. While more extensive languages like XHTML MP can provide more options and graphical capabilities, the phones that can handle this language are limited.
In order to conserve bandwidth and memory space (a significant problem for cellular phones) the page will be kept as simple as possible, with few graphics and extraneous information. WML pages can be set up in a “card deck” layout, which allows the device to download multiple pages at the same time, reducing the number of downloads when selecting links on the page.
Figure 5 - WML Preview Showing Simple Layout of a WML Page
Figure 6 - Transition Diagram : Mobile Device
Blue squares represent individual screens on the mobile device. The first three screens will be downloaded at the same time when the website is accessed.