My first Hackathon – creating an energy self-sufficient building

—-Update with the presentation video—-

Earlier last month, one of my friends, Lingfeng, an NUS graduated engineer approached me with several of his projects that need my help. At first he told me about his smart parking system which has already won Hackathon prizes before (which I will write separately about). And this time round he hoped that I could join the team for another Hackathon, Climate Innovation Challenge, which aims to promote innovative, cost-effective green solutions that safeguard our environment.

To align with that, our project was to propose an energy self-sufficient building. The concept of the project was to innovate a new way when we build the foundation piles of the buildings, and using the temperature difference between the core soil (20-40 metres deep) and the hot air reflected on the surface to generate power that’s enough to sustain the whole building.

I had never attended any Hackathon before and the name sounded new to me. I’m not an engineering expert and this Hackathon is more about hardware and engineering, but I think this idea is very innovative and if it succeeded it can save our environment and earth tremendously. Therefore I joined the team hoping to contribute from a web front-end experience perspective.

Our team consists of 5 members:

1. Lingfeng- team lead, engineer;
2. Yihong- engineer;
3. Fan Qi- data visualisation specialist;
4. Cui Xiang- web programmer;
5. Libai- UI/UX designer and coder.

The four of them are all graduates from NUS, extremely smart, extremely pleasant to work with. I had so much fun working with them all, will touch on that later.

Prior to hackathon

There were two pre-challenge workshops that the Organisers had arranged for the participants. However, I had to miss them because of my family commitments. Therefore basically I had little idea about how hackathons work… And when the date was approaching I started searching for some online materials and was surprised that – what? You are supposed to eat there, wash your dishes there, shower there, sleep there? 🙂

Luckily enough Singapore is not that big and the team has been supportive so as it turned out, it’s still a less intensive experience as I imagined. Let’s dive into the real experience!

During hackathon

Day 1

It’s a 3-day Hackathon starting from Friday night till Sunday afternoon. Friday night is more of a registration and team forming session. Since we’d already had a team, we took the opportunity to get to know the judging criteria, resources available, and also start to discussing our roles and responsibilities.

I had imagined the UI experience for me to design is for end users – how to encourage them to save more electricity and alert them when something is using too much power. To my surprise by that time I then realised this is actually a B2B solution that we are hoping to design – our web users will be building Contractors. I was somewhat anxious about how this might turn out, but on the spot, Cui Xiang was able to grasp the ideas that the Engineers were hoping to achieve and proposed several elements and data we can flash out on the website. Such as a Singapore map with different areas for the users to click and see the soil conditions of that area, the mean temperature, and the suitability (overall rating) to apply this system.

In terms of the engineering part, they were going to build a prototype of the building during the Hackathon, use it to generate power through temperature differences, and display the data such as temperature differences and power generated in a real-time manner.

This was the first time the whole team met up (also the first time I’ve met Cui Xiang and Fan Qi). I was so excited about our ideas and Hackathon that I even woke up way earlier on Saturday and couldn’t fall asleep again! 🙂

Day 2

Time to get to work! I looked for several industry/energy dashboards UI as benchmarking materials for the UI even when I was on the train. And while I was trying to build the UI based on the previous night’s discussion, Cui Xiang was communicating with the engineering team and trying to consolidate interface elements and data to me.

Basically here is the idea:

1. The user will select an area on the Singapore map, and we will display the mean temperature, soil condition and overall suitability rating of that area (these are all real data btw)
2. They will be prompted with a form to input the numbers of each room types that they are planning to have on each level, and also the total number of levels.
3. Based on the data input and the pre-selected area’s conditions we will then calculate the power related data such as Total power generated, total power needed and implementation cost for such a building, 10 variables in total.

Soon enough I built a first draft of the web UI mockup (below)

And since we were at a Hackathon where time is a critical factor, I didn’t really go ahead and mockup the other screens and already started to get my hands dirty to code the whole interface.

This is the actual HTML page of the mockup. I used Bootstrap framework for the first time for HTML/CSS coding and it’s quite simple to use and construct a full site with.

After that’s done I saved my file into Dropbox for the backend coders to work on, and ran home around 130pm to spend some time with the boys. After I was back at the Hackathon Cui Xiang had already finished her data pulling part and all the calculations.

So we sat together and started merging the front-end and back-end to have a fully working system, and managed to get the correct calculation results on the result page – although they were just raw numbers back then.

Back to the engineering part, they managed to build the prototype to generate power from the temperature difference. Opposite to the real scenario though, they pour warm water into the below part and expose the top part to the area. More amazingly, they managed to display the data of real-time “temperature difference” and “power generated” on a computer through a sensor! It formed a curve on screen with a new data dot every 5 seconds, beautiful and visual real-time monitoring which can be scaled and used to show the whole building’s real-time data too.

All of our team members are strong believers in resting properly and OT is counter-efficient. So to have a better quality sleep, I rushed all the way to the train station hoping to catch the last train. The train was empty and very nice for me to pull out my laptop again to start working on the result page’s styling, as well as integrating the real-time data monitoring page to the whole web interface*.

(*The actual web app will be different – the map planning tool is for the prospects to navigate through and build planning data to share with colleagues and decision makers; while the real-time monitoring tool is for existing customers to monitor their building data, and should require a login.)

After returning from the Hackathon I still worked on the results interface till 2am. I proposed adding a pie chart and a bar chart to display the data significants more visually, and was trying to find a tool for it. In the end Google charts seem to be the best solution, and I was able to display very graphically how much excessive power we are generating, as well as how cost-effective this building’s power piling system is going to be.

Day 3

It’s the last day and the time counter is counting down to 0 soon! Since I worked till pretty late the night before, I woke up late and was arriving there around 9:30am… And the final cut-off time is 12 noon!

On my way there the teammates already messaged me regarding some “issue” – I called them to find out the issue is the color theme might be too light to be displayed on a projector screen. Oh well, that can be fixed in like 5 minutes? 🙂

So on my train there I listed 3 to-do lists for me in the very last morning:

1. To manually make the theme darker so it can definitely be viewed properly on a projector screen;
2. To work on an infographic to show the concept behind this project;
3. To check the presentation script for Lingfeng and help him rehearse.

For the infographic part, Lingfeng drew me a scratch on the 2nd day and told me it’s a good to have once I completed the web UI. Because it can visually show the concept behind this project and make it easier to understand for our audience, I still took some time to make it happen.

Based on his drawing I came up with a visual represent below:

For the presentation, I’ve heard him run through a bit, however he’s not so familiarised with the web UI and its functionalities, therefore I proposed that Cui Xiang should introduce the web UI while I demo it through on a laptop (dream come true to be a demo engineer, ha). I was also concerned about slides – should we make it? Lingfeng attended several Hackathon before and told us slides were just minimum and we should focus on telling the story and on our demos, since we had quite a lot to demo – pouring warm water to create temperature difference and generate power; displaying the real-time powering data on screen; and our web interface (selection, input, results, and alternative selection).

Quite last minute, the organiser was raising a point about team’s slides, then I went ahead and created a minimalist slide with just the infographic and some high-level summary of what we have done.

12 noon approaching, submit!

Presentation and Judging

There were two rounds of presentations. First round is the qualifying round given the number of teams. Only 12 teams can proceed to the final round and present in front of the final judges and everyone else, 3 teams from each challenge category. And our challenge category – category 4, has the highest number of participated teams!

We had a very smooth presentation and demo round. We were a bit anxious about the 3 minutes limitation, but with the preparations and rehearsals we managed to smoothly run through the whole thing.

For this round, there were no questions asked from the judges to keep the process going.

After this round, all of the teams gathered at the main meeting point and we were wondering what would happen the next. The host mentioned – the team leads of all the finalist teams will receive a phone call to announce the good news. Before long when we checked our chat group we received Lingfeng’s message -“we’re in!”

Although it’s not surprising to get into the 2nd round we still felt super excited and pumped. We brought all our prototypes and presentation laptops to the waiting room, waiting to be on stage to present for all the rest of the teams and the final judges.

The wait was longer than what I could ever imagine as we were one of the last teams. A staff came in and told us the 3-minute cut-off time was very strict for the round so please keep the presentation to 3 minutes. We were worried because the scope of our prototype and the whole system is quite big and we felt pressed for time, which indirectly led to the presentation issues later. After we were called onto the stage, we didn’t really have enough time to set up the prototype, the laptop (we could only bring one laptop instead of two in the first round) before the presentation started. So I literally had to kneel down on the floor to press on the laptop to keep the slides going (so that I won’t block either the real-time camera or the projector screen). We didn’t even get a chance to show the real-time monitoring screen (which I think it’s the highlight of the whole demo) because we couldn’t switch the windows between the slides and the web app, and since we were pressed for time, the presenter – Lingfeng had to carry on in his speech. In the end, to our huge disappointment we didn’t get any prizes in this Hackathon, although we still believed in our project and had fun through the whole time.

After thoughts

Lessons learnt

I believe there’s no mistakes or failures, but everything is a learning. I still love our project, our prototype, our web app, as well as the impact it might have had if we can make it into reality. I think we already did a great job as a newly-formed team and three of us first-time hackathon participants.

We didn’t really get any feedback from the judges or the organisers. In my opinion, what might have been our areas of improvements are:

1. The scope and feasibility – since we saw the title as “Climate Innovation”, we dared to dream big and build something really big, instead of starting something small and more feasible. Perhaps the hackathon itself isn’t looking for something really big in scope, but actually starting small and changing the environment bit by bit.
2. The presentation – we’ve built something amazing; we’ve received a lot of positive feedback in the two days; we’ve made the first-round judges love us through a smooth presentation. However, the final presentation didn’t really work out and didn’t give the project the justice it deserves.
   1. It’s difficult to fit our project into a 3-minute only presentation given the scope;
   2. We messed up the presentation set-up which resulted in the hiccups during the presentation;
   3. We weren’t able to explain the concept in concise and simple enough terms during our presentation. We didn’t really relax during the presentation, the whole process was rather intense and ours was almost the only presentation that didn’t bring up any laughter out of the audience.
   4. Our slides were not informative enough. We should have listed all the thought process behind the system; we should have listed out all the key benefits of the system with big and bold icons; we should have listed out all the data background because we got them from very reliable sources and we’ve got all the calculation formulas behind the system, not just some random numbers for the purpose of demo.

I’m not sure if my summary above was correct. If you have any other opinions or thoughts please feel free to let me know in the comments section.

Development plan

To answer the lesson learnt above (and also to make myself feel more positive after the disappointment, lol) I’ve thought of some plans.

For example, I think for point 1 above there’s little I could have done since it’s a more engineering focused Hackathon. Therefore, my next steps are to research and identify some more software/web/design related Hackathon to take part.

For the 2nd point, I would also love to brush up my presentation skills because it’s sort of a wake-up call in terms of the significant impact of a powerful presentation. You will have to put complicated concepts into simple terms; you will have to deliver great stories with a sense of humor; you will have to learn to be calm in high-pressure environments and in front of a big audience. These all needs practices and I’ll focus more on this field.

What I have enjoyed…

Last but not least, let me still take a moment to celebrate some wins for this event. I’ve met a bunch of smart young coders/engineers. I’ve had the pleasure working with them (and at times laughed until I had stomach-ache). It’s also the first time I’ve ever worked with Chinese team mates (Ironically given that I’m from China) and it’s been such a breeze with the same cultural background and zero language gap. As a designing and front-end coding person, I really enjoyed working with back-end coding people so we can solve difficult problems on the spot – it’s also something new to me as I usually code on materials with backend all figured out. Moreover, this is the first project that involves hardware engineering that I’ve ever done and it’s an eye-opening experience to me. It’s like we can build some real stuff to change the whole world! 🙂

Therefore I learned so much in a couple of hours what I might not be able to learn in months of work. It’s kind of the environment that pushed you to advance yourself, get outside of your comfort zone and explore new stuff and knowledges.

During this Hackathon I was “forced” to explore several new technologies such as Google Map API, AI pattern creation and application, Google Charts, Bootstrap, Javascript debugging and advanced algorithm, just to name a few.

I also believe that we did well in terms of fast prototyping, designing and programming. Since it’s a hackathon, I think it’s important that we work at a fast pace and continue to build things in an agile manner. Therefore I didn’t really finish the mockup of the whole thing before I moved to the HTML/CSS coding, also the web programmers worked on the backend part in parallel while I developed the interface. I really enjoyed working intensively on a project in a short period of time and trying to achieve something great, collectively with a team. It’s a brand new experience to me and I hope there will be more to come.

Let me know if you see any other Hackathons in town! I will certainly not give up! 🙂

 

Download our slides for this Hackathon project – power self-sufficient building

If you are interested in viewing the slides please feel free to download the slides by filling in your information below.