You vs. Smoking

Mary Trail

Launch Website

Web Design, Infographic, Research

4 Weeks

Mary Trail

Tools Used
Brackets, Bootstrap 4

This website was made to be a useful tool for smokers. Users can input the number of cigarettes they consume a day and the number of years they have been smoking, and upon calculation they will receive personal statistics based on those numbers. The hope is that it will help convince users to quit by showing them real time data.

Step one

Identifying the Problem

For this project, I was commissioned to make an interactive website that would act as a personal dashboard for user inputted data. The sections I wanted to show were; how many days lost due to smoking, how much money you wasted, what you could’ve bought, how much you will spend in 10 years from now, and an illustrated diagram to show what’s actually in a cigarette. The website had to be one page, and work very smoothly and collectively.

And along came my design challenge....

How can I show extensive and personal data based on only two inputs.

Step two

Proposing a Solution

After doing some research I found many statistics that I could use in my website. I turned these statistics into algorithms, so that the only needed inputs were the ones that were first provided. After the user inputs their data and presses calculate, I needed every algorithm to fire on that one request.

Step three

Identify the User

This infographic is directed towards those who smoke and for those who live/deal with a smoker. This infographic can act as a way to get informed on how harmful smoking can actually be for you. Rather than just seeing random statistics, this website acts as a very personal way for people to see how they have been affected. By putting in real and personal numbers a person can judge themselves and hopefully strive to quit. This website therefore acts as a personal dashboard, where the statistics are tailored towards the user. The idea is that everything you need to know about your health in regards to smoking can be found here. This can act as a great resource to those who are trying to quit or those who see no reason to quit.

Step four

Establish a Focus

Make the information visual.
Tell a story through the information.
Break down the story into simple pieces.
Make it more complex than project 1.
Users are attracted to small visual manageable bits.
Tie it all together visually

Step five

Conduct the Research

Cost of Cigarettes

1 Cigarette is equal to 64 cents

Time Lost due to Smoking

1 Cigarette is equal to 11 minutes of your life

Types of Cancers

Lung cancer, oesophagus cancer, kindey cancer, pancreas cancer, stomach cancer, liver cancer, cervix cancer.

What's In a Cigarette

Cadmium is found in batteries

User Testing



The title needed to change from a question to an input. That way the user could input their name and respectively see what they could be at risk for based on the rotating list of diseases.

Input Form

I wanted to make the inputs very type driven, so I got rid of the boxes and changed them to lines. I also wanted the calculate button to act independently as a text object, because actually clicking the calculate button is not necessary when you can simply just press enter on your keyboard after inputting your numbers.


I originally started out with a light blue background with white contrasting type to create a cartoonish kind of feel. I ended up changing to a dark grey background so I could easily add the colour red to promote hierarchy. I used the colour grey to define the input fields that could be typed on, by doing this it helps to direct the user to type there without blatantly saying it.

User Testing



I had originally wanted to place the days lost as a direct result after the calculate input, and gave it its own screen. I did this to really draw attention to the days lost due to smoking as this is what I saw was the most important feature. The problem with this was that the link between “days lost” and the next page was lost and therefore was seen as two different things. To fix this I ended up putting the “days lost” statistic on the same page as the amount consumed, this way they would all act together and could function as a more useful dashboard because all the personal information you could need would be found on this one page.


The idea behind the card based layout for the other statistics was that if they we're cards they could essentially be added and removed. By using the cards I found that I would be able to add multiple statistics and keep them organized that way, as well as always be able to add more in the future. It would act as a hub for personal information based on statistics.

Result Colours

I changed the colour of all the results to red, as to distinguish and provide hierarchy among the other elements.

User Testing

Cigarette Anatomy

Card Title

The title and the chemical codes needed to be able to fit on the same line so they can be visually linked together.

Found In

The "found in" part of the card was the most important part, because it acts as a way for people to really see what harmful chemicals they are consuming by smoking. I needed it to stand out but I still needed it to act well in a list. I ended up greying out the "found in" text in an effort to bring hierarchy back to the actual list.

Don't be a stranger

I'd love to chat about anything