TFMS is an education-based fuel-visualization tool for kids, calculating the optimal fuel consumption for trucks while considering several mining factors throughout the haul cycle.
Check out the Truck Fuel Modelling Simulator!
Our inspiration was derived from the challenge(s) that the QDS 2023 Hackathon presented us with. As New Media Design and Web Development students, we focus on multi-media design and front-end development, and every so slightly scratch the surface of back-end development. As a result, we were out of our comfort zone and it inspired us to brainstorm ways that we can complete a similar task that aligns with our skillset while ensuring that the project is still challenging. In brainstorming ideas, our inspiration ultimately rose from our past projects, research, as well as the information given to us.
Our project is a one-page informative and visual tool for kids to help them understand fuel consumption in mining trucks, with features related to the field. There are animations that present the user with visuals related to the topic at hand, allowing kids to engage and be curious to learn more. Provide a sample calculation of fuel usage for 5 mining truck types with different fuel efficiency levels.
- Wireframes: Hand-Drawn & Figma
- Development: VS code, HTML5, CSS3, JavaScript, GSAP
- Illustrations: Adobe Illustrator
Datasets and calculations. We weren't expecting any mathematics or large sets of data as we are unfamiliar with Datasets and all related things. Despite having challenges, these obstacles helped me rethink our approach to organizing our execution for this project. We brainstormed ways to reorganize our project management approach to create a minimal viable product with consideration of our UX/UI design and front-end development skillset.
Not quitting after Day 1. Examining the problem and data provided and making the decision to continue participating in the hackathon was a challenge in itself. We are aware that our prior studies focusing on mostly front-end development does not give us an advantage when analyzing the data provided from this hackathon.
At the same time, we realized that we can use our front-end development, graphic design, and UX/UI design skills to refocus who we're creating the interface for to deliver a completed minimal viable product to demonstrate our idea and intentions for this hackathon's challenge.
That diamonds are made under pressure. We learned that determining our team's capacity was what determined the scope of our project while also providing helpful constraints to limit ourselves from getting distracted by other interesting ideas (that would be beyond our capabilities at the time of this report).
We learned that we still want to make a fun interface to learn from, regardless of our limits when working with datasets during this hackathon. From our brainstorming, researching, and planning sessions, we concluded that our strengths in using Adobe Illustrator to visualize our ideas will help us communicate our intentions (even if can't demonstrate the full capabilities of our idea).
Revisiting our execution to optimize our approach while also adding more functional components to the calculator. We would like to integrate additional calculations using more data, which would encourage us to revisit the project's composition to utilize a different language and libraries to create a fully functional interface for processing, analyzing, and presenting findings from large datasets.
Thank you to our team for designing and developing the Truck Fuel Modeling System demo, considering the time, skillset, and energy constraints!
- Linda Huang — UX/UI Designer
- Bana Nourkeyhani — UX/UI Designer
- Jessica Lee — Front-End Developer