Mary Trail
Launch Website
Role
Web Design, Infographic, Research
Timeline
4 Weeks
Team
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.Step five
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
User Testing
Input
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.
User Testing
Dashboard
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.
User Testing
Cigarette Anatomy
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.
