Projects

HatchUp Magazine is a magazine that represents local businesses and entrepreneurs from Calgary, Canada. I was tasked to create the magazine’s official website, both for promotion and to give potential subscribers a way to buy copies or subscribe to the magazine, both digital and in print.

Problem

The project was given to me around two weeks before the magazine’s official launch. HatchUp Media needed me to design and develop the official website. I was given all the assets that were used in the magazine, as well as the existing brand elements like the color scheme.

They needed the site to perform three things:

• Promote the magazine
• Give a way for their target audience to subscribe to the magazine, both digital and in print
• Track website traffic

Solution

The first week after the project was given to me, I started designing what the site could look like. I used Figma to design a prototype of the website. I ended up with five different designs, all of which borrowing elements that can already be seen from the magazine’s existing graphic design choices.

However, I thought none of those designs hit the mark, so I did another design. This time, I did not consult the magazine’s design, but created an entirely new design, only basing on the assets, brand colors and typography that were given to me. The magazine team’s lead approved this iteration and it is what ended up on the official website.

I started development on the site using Jekyll, a static site generator. This was the most convenient technology for me, since I only had less than two weeks to develop the site and this is something that I really know about, as it’s also the technology I used to build my personal website and Antares Programming, another project I am proud of.

HatchUp Media has an existing hosting provider, but I found it rather difficult to work with. Instead, I opted into using Netlify, since the site is static. It has support for a lot of Jamstack technologies, including Jekyll that I already use.

Subscription service is done via Stripe that the team had already been using for their previous projects. However, online transactions for Stripe need a backend server to ensure security. Since I opted for a static website that is also serverless, this was not possible. Another possible solutions were serverless functions that Netlify provides, but that was out of budget, and there are no free tiers as far as I am aware. I ended up going with Stripe’s payment links that worked really well and are also guaranteed secure. With payment links, I as a developer don’t have to handle the transactions myself, as customers are redirected to Stripe’s own portal. Their transactions automatically appear on the team account’s dashboard.

Analytics are provided for by Firebase Analytics. It was very easy to integrate, and had other features that I found handy later on, like the Object Storage feature that I used for hosting video assets that the website needed.

Results

The site was finished just a day after the magazine’s launch. It was a day late, but it was functional as soon as it went live. It’s now being used by HatchUp Magazine subscribers to pay for subscriptions or to buy individual copies.

Antares Programming started in 2018. I created it initially as a way to help my college classmates learn about the newest technologies on the Web and programming best practices. It has grown since.

Problem

As a student of Computer Science, I noticed a lot how my classmates had a hard time studying programming and web development. Existing documentations and tutorials used a lot of jargons. Online resources aimed at beginners are better, but these are written or produced in English.

Video tutorials are available in Filipino. However, most of them lack the depth necessary to fully understand how the technology work. Most of the resources I personally have used and benefitted from could be better by explaining what goes on under the hood in a high-level way instead of just telling the learners what to do.

Solution

I started to formulate a three-way solution for this problem. Antares Programming is not intended to replace all of the existing resources; it just augments them. It is intended to support existing educational resources by curating learning materials from around the Web and creating resources that explains what other sources have missed.

Antares Programming provides this service in three ways, all provided in Filipino:

• Infographics. Using its Facebook page, Antares Programming will provide information in the form of infographics. These require the lowest cost and energy as these are bite-sized. It also has more mileage as it can be shared and re-shared infinite times by Facebook users on their personal timeline or in developer Facebook groups. This also serves as a marketing strategy as people are more likely to engage with graphic content as opposed to written articles and videos that take up more of their time.
• Written articles. Concepts and topics that need to be discussed in more depth are served in the form of written articles. This type of content targets learners who prefer reading more than watching videos. These articles have to be well-researched while also leading the learner to more resources. This is the most important goal of Antares Programming when it comes to written articles. Learners have to learn something new after reading it and search for more resources on the topic discussed.
• Videos. Of these three, videos are the most difficult and costly to produce. Videos act as a complement to written articles in that videos simplify what written articles discuss. This opens up the target audience wider and reaches more people.

For these solutions, a prominent online presence is essential. For this, I created a Facebook page for Antares Programming to reach the highest demographic possible. I also created a website to host the written articles for people interested in getting into the details. And finally, I have created a Youtube channel to host the videos.

Design

Design for this project is an ongoing process. At the time of writing, this project is in a process of rebuilding its brand after I have taken a hiatus from working on it in 2019.

The whole project is separated into three phases to make it easier for me to manage over the longer course of time.

Phase 1: Facebook Page

The Facebook page was started early on in the project. It serves as a marketing tool in building the audience and getting a wider reach. It also serves as an information hub for loyal fans of this project. It hosts all of the information about new articles and videos.

The Facebook page also serves as a channel of communication between Antares Programming and its fans. People send messages to the Facebook page to inquire of details about certain topics or just generally ask about a concept they don't really get. This is also the main business model, if you will, as people get informed that Antares Programming accepts financial donations from its fans.

Phase 2: Website

The development of the website started a few weeks after the Facebook page was published. Initially it was just a simple blog where I write articles about web development, particularly about Intrinsic Web Design, which I felt really needed to be announced to Filipino developers.

The first iteration of the website was built with Hexo, a blogging engine. It was hosted on Github Pages. It has gone through different iterations in terms of its aesthetics and user experience, which also reflected my growth as a web designer during the time.

I built the second iteration of the website when I came back to working on it after taking a hiatus in 2019. I decided to rebuild it from scratch. This time I used Jekyll, a blogging engine built with Ruby, and again, hosted on Github Pages. I chose Jekyll because Github Pages supports it natively, and it allowed me to use Sass for CSS. It also didn't need a database or CMS since all articles can be written in Markdown, just like in Hexo.

Phase 3: Youtube

The third phase of this project started just recently. I opened the Antares Programming Youtube channel. It barely has anything, as video production is very tedious and costly. But I intend to post videos in the future.

Results

At the time of writing, Antares Programming has more than 2,000 fans on its Facebook page, and it is still increasing. I have disabled analytics on the website since I have reservations on using Google Analytics (data privacy) and the alternatives are quite costly for my needs. However, quite a few people sent their messages of thanks regarding the website.

Quantarks is an augmented reality (AR) application for Android devices that serves interactive content to facilitate learning about the periodic table of elements. This was our thesis project for my bachelor's degree in Computer Science. This project was made by a team that included me and three other developers and designers that happened to be my best friends.

For this project, I worked as the lead developer. I also acted as the project manager. One of our teammates acted as another developer to help me. The other two were user experience (UX) designers, and one of them also worked on modelling the 3D objects that we incorporated in the app for the AR experience.

Problem

Chemistry is subjectively one of the hardest branches of science. And while teachers are smart and skilled enough to teach this subject, they could benefit from infusing entertainment into education.

The goal of this project is to create a prototype of an application that will eventually be used in a classroom setting in the Philippines. It also has to solve the following problems:

• It has to be accessible offline for schools in areas with slow Internet connection or none at all.
• It has to be accessible by people with no smartphones, and those with smartphones that are not powerful enough to run the application.
• It should be cost-effective, and as cheap to produce as possible.

Solution

We started working on the project mid-2018. We initially explored using Android's native application programming interface (API) for the user interface (UI), and Unity 3D and Vuforia for the augmented reality section. However, as the project progressed, we realized that this is not an ideal setup, and it would cost us much later in the development. We decided to scrap the UI we had and rebuild it using Unity 3D.

Because of how AR technology worked at the time, we also had to create markers, which are pieces of graphics printed on a medium. Each element on the periodic table had a unique marker printed on a piece of card that students could use personally. These markers were designed by one of our UX designers. He also designed a large periodic table with the same markers on it for use in a classroom setting.

Solving the problems

To tick off every item on the list of problems we need to solve, building the app is only a part of the solution. Our goal isn't to just incorporate technology into education just because. Our goal is to incorporate entertainment into education, and technology is only one of the tools to make that happen. This means that we need to work on this project from the base, i.e. little technology involved, and progressively enhance from there by incorporating technology for those who can afford and use it.

• It has to be accessible offline for schools in areas with slow Internet connection or none at all.
  • On our builds of the application, we built the 3D models into the app installer itself. This means that the app will work even in the complete absence of Internet connectivity. A consequence of this is the large download size (~700mb) of the installer. We think this wouldn't be a problem on higher-end devices, as several games on the Google Play Store exceed the 1 gigabyte mark for download size.
  • We could have improved this further by excluding the 3D models from the installer build and instead hosting it on a server. The app then downloads it on its first use. Once it has downloaded all 3D models, it will not need to connect to the Internet again.
  • Another way this could work is instead of downloading everything on first use, we only download the 3D model of the element that was scanned using the app. We can then save this on the device's cache. But there is no guarantee that this will be saved until the next time the app is used and will require Internet connectivity more often than that of the other two proposed solutions.
  Because of the time constraints our team faced, we were not able to exclude the assets from the installer build and host it on a server.
• It has to be accessible by people with no smartphones, and those with smartphones that are not powerful enough to run the application. Instead of designing custom markers from scratch, we used QR codes for each element. These QR codes could potentially store plain text that holds information about the element. This enables people with no internet connection to view the information we want them to know about even when there is no Internet connectivity. This could also potentially store a uniform resorce locator (URL) that leads to a webpage that has all the details about that element. This will enable learners with smartphones that are not powerful enough to run the Quantarks app to view the content on the web instead. Unfortunately, due to time constraints, we didn't have the opportunity to embed the information or the URL in the QR codes, so we settled on using the element's names instead.
• It should be cost-effective, and as cheap to produce as possible. The marker cards and the periodic table are made of sintra board. All of these costed us ₱2,160.00 at that time. If these are to be mass produced, the cost could go lower. If this project was also to be funded by the institution that will use it, the cost could be much cheaper for the teacher and the learners that would avail of it. This price could go even lower, as the markers could be printed on paper in grayscale. Since the QR code's pattern is not dependent on color, the markers could be printed on bond paper and reproduced using photocopiers.

Results

We were not able to test this application in a real world setting. However, our team participated in the school's thesis exhibit where students and visitors got their hands on our app. The reviews were generally good, with a few of them noticing the flaws of the application. Our project was also among the ten best thesis projects of that year in our university.