Web Design, Infographic, Research
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.
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.
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.
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.
Establish a FocusMake the information visual.
Conduct the Research
1 Cigarette is equal to 64 cents
1 Cigarette is equal to 11 minutes of your life
Lung cancer, oesophagus cancer, kindey cancer, pancreas cancer, stomach cancer, liver cancer, cervix cancer.
Cadmium is found in batteries
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.
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.
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.
I changed the colour of all the results to red, as to distinguish and provide hierarchy among the other elements.
The title and the chemical codes needed to be able to fit on the same line so they can be visually linked together.
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.