At the end of October, I received an email invitation saying I was chosen amongst 300+ applications to be one of the participants of Hatch London hackathon.

invitation.png

The hackathon was organised by SheCanCode, held at the Ministry of Justice in London Westminster. Unlike other hackathons I heard of, Hatch London participants are not made up of purely computer programmers. Instead, the organiser purposely mixed coders and non-coders in groups as well as males and females.

Before going to the venue, all of us were already randomly grouped and given a topic, according to other more experienced participants, this is unlike any other hackathons. But I quite like it this way, it means we are not only developing a project but also working with new people from different backgrounds.

Day 1

TimetableDay1

After a short introduction of the hackathon and sponsors, we had the chance to meet our teammates and discuss the topic.

Our group members: (duties assigned according to our majors)

屏幕快照 2017-12-28 19.12.52.png

Our given topic is ‘Changing the world by solving problems relating to misinformation/fake news’. Other groups were given topics related to the environment, poverty issues, and so on. We started a quick brainstorm and all agreed to try to solve the fake news problem on the internet. In order to make the end product being easy to use, we decided to choose web browser plugin as the form, this eliminates the needs of opening another application, either on a phone or computer, while reading a post.

As the only design person, I am in charge of creating the visual layout and prototype. Firstly, I did a quick drawing of user journey and then made a paper prototype to make sure everyone understands the idea. Meanwhile, the other group members are doing research about the impact of fake news and building a business model.

Alongside with the project, there are also lectures covering basic HTML and CSS, Python workshop for beginners, and so on. Also, there’re mentors from industries to give us advice and feedback.

 

IMG_4608
coding workshop

 

IMG_4604
nice environment to work in

By the end of the first day, we had a clearer concept of what to be included and how the application works. I continued work on the prototype at night as the available working time on the second day is much shorter.

Day 2

TimetableDay2

A few of us had new ideas about the project but I considered it being a bit too late to make changes or adding new features. There’re arguments but we agreed on focus on the main functions eventually.

After lunch, I finished a higher fidelity prototype and an animation.

This slideshow requires JavaScript.

Demonstration video:

Since there’s still time after I made the demonstration video, I looked at tutorials of making a browser plugin. I managed to create a similar looking mockup using simple HTML and CSS.

 

screenshot_live
interactive mockup

 

However, this was not used in our presentation. In the end, I feel a little bit pitiful of not spending the time on the final presentation PowerPoint. We also didn’t leave much time to practice the pitch. I think I am responsible for this as a designer of the team.

 

IMG_4614
the final pitch

 

Overall, although our team didn’t win, I had a very inspiring weekend. The excitement brought by the challenge lasts for weeks. I feel like my perspective changed a bit and I cannot stop thinking about how to make everything better. I really enjoy collaborating with talented people and hopefully, I can participate in more hackathons in the future.