HealthHacks PH Website Case Study
Skills Utilized: Wireframing, Web Design, Front-End Web Development
(Let the images finish loading before reading. It might take a while.)
Some Context
Back in 2015, a few of 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.
In 2017, I offered to lead the task of designing and coding a website for HealthHacks. Other than a bit of help from a couple of friends, 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. A copy of the site I designed and coded 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 in 2016, 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. This is so we could showcase all the information about the event and persuade participants to register. Our CEO, Kyle, also insisted that we create a page 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 visualization and visualized myself as a student who was about to view the HealthHacks website. I asked 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 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 opened Photoshop CC 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 in being able to finish this. 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. This 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. All the time I put in it though was worth it when I finished the website and saw the finished product.
Points for Improvement of My Process
There were definitely things I could improve on with my design process though, 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 lay out the elements. Interviewing users or letting real people test the website 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 layouts. This is something I’ll have to work on in the future.
3. Using Sketch instead of Photoshop CC
Back when I was coding this website, I hadn’t purchased or learned how to use Sketch yet. Now that I’ve discovered its power though, I don’t think I’ll ever go back to making mockups on Photoshop. I plan on using it in all future projects to iterate faster and make better design decisions.
Conclusion
All in all, I definitely enjoyed and learned a lot from each step of creating the HealthHacks website. I hope I can apply the improvements I’ve suggested above to my future projects, so I can design things faster, test my assumptions more, and write better code.
