HeaTap - Devlog #1

Start with HeaTap development

Posted by Wasin Thonkaew on September 22, 2017

Start from Prototypting

During prototyping period, I keep thinking about map and location. Having seen Hoodmaps by Pieter Levels as well, I can say it plays the huge influencial part of it. I want to make it available and operatable under WeChat's mini-program which has limited features/integration (under JSCore, cannot use window, document, etc object for example) by focusing on Chinese territory without dependent on external Western services. The project is not done yet, and I continue to complete the existing features, also might add something else along the way.

I got MVP (Minimum viable product) within 48 hours that mainly focuses only Paint mode feature,

heatap early screenshot
Heatap Early Screenshot

Then I continued after the 1st week til the end of the month which included 3 times of iterative of UI, implementation for both front-end and backend, refinement, bug fixes, thinking/discussing with my Chinese partner about additional features & how to monetize in the future. That covers timespan for roughly 3 weeks to get to the current point.

Concept is Paint & Pin or PP (I might use PP as the project name when launch). That said you Paint to mark certain area, and Pin to mark specific location with interesting comment.

Chinese people often call P when they refer to PhotoshopTM i.e. You P him in this photo? That's why I want to play around with this word-playing to align with the culture a bit :P

Let's see below.

heatap general interaction heatap pin mode

heatap zoom in/out heatap paint mode

From left to right, top to bottom.

  • General interaction
  • Pin mode
  • Zoom in/out + Panning
  • Paint mode

Here a clear screenshot

heatap screenshot old
Image is resized. Click for full resolution.

Don't mind English UI for now as I've planned to localize it to Chinese with the help from my partner.

Tencent deviates away from native ecosystem. One good example is WeChat has to remove its tipping feature from its iOS app. Android is not affected.

Tencent tries to push web apps into its ecosystem; WeChat platform. I see this as opportunity to quickly tap into Chinese market. Its mini-program is the prime flagship at the moment. It's getting improvement, more API support, better IDE, and lucrasive of traffic as seen from growth of WeChat platform and report of 40% of traffic for Mobike coming from its mini-program alone (I got this from attending Techcrunch Shenzhen 2017).

WeChat mini-program is now 9 months old. I ever remember that I was following this platform closely. I still think that I didn't act fast enough. The platform is quite old, still with future potential. The best time to tap into platform is in the past, the second best time is now.

What's it Now?

Time passed reasonable well. UIs are fixed, and pin marker icon is updaed with new one to represent the style I want.


Latest screenshot as of September

The filtering system was added. Marker icons are updated. Minor areas like loading spinner is updated for better UX. Code is fixed.

The following is Pinning process to add a new pin for new place on the map starting from the left-most one to right-most. You hover the center of cursor to the desire location, add a balloon message, then confirm.


Click on each image for full size version

For now, we need to pay attention to handling the application for WeChat's micro payment in order for us to have all required API features ready in the future. Although we didn't plan to immediately charge service fee for Heatap at launch, but we need to get this done to be ready for our next future applets.

Until next time that we complete our administrative task, we will update you back here again.