Drinking and Driving

Say no to drinking and driving

Prepared bySalim Hassan

interaction design document

Persona

Age -16yrs old Gender - Female Grade - 10

JANE JONES

Jane is interested in world issues. She watches the news, but feels news only scratches the surface. She is an activegirl in school, fairly popular, and has developed greatleadership qualities at this age. She gets much of her information about the world through the internet. She often writes reports on world politics and conflict for school. No expert, but is good with the internet. Thinks news sites are boring and sometimes hard to navigate in order to find the information she’s looking for.

Experience - To find accurate information quickly and easily. End - To know how the Iranian nuclear issue developed to its current state and how serious this state is on a world scale. Life - Wants to go to school to study foreign affairs to pursue a career in teaching high‐school history.

Goals

ObjectiveCreate a visual list of websites, and identify the functionality, the strength, the weaknesses, and �nally recommendations for that par-ticular website. The websites mostly relate to Drinking and Driving, however some relate also to to websites that have great user func-tionality, and will possibly incorporate into my project. I looked at eight projects, a majority were some of the most visited websites related to drinking and driving, the remaining are referenced for their interactivity, and how information was presented.

FindingsBased on the analysis of 8 competitors, there are three websites, The E-Card by the Century Council, the Texas Department of Transpor-tation and the Virtual Bar that act as a perfect resource for someone to understand the e�ects of drinking and driving. My goal is to combine the elements from all of these pages into one page and incorporate the best elements into my project. All of these webpages o�er the user a good understanding of drinking and driving, however does not o�er the user the choice of making a positive change.

My projectJane Jones is my persona for this project, and she would like to visit a webpage that will provide accurate information, in a user friendly format, and allow her to take action after visiting the site. I will be incorporating elements of education, interactivity in terms of correct choices one can make, and lastly o�er the user downloadable item, or some type of reward for understanding the e�ects of drinking and driving.

Competitive Analysis

The Century Council

Site FunctionalityThe Century Council claims to be the leader in the �ght against drunk driving. The website is all HTML based, howver it has links to other websites that were created using �ash, and are interactive. The website infact tacles all aspects of drinking, mostly targeting youth and young adults.

StrengthsIt provides all the information you possibly are looking for with regards to youth and young adults when it comes to consuming alcohol. It has a clean look and loads very quickly.

Weaknesses The amount of information can be helpful, however can be di�cult to read due to the amount of information available on each topic. There are no quick bullet points. The site is di�cult to navigate once you click on certain topics. Information �ow is not user friendly.

RecommendationsThe site can be improved by reducing the amount of information that is available. If the content was presented interactively, it would be more e�ective. This website provides a good guideline for how to present information, however it can be improved in the amount of information that is presented. Steps that can be taken for parents to be involved is great part of this site, and will incorporate into my project.

URL http://www.centurycouncil.org/

Fourth of July E-Card from The Century Council

Site FunctionalityThe Century Council created this page, however it is completely separate from their site. This is an interactive journalism piece all by itself. The user clicks on all the areas on the screen, and it provides simple pop up information. The site is all done in Flash.

StrengthsIt provides a quick snapshot of how many people are killed during a particular period of time. It is presented in a very simple manner, and makes it easy for the user to relate to the information of how many people are killed due to drinking and driving.

Weaknesses It de�nitely does not get you excited about the idea of fourth of July. Some patriots could be o�ended by the idea, that a day of celebration, is infact a day of mourning.

RecommendationsIf the same concept could be applied to a variety of things that people deal with on a day to day basis, it would make this a more international site, and more people would be able to relate to it.

URL http://www.centurycouncil.org/ecards/july4th2010

Texas Department of Transportation

Site FunctionalityThe website is very simple, and provides information with regards to the laws in Texas, the consequences and alternatives to drinking and driving. The website is fully done in Flash. It shows all the elements of the law cracking down on drinking and driving, very authoritative.

StrengthsStrong use of video on the opening page of the webpage. It puts you in the shoes of the driver, and makes you realize the impact of drinking and driving. Very powerful use of imagery.

WeaknessesThe website is very dark, and could reduce on the amount of imagery. The type is also quite small. It can take quite a bit of time to load, specially with slow connections.

RecommendationsReducing the amount of video will help with the load times. Incor-porating slightly better imagery, might reduce the impact of the website appearing too dark.

URL http://texasdwi.org/

SIRE - Not for pro�t commercials on children in the Netherlands

Site FunctionalityThe website is complex, and o�ers the user information on all aspects of problems with children in the Netherlands. The website is �ash heavy, and highly interactive. It uses a combination of video, and computer graphics, to convey a strong mes-sage about the problems children face.

StrengthsVery quick load time considering the amount of information available to the user. The scenes are loaded seperately, and that also reduces the load time. Using a combination of di�erent graphic elements, conveys a very strong message to the user. It draws the user in by not revealing all the information unless all the buttons are clicked on.

WeaknessesIt is di�cult to navigate the website without clicking through all of the informa-tion. A user can get frustrated, waiting for the entire message to be revealed, and could lose interest. The counter is non realistic in terms of how many people have learned about the subject matter.

RecommendationsInforming the user about the content from the beginning would help the user understand what the website is about. Its not until a few clicks in that you realize its about children. Also having a translation for some of the elements that are in Dutch to English will increase the the breath of the audience. Overall, many of the elements from here will be used in the project on drinking and driving.

URL http://www.kinderenindekou.nl/index_en.asp

Virtual Bar

Site FunctionalityThis Shockwave page displays the e�ect drinking has on your Blood Alcohol Count. The site is clever in the way it calculates how much your BAC would be based on your gender, amount of food consumed, and how quickly a type of alcohol is consumed.

StrengthsVisually a very strong webpage which calculates quite accurately how alcohol is consumed in your body. The choices make this a truly interactive page. The friends page allows you to see how intoxicated your friends would be based on their individual weights as well. The countdown to reduce your BAC to Zero, is very e�ec-tive.

WeaknessesThe graphic element on the page is weak. Also showing consump-tion of food would help.

RecommendationsImproving the overall imagery would de�nitely help with the page and make it stronger. Incorporating the BAC calculator into my project will de�nitely strengthen the overall quality of the site.

URL http://b4udrink.org/lib/shock/index.html

Mothers Against Drinking and Driving Canada

Site FunctionalityThought the website is completely HTML, it is one of the most visited websites in relationg to drinking and driving. The website is fantastic as a resource for anyone interested in the subject matter.

StrengthsThe quality and source of information is what I think makes this webpage very strong. Also the information is broken down quite e�ectively in terms of di�erent areas of interest.

WeaknessesThe lack of graphic element is what makes this website a little dry. Also the amount of information available is plentiful which can be challenging .

RecommendationsIntroducing an interactive component to the page will boost the overall appeal of the website, and most likely will become a more visited website amongst the younger audience.

URL http://www.madd.ca

Global Actions on Harmful Drinking

Site FunctionalityThe website is put together by some of the leading alcohol pro-duces in the industry. It displays relevant information with regards to all the e�ects of drinking, and how one should drink responsi-bly. The website has no �ash component to it, but still displays information in a very simple manner.

StrengthsThe clickable map really helps navigate the user through the di�erent laws and e�ects of alcohol in di�erent parts of the world. That little bit of interactivity is quite powerful for a site that o�ers a signi�cant amount of information.

WeaknessesToo much white space, makes the webpage look very sterile. The font is also quite small.

RecommendationsConsidering the funding and the status of the companies being presented on the site, I would expect to see �ash interactivity, and better quality design. Having a few interactive components though the use of �ash will improve the overall feel of the website.

URL http://www.global-actions.org/

Plant Hunters Palm Dome

Site FunctionalityThis website has nothing to do with Drinking and Driving, however it is beautiful done, and quite interactive. The interactivity is simple, and gives the user a true sense of the dome, and all the plants that can be seen. It draws the user in through its navigation tools.

StrengthsQuick load times, and the use of vivid imagery draws the user in. It has very simple navigation, with click thoughs that allow the user to explore the dome quite easily. The popups are a neat way of presenting infor-mation.

WeaknessesThere are other portions to the website that a user would not access since the information on those extra pages are not easily accessible on the main page.

RecommendationsThe user will get easily consumed by only the main page, since the other pages are secondary, however the information on those pages are quite important, and visually very appealing as well. A few navigation bars in the 360 dome would help to navigate the user over to the other pages, rather than clicking on the static icons. The intro to my project will be similar to this page in terms of the panorama.

URL http://www.nybg.org/planthunters/pano.html#/panorama/0/

ConceptLets make drinking and driving history

The project is to make teens like Jane Jones more aware of the idea of drinking and driving, and setting her up to becomean ambassador to end drinking and driving.The story takes Jane through the story of a girl similar to her in age looking at a scrap book of the night she got into an accident. Clicking on the different photos reveals a little bit of information on herlife and the night it all happened.

The story is about a teenage girl that has to live through the scar of experiencing the death of her best friend and her boyfriend. There will be newspaper clippings, pictures, and other elements that will be clickable, and taking Jane through the different elements of the website.

There will be a blood alcohol count (BAC) to show Jane how much alcohol is in some popular drinks when consumed, and how long it takes for the body toreach a zero BAC. This is a good educational tool to show how drunk one can get from just one drink.

There will be a legal section that will tell Jane about the implications of drinking and driving and how it will affect her driving record.

A major part of the website will be related to statistics, and how many teens and families are affected on a day to day basis due to drinking and driving.

As a reward to Jane, she will be able to create a tshirt print that can be taken to any custom tshirt print shop, and create a tshirt to show her support against drinking and driving. Similarly there will be a wallpaper that can be downloaded as well as a custom wallpaper for her smart phone.

MoodIt is simple and playful due to the fact that it is a scrapbook looking website, however it is a scrapbook of good memories and thereally bad ones. It features nostaligia, and regret, however also empowers the visitor to make the right decisions.

ToneThe attitude with which the website will be presented is to display to the user the e�ects of drinking and driving in a mannerwhich they could relate to. A scrapbook is a common element amongst many teenage girls. I am trying to portray the loss of yourgood days due to the scars that will remain with you, and the scars you will leave behind for your loved ones.

LanguageThe language will include a bit of slang, and words used in short form similar to that used in chat websites, and in text messages. “ I was a real active girl in school, howeva ever since this happened 2 me, it has been hard 4 me n my luved ones ”

StyleThe style is heavily in�uenced by the look of scrapbooks that teenage girls usually keep online, or that they would physically have at home. The more serious style of the website will be based of a style used in tabloids to report horrid news.

Mood, Tone, Language, Style

Moodboard - Website

Approx. 1 teens are injured per day due to drinking and driving

Take public transit

TAXI Call a cab

Arrange for a designated driver

ARRIVE ALIVE

SAY NO TO RIDES FROM THOSE WHO HAVE BEEN DRINKING.

ALSO DO WHAT YOU CAN TO STOP THEM FROM DRIVING.

Every 45 mins 1 person is killed due to drinking and driving in North America

On average 4 people are killed each day due to impaired driving in Canada

Drinking co�ee after alcohol does not improvecoordination. Co�ee onlyreduces drowsiness, and

dehydrates the body

Most drunk Least drunk18% of teenagers believe the least drunk person is the designated driver

DRINKING AND DRIVING INVOLVING TEENS

Death rate for impaired teen male drivers is more than one and a half times that of female teen drivers

$2,000$25,000

DUIs can cost between $2,000 to $25,000

Is it worth it?It doesn’t take into account the social and psychological burden

FUNCTIONAL SPECIFICATIONS

TARGET SPECIFICATIONSSUB TARGET SPEC COMMENTS

CLIENT-SIDE TECHNOLOGIES Adobe Flash 10 or higher

SERVER-SIDE TECHNOLOGIES PHP

SCREEN TARGET SPEC COMMENTS

SCREEN SIZE Maximum 600 x 600 Viewable area is 600 x 600, site is actually much larger

SCREEN FONTS Body copy: min: 14pxCaptions: min: 12px

Target audience is 14-18 so fonts can be small but legible

COLOR DEPTH Any Can be any colour bit depth

PLATFORMS TARGET SPEC COMMENTS

LANGUAGES Only English for now, translate to French in phase 2

BROWSER REQUIREMENTS Flash player 10.x plugin installed

XHTML PAGE Must be XHTML 1.0 standard Target information so that search engine can index the site

HARDWARE TARGET SPEC COMMENTS

CLIENT MACHINE Should run e�ectively on a Mac and on a PC Most likely the persona represents people that use Macs

Form submission is in PHP

PERFORMANCE REQUIREMENTSMETRIC REQUIREMENTS COMMENTS

FILE SIZES Max 5MB per file

LOADING TIMES Preloaders required for any file which will take more than 10 seconds to load over a 56Kbs connection

AUDIO Must include some audio (music, ambient, or sfx) Audio must be pre-compressed as mp3

Functional Speci�cations

Structure - Website

Home Intro page

Laws in BC

Statistics and Facts

BAC Calculator

Video on Drinking and Driving

Support & Organizations

How to Avoid Drinking and Driving

About and Contacts

Wallpaper

TShirt Design

Wireframe - Homepage

600 px

600 px

Headline

Text Area

Click here to proceed

Headline - Drinking and Driving amongst teens

Text Area - Journal of a 16 year old girl. It will talk a little bit aboutthe day of the accident to provide a user the lead in to the mainwebsite

Background image - Desk of a 16 year old girl or someone in thatage group

Click here to proceed - Will pan across to a scrapbook page thatis open

Wireframe - Main Page

Background image - 1000 X 1000

600 px

600 px Viewable Area

Background image - Large imageof scrapbook page

Images X Marked - There will be 10photographs that the user can interactwith and it has a drag and drop function

Images solid colour - These are the targetareas for the user to drop the photographsonto and at that instance the movie clipis displayed corresponding to thatinformation

The viewable area is 600 x 600 pixelsand the user will be able to zoom in andout

Wireframe - About and Contacts

600 px


600 px

600 px Viewable AreaAbout the website

About and Contacts

Close

About this page

Contacts


About and Contacts - Tallks aboutthe purpose of the website and the contacts related to the website

Close - Returns the user back to thehomescreen

Wireframe - Laws in BC

600 px


600 px


Laws in BC

Close

List of Laws


Laws in BC - Talks about the Lawsin British Columbia with regards toDrinking and Driving


Wireframe - Statistics and Facts

600 px


600 px


Text Area

img

Link related websites

Image related to Topic


Close


Statistics and Facts - This page willhave a information on deaths and injuriesrelated to DUIs and Facts.

Images - There will be images that a userwill be able to scroll through

Text area provides information for the user, and the scroll is for extended text

Close - Closes the screen and returns theuser back to the scrapbook page

Wireframe - BAC Calculator


600 px


BAC Calculator

Close

Weight

Drink type

How fast did you drink

How many drinks

Gender

This is your current BAC, it will takeX number of hours to return back to 0.0 BAC

Submit


BAC Calculator will take the userthrough the di�erent steps to calculatewhat their Blood Alcohol Count would be if they consumed a particular drink

Images - There will be some imagesrelated to drinks

Submit - Allows the user to submittheir results to generate an output

Text area - Provides user with informationabout their current BAC

Close - Returns the user back to themain screen

Wireframe - Video of Jenny


600 px


Drinking and Driving video about Jenny

Close


Video - 45 second video of Jenny andthe mother of her boyfriend that was killedin the accident

Close - return user back to homescreen

Wireframe - Support and Organizations

600 px


600 px


Support and Organizations

Close

List of websites available for support to help DUI Victims,

and a list of organizations dedicated to reducing drinking

and driving.


Support and Organizations - Links to basically any website that relates to Drinking and Driving


Wireframe - Quiz (Avoid Drinking and Driving)


600 px


How to avoid drinking and driving:Quiz

Close

What will you not do after a party

Option 3Option 2Option 1

Select box open


Submit to Email


Quiz - This will text the users knowledgeon subjects related to drinking anddriving

Submit - The results can be submittedeither to an instructor or to a parentto show that the knowledge has beenabsorbed.

Close - Return the user back tothe main screen

Wireframe - Wallpaper Download


600 px


Download your wallpaper to show your support

Close

img

800x600

img

1024x768

img

1920x1080


Wallpaper - Chose the wallpaper sizeyou like to show support for drinkingresponsibly

Close - return user back to homescreen

Wireframe - TShirt Design


600 px


TShirt Design

Close

Listbox

simg

simg

simg

XSmall Small Medium Large



Download and submit to design shop


TShirt Design - Allows the user toscroll through di�erent tshirt designsthat have been pre - created

Sizes - Chose the size and downloada template that can be taken over to a custom tshirt print shop or emaileddirectly

Close - Return the user back to the homescreen

Redo Wireframe - Homepage

1 - Entry page to the website.

2 - A brief text, anywhere in this area is clickable to allow the userto enter the main interactive area once the text box is loaded.

3 - Progress bar that will show the preloader which is an image of a car accident that is blurry at �rst and then later shows up.

4 - The background is blurry, however you can partially make outthe background to be a journal. blurry

background600 px

600 px

Entry Page1

TEXT BOX : STORY OF JENNY (QUICK BRIEF)

2

3

4

Wireframe - Main Page

1 - This is a scrolling panorama of a desk, however all you see is mostly the scrapbook. You can zoom up and down to seethe photographs that you can drop onthe target areas.

2 - There are 7 photographs scatteredaround the scrapbook. The user can drag and drop the photo onto thetarget area. Over each target area there will be a small description (eg: picture ofaccident)

3 - Credits section - Once the user pans to the right you can view the creditsbutton where the user can read aboutthe project, and who was behind it.

4 - The user can zoom into scrapbookand out. The user can can zoom down 75%.

5 - Going back to the journal pagewhich talks about the incident

600 px


600 px


CreditsGo Back

41

2

35

Wireframe - Quiz (Avoid Drinking and Driving)

1- Quiz - This will text the users knowledgeon subjects related to drinking anddriving

2 - Scores get calculated at the end

3 - Submit - The results can be submittedeither to an instructor or to a parentto show that the knowledge has beenabsorbed.

4 - Going back to the journal pagewhich talks about the incident

600 px


600 px


How to avoid drinking and driving:Quiz

Close

What will you not do after a party


Select box open


Submit to Email

CreditsGo Back

1

2

3

4

Score

Wireframe - Statistics and Facts

1 - Statistics and Facts page. All pageswill have a header on top indicating whatpage they are on

2 - User will be able to scroll throughimages that relate to drinking and driving

3 - Links to other websites relatedto drinking and driving stats

4 - Text area that shows all theinformation about the stats and factsrelated to drinking and driving amongstteens

5- Closing the screen, it will fade awayand the user can grab a di�erent photograph

600 px


600 px


Text Area

img

Link related websites

Image related to Topic


Close CreditsGo Back

1

2

4

3

5

Wireframe - Wallpaper Download

1- Wallpaper - Chose the wallpaper sizeyou like to show support for drinkingresponsibly


600 px


600 px


Download your wallpaper to show your support

Close

img

800x600

img

1024x768

img

1920x1080

CreditsGo Back

1

2

Wireframe - Video of Jenny

1 - Video - 45 second video of Jenny andthe mother of her boyfriend that was killedin the accident

2- Control the movie

3 - Closing the screen, it will fade awayand the user can grab a di�erent photograph

600 px


600 px


Drinking and Driving video about Jenny

Close

CreditsGo Back

1

2

3

Wireframe - BAC Calculator

1 - Drop down box which the usercan control with regards to their ownphysical body.BAC Calculator will takethe user through the di�erent steps to calculate what their Blood Alcohol Count would be if they consumed a particular drink

2 - Images - There will be some imagesrelated to drinks

3 - Submit - Allows the user to submittheir results to generate an output

4 - Text area - Provides user with information about their current BAC


Wireframe - Credits

600 px


600 px


Contacts

Credits

About the website

Credits and information

Close

About this page

1

2

1 - About and Contacts - Tallks aboutthe purpose of the website and the contacts related to the website


Wireframe - Laws in BC

1- Laws in BC - Talks about the Lawsin British Columbia with regards toDrinking and Driving


600 px


600 px


Laws in BC

Close

List of Laws

CreditsGo Back

1

2

Wireframe - Support and Organizations

1 - Support and Organizations - Links to basically any website that relates to Drinking and Driving

2 - Images related to supportingorganizations, users can click on theimage or on the links


600 px


600 px


CreditsGo Back

Support and Organizations

Close

List of websites and information

1 2

3

Mockup Scrolling

Mockup

Amienne - Bold 37 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

Myriad Pro - Regular 24pt - 26 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

Myriad Pro - Bold 14 pt - 16 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

Panorama

Credits

Entry page

Preloader

Mockup - Preloader, Entry page & Credits

4

53

2

1

1 - Journal of the victim, and a descriptionof what happened on that day.

2 -Hover over and the icon moves to the right indicating which way the panorama willbegin. 3 - Preloader goes from top

to bottom to reveal a messagesaying not to drink and drive.The images are blurred, butalso indicate the feel of theupcoming site.

4 - Go back to the beginning of the panorama.Also shows who created the project.

5 - Last page, saying a �nal message to theuser about drinking and driving.

Campaign Scrapbook

Mockup - CampaignScrapbook, & sharing

2

3

4

1

1- Click on an item on the campaign list, and theinformation will tween over from the left or right.

2 - The close button fades the information back towhere it came from

3 - Hover over the computer,it has a �ickering screen.When you hover it gives youthe option to share the pageon facebook. It links directlyto your account on facebook.

4 - The scrapbook page, where you will �ndfour polaroids to click and drag and bringonto a drop area. This will bring up informationregarding that speci�c event. The polaroid glowswhen you hover over it.

5 - Information will tween from the left or right, and will have a faded image of the polaroidas the background. Hit close on the X button, and it will tween back to where it came from.

5

Share the page

Video of Jenny

BAC CalculatorMockup - Video & Calculator

2 3

14

5

1 - Input all the information related to your drink. Type of drink, number of drinks had, your gender, your weight, and how long you have been drinking. Based on a formula itwill give you an estimate of your BAC.

2 - Submit the information, and your BAC will be displayed.

3 - Hover over the calculator and it glows, and you can click on it. It will tween over the BAC Calculator from the left.

4 - Once the user clicks on the video camera it will bring up thevideo of the DUI victim. And the user will click on the button to get the movie started.

5 - Close the movie, and it will tween back to where it came in from. The movie will also close once it has completed playing it.

Style guide

#B46A23

#FFCC00

#000033

#993333

#FF6060

C: 26 M: 88 Y: 100 K: 24R: 153 G: 51 B: 0

C: 0 M: 78 Y: 55 K: 0R: 255 G: 96 B: 96

C: 27 M: 90 Y: 81 K: 22R: 153 G: 51 B: 51

C: 94 M: 88 Y: 43 K: 65R: 0 G: 0 B: 51

C: 0 M: 19 Y: 100 K: 0R: 255 G: 204 B: 0

C: 24 M: 63 Y: 100 K: 10R: 180 G: 106 B: 35

#993300

Style guide

Amienne - Bold 37 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

Myriad Pro - Regular 24pt - 26 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

Myriad Pro - Bold 14 pt - 16 ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 (){}:;”’

For information text to navigate the user, as well as buttons. Alsoused for polaroids and descriptions

Proceed button in the beginning, as well as the goback button at the end

Majority of text on screen is with this font.Journal writing, campaign writing, descriptionon scrapbook paper, as well as some button.

Say no to drinking and driving

© 2

010

Vanc

ouve

r Film

Sch

ool C

on�d

entia

l and

Pro

prie

tary

Documents

Drinking and Driving