My Process in Designing and Coding a Website from Scratch

Check out the full website at healthhacks.ph

A Bit of Context

Back in 2015, my friends and I founded HealthHacks PH, a non-profit organization that promotes healthcare innovation and technology to the youth. Every year, we organize an event called HealthHacks, a health-focused hackathon exclusively for students.

This year, I volunteered to lead the monstrous task of designing and coding our HealthHacks website. Other than a bit of help from my friends Mike, Philly, and Pia, I challenged myself to sketch, design, and code this website from scratch on my own. Below is the process I took into creating this website. The finished product can be found here.

Part 1: Identifying the Problem

“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem, and 5 minutes thinking about solutions.” — Albert Einstein

The Problem:

For HealthHacks last year, we only had a simple website where interested participants could check out the event details of HealthHacks. It was something a friend made for us, and this year, we wanted to make one on our own.

We also wanted to up the ante by aiming for 100 participants. In order to do so, we felt that a longer landing page was needed to showcase all information about the event and persuade participants to register. Our CEO, Kyle, also insisted that we create a form where interested students can register right on our website, instead of using a Google Form.

Part 2: Ideating and Outlining the Solution

“You have to put yourself in the shoes of the people you are designing for.” — Travis Neilson

Before I sketched out the website, I had to figure out which sections were important to include first in the website. I used the process of visualizing myself as a student, and asking myself these questions:

• What details would I want to know about this hackathon?
• What type of information should I know first?
• How would I be persuaded to register for this event?

I also visualized myself as an interested sponsor or speaker, as we would be showing the website to them as well. I made sure that the sections made sense for them as well, and could persuade them to join our event.

Part 3: Sketching out the Sections

“I prefer drawing to talking. Drawing is faster, and leaves less room for lies.” — Le Corbusier

After figuring out what sections were important to the website, I went on to make lots of sketches about what those sections would look like. Some of them stayed the same until the final website (such as the details section above), while others changed a lot (like the previous speakers section).

These sketches were very pivotal for me to visualize what the website would look like, how to layout each of the sections, and how to order them. Every web developer should be sketching out a website first before going into coding it.

Part 4: Creating Mockups on Photoshop

After sketching out the sections, I went on to Photoshop to create higher fidelity mockups. This is when I took into consideration aspects such as what fonts to use, what colors to use, and what type hierarchy to use.

Part 5: Coding the Website

This was by far the hardest part of making the whole website, but I was so glad when I was able to finish it. I first started out with a base template of HTML with a few sections, and Mike helped me with the CSS by showing me some of the CSS he coded before.

I then kept iterating on all the possible device widths, making sure that the website would look well on phones, tablets, and desktops. Then, with help from Pia, we created an animated splash screen with moving elements, which is what I’m most proud of in the website. We used the bootstrap carousel CSS for the what’s in store section, and Philly set up the CSS and PHP for the registration page.

Coding the website took me around 2 weeks, but it was all worth it when I finished the website.

Points for Improvement of My Process

There were definitely things I could improve on with my design process, such as:

1. Using data and tests to inform my decisions

I simply used my intuition and visualization to figure out how to order the sections and what layouts would look better. Interviewing users or letting real people test it would let me get more realistic insights, so that’s something I’ll do more in the future.

2. Using media queries to fix layouts on bigger devices

I was coding the website on my 13 inch Macbook Pro, so I forgot to account for bigger devices than this. So if you have a larger desktop or laptop than mine, you may notice some inconsistent/sloppy layouts. This is something I’ll have to work on in the future.

Conclusion

All in all, I definitely enjoyed and learned a lot from each step of creating the HealthHacks website. However, I wasn’t able to get a lot of feedback or data yet about how effective the design of my website is.

So if you enjoyed this article, please check out the website, and let me know through the comments or through email about what you like or don’t like about it.

Oh and, if you’re a student from Manila reading this, I highly encourage you to sign up for HealthHacks 2017! Registration is still open and we’ve got insightful speakers, expert mentors, and fun activities. Register here.

Brian Tan is a startup geek and web developer from the Philippines. In 2015, he took a web development course on Udemy, and has become passionate about startups and building websites ever since. He holds positions on a number of startup-related orgs, such as ASES Manila, HealthHacks PH, and User Experience Society. You can reach him at brian.tan@healthhacks.ph.