Stripe Bot

The past week or so, I started tinkering with botsy stuff on Express.js + Discord. Managed to make one which notifies the team in Discord whenever we have a new paid subscription! Hope it serves as a motivator for all. Sometimes we just need that feedback loop to get a dose of motivational energy 😋.

Masked user email for security reasons. As the team expands, there might only be a few who needs and should have access to such information.

Today is also my last day in Mercurics. It's been an amazing 3 years+!

Interactive Data

(this page has been renamed as Data Explorer in my portfolio section)

As the number of assessments created by assessors increase, I want to help them make their data reusable and useful. One way to do it is through a tool which pulls data across ALL assessments created by the organisation. This tool will have tag and participant filters to help the assessor view cross-sections of the organisation (e.g. the HR department) easily. Once we are able to get demographics data (salary, age group, gender etc.), this tool will get more powerful.

Some questions it might be able to answer:

  • What kinds of people are we hiring?
  • What kinds of people form the majority in the Finance department?
  • How are males and females' characteristics different in our organisation?
  • How does the Finance team differ from the Logistics team?
  • etc.

The next step would be to open up these data through API for internal use, or for calls to other HR platforms for insights. For a more open web!

Rainbow Vote

I'm building an interface for an event which utilises quadratic voting. Quadratic voting is a new concept to me, but the limit boundary - scarcity of voting resources - is what makes it pretty useful to gauge what people really favour imo. Basically, the more you vote for a particular item, the more it is going to cost. First vote costs 1, second vote for the same item costs 3, and so on, based on this formula:

Cost to the voter = (Number of votes)^2

Why rainbow? Cos it represents variety in thoughts and sentiments! Though, someone in my team says the norm about the word "rainbow" = LGBTQ. Didn't know that.

Share assessment

Imagine you are a hirer, and you are able to generate a unique link, paste it into every job listing you have, and get interested applicants to do the assessment as the first step of your hiring process. This is unusual, but I feel it is the way forward as we move towards an economy which places less emphasis on traditional school certificates. You can then filter out which candidates fit your requirements even before you look at their résumé, at scale!

A sample of how it works:

Express Sign Up

As we roll out the alpha version to potential customers, we found out we need a channel for marketing specific assessments to particular people. For example, let's say we want to market our Work From Home Well-being assessment to companies whom we know would be interested in this assessment, we could provide them this unique sign up link where the assessment is selected by default.

It provides a quick and easy way to onboard users for specific assessments. One flaw here is that users would need to invite people right away after creating an account. Some people might not be so open to that. They might want to try the platform out for themselves first before inviting people they know to it. Still, this could be one interesting channel for sign ups if Selfi becomes a household name!

Filtering Participants by Score

I'm experimenting on the best way to filter participants by score range. Not sure this is intuitive for most people though. Gotta test it to find out.

Easier collaboration in API documentation
Easier collaboration in API documentation

I code the front-end of Selfi Personal and Corp, so I'm a user of API documentation. I find Swagger and Trello quite lacking in terms of providing feedback on what kind of data I needed at the front-end. In a perfect scenario, the backend would be nicely planned out and all API are available for use when someone codes the front-end. In the case of a sole backend engineer, sole front-end guy and an ever changing requirements in a project, these platforms are pretty messy to use.

So I thought, why not use Google Docs for this. It turned out to be more useful than I had imagined, providing an interactive platform that allows feedback to flow in both directions (front-end to back-end, and back) for rapid development. It shows which API is currently live, under maintenance, or simple not completed yet. It shows feedback from both parties, allow one to raise issues against the other party and provides a single source of truth of what the final API would be like.

I find this collaboration method scalable and useable as the team grows.

Payment Methods

When a representative from a company wants to purchase a good or service, what comes to his mind? What about an individual?

Over the past month, I have been buying durians from I recall visiting quite a number of durian websites and found their payment methods quite cumbersome and confusing for a consumer. Like, for example, paying through PayNow: I'm not 100% sure whether my order went through, and whether the durian company received and noted my order. accepts credit card. The durian price looks ok too. There are good reviews, so it can't be that bad. So I paid, got my cashback, received the receipt in my email and know what time they deliver. It's a win-win for both consumers and the durian seller - automation and less work on the seller's side, and timely information for me as a user/customer. I became a repeat customer just like that. I can imagine others revisiting the website too. Part of this seamless process is due to availability of paying by credit card - a payment method I'm used to.

When it comes to corporate products like Selfi Corp, who pays and what methods are they used to? Do they have access to the company's credit cards? Do they have authority to transfer money from the company's budget for the specified purposes? I'm not sure. As a start, I believe that payment methods should be seamless. I heard of manual crediting of credits to accounts: buyer sends money to seller's bank account, seller checks that the amount is there, manually update credits to the buyer's account, buyer uses credits to buy services and products. Doesn't sound very scalable to me. If the number of purchases go exponentially, is the seller going to hire exponentially too?

Scalability and image are important. If the seller can automate the crediting / dispatching of goods automatically upon successful payment, he can cut manual work costs. It also provides instant feedback to the buyer on whether the transaction is successful - that's great UX. Time saved. Buyer can immediately utilise his credits or get notified that his goods are coming to him soon.

There are many types of payment methods in Singapore. PayNow, Grab, Credit Card, Xfers etc. The more options provided the better. Users can then choose whichever is most convenient to them. is unbeatable in that aspect. They accept anything I can think so. If development costs is a huge consideration, start with the widely accepted method amongst the buyer target audience. Based on this thought process, I think it's good if we start accepting PayNow and Credit Card first. Then integrate alternative payments like utrust in the future. Utrust is a crypto payment company and has been integrated into WooCommerce on WordPress. I believe it'll go mainstream within the next years. It matters that we integrate a forward-looking payment method to look forward-looking as a company :)

Accessing Demo

Companies whose websites have a "Try Demo" button that leads to a form to fill all kinds of (sensitive) information leaves a distaste. On the Selfi Corporate website, I originally planned for a demo of all features without a single step of signing up. There's a couple of questions to answer:

(1) Are users allowed to create quizzes? If so, to which account should newly created quizzes be tagged to? If not, how do they experience the full Selfi Corporate offering?

(2) Should side features like uploading of organization logo work? Should we just place a dummy UI component to simulate the network communications of fetching?

(3) Should we dedicate time to sieve out all protected paths just for the demo? Currently all features are hidden behind logins, as they should be since all activities need to be tagged to an account.

A random realization came: Why don't we just sign in users when they press the "Try Demo" button. To prevent email and password changes,we just need to need to hide the Settings page on frontend, and lock account information changes for this particular demo account in the database.

However, what if people starts spamming creating of quizzes? :)

Categorising Selfi quizzes
Categorising Selfi quizzes

I'm beginning this uphill task today. It's going to be a fun challenge. 😆

Our team currently keeps a database of quizzes in a spreadsheet (screenshot attached), and when it was first started I introduced an indexing page to help keep track of the statuses of each quiz. For example, whether the quiz descriptions and scoring are ready, whether the illustration of a quiz has been completed, whether it's on staging and production etc. It is a nice tool to keep things organized.

Now the next stage is how to properly organize the quizzes into user-friendly, understandable "journeys" or "paths". When we are faced with a swathe of options, it's hard to not get intimidated. By introducing recommended journeys, I hope we can onboard users better and allow them to find quizzes that interest them faster.

The question is, which categorical naming is good and simple? I like how (check out their app on iOS or Play Store) categorizes information by problems. If one feels overwhelmed by stress, he can attempt the "Stress & Overwhelm" rescue session. I'm not sure these very specific approaches is our answer to categorising quizzes properly on Selfi, but it's a clear one. It provides very specific answers to one's problem and is easier to navigate than the current Selfi Personal site.

Landing page of the intellect app

I'll take some time to categorise things into simple ones I can think of right away first and see how it progresses from there:

  1. Romance
  2. Work and Career
  3. Social Life
End of Selfi Corporate, for now
End of Selfi Corporate, for now

Selfi Corporate is an interface built for people looking to select traits for testing and analysis, and is linked to Personal ( through traits. Any traits that can be found in Personal can be found in Corporate, but tested at a massive scale. HR could use Selfi Corporate as a tool to assess job candidates for certain traits which they deem to be positive or negative depending on company culture and needs. Management can use it to assess company culture and trends of employees and teams. Team leaders could use it to form teams that have a higher probility of working well together.

It was a great sprint. The first version is out on staging and ready for testing! yay.

I'm looking forward to the next sprint, which will include tagging. Kai said users who create quizzes on Selfi Corporate would be lazy to include tags, so we are exploring ways to circumvent that and make it seamless. Like, adding tags automatically through key words used in Quiz Titles.

Current version of giving quiz a name

For example, we can detect Graduation as a "recruitment" exercise, and also add a "external" tag to the quiz. The idea of tags, I believe, is powerful for customization and great for analytics. We could use that for analysing the composition of different types of people, such as:

(1) Internal employees vs people who have not joined the company and are applying, what are the kinds of people in our company vs the kinds of people we are attracting.

(2) What are the traits and trends of people in the "Accounting" department? How does it differ from people in the "IT" department?



Landing and management page for quizzes
Selection of traits for assessment
Inviting participants to take part in the quiz
Analysis of traits by participants or by traits, with filters
Start of Selfi Corporate
Mockup on Adobe XD

Phew. Finally completed the first draft of Selfi Corporate. This mockup is full of hypotheses. Can't emphasize how much was based on my guesses on how HR admins would work with this.

This is the first time another front-end developer is going to use the mockup I come up with, so I had to make sure the details are in there – loading states, success and error messages, making sure that any hover states are clear. We have little time (Yan Kai and I are going to rush this out within 1.5 weeks before the conference Kai would be presenting in. He's going to demo Selfi Personal and Corporate. Good time to get some feedback and exposure). So I skipped all the animation parts and focus solely on the functionality of the app. Our main aim is to test its viability, so the frills can be left behind for now.