ImpactBurger

Home Page

Inspiration

The environment is currently a hotly discussed topic as a worldwide problem. Even so, we felt that many people could not fully grasp what these problems mean for us, so we decided to put these problems into perspective. Many people in America eat burgers because they are fast, cheap, and delicious. Because they are such a common food, we thought it would be much more relatable to talk about them in relation to environmental problems.

What it does

Our website is an interactive piece that depends on the user reading our information and the directions that come along with it. This engages the reader by letting them decide what they want to learn about. The self-paced part of the website gives a more personal feel and makes the user feel more connected to the issues that we discussed.

How we built it

We built our website by starting with Figma, a graphic design software. In Figma, we personally customized the exact layout of the website, the fonts, the colors, and the images. We also compiled our research into these designs. Afterward, we downloaded these designs and transferred them onto Webflow, a website designer based on CSS code. There we were able to implement the interactive portion of the website by adding buttons that redirect the user to different portions of the website. After troubleshooting, we had our finished product.

Challenges we ran into

Because this was our first time at a hackathon and we all had very limited coding experience, we ran into a number of problems. We were able to come up with an idea, but we weren’t entirely sure of the best way to execute it. We stuck with a website because we felt it was doable at our level. After deciding on the medium, we had to figure out how the website design worked. We wanted to use a code language of some sort, but with our experience, there was very little we could actually learn in our time. Instead, we stuck with a user-friendly website designer, Webflow. After making our website, we also discovered that the website looks different on screens of different resolutions. Often times, the images we used would be cut off or there would be a repeat of the same image. Unfortunately, we are unsure of how to fix it, so we had to leave it as so.

Accomplishments that we're proud of

Despite all of the challenges, we are very proud of our very first website. It took a lot of trial and error in the 24 hours, but we made it happen. The simplicity of our design looks nice visually, and the user will most likely appreciate the easy-to-follow design as well.

What we learned

Through our experience, we learned a lot about web design that we did not know before. We learned how to design graphics using Figma. We learned a little about how CSS works. Finally, we learned how to create a website layout. We went through a lot of frustrations and struggles, but in the end, we were able to create something we are proud of.

What's next for ImpactBurger

We have a few things we would have loved to add if we had the time and the knowledge. First, we would want to implement the information on other ingredients. We only had time for the burger patty, so we gave it our all in the research; however, we would really like to show the user all of the effects of eating a burger, which we would accomplish by showing a complete profile of every ingredient in a burger. We could even add at the very end something that encourages users to participate in events that would help the environment. We would also have liked to make our design suitable for all screens. Currently, our website only looks proper on one specific computer with a specific screen resolution. We want to make the website usable for all users, of PC and mobile. With more experience, we would also love to use actual code to create a website. Webflow allowed us to use simple buttons and fill in the blank values to create our website, but in the future, we hope to create a website from scratch. Until then, we will continue to learn about different ways to use code to better the world.