Launched: UVIndex.SG

Launched a new social good project, in a day!

With the extreme sunny conditions in Singapore recently, I got inspired and made UVIndex.SG for us locals to know when to avoid being out in the sun and better live with the UV conditions.

Problem

The challenge with using the existing gov website by the National Environment Agency is how I get a lot of ‘noise’ I don’t need. I’m just a normal citizen trying to get through the day with minimal UV exposure. I want to get what I need at a glance, know what I need do, and move on. I don’t need fancy charts to see the UV of the day. I don’t need to understand the ins and outs of the meteorological science behind it and what solar radiation is. Maybe some organisations need all the bells and whistles from the gov website, but not me, and I believe, not most ordinary citizens either. I want to be able to see the UV Index number, and read the health advisory directly below it, and I’m good. But right now I see the number but have to go to another page or other sources to see what that number means. A little too much friction and clicking around for my liking.

Solution

I borrowed the same concept from PSI.SG, another social good web app I made last year to deal with the annual haze conditions. Just show the reading as the key feature, followed by actionable tips below it.

• The biggest thing that users see right away is the UV Index number, and the background colour that reflects the same UV exposure category colour as the number. That enhances glanceability. I see green and yellow, I’m good. I see red and purple, ok I got to read more.
• Sometimes the reading is cached at an outdated reading from the past. The refresh icon allows users to refresh the reading right there on the main interface instead of having to reach the top or bottom for browser controls.
• The health advisory comes right after, because what good is knowing the number if we don’t know what the heck it means and what we got to do? It’s the second most important piece of information. So in terms of visual hierarchy, it comes right after the main index number.
• For diversity and inclusion, I added Google Translate links in the top right corner so that folks who are more comfortable with their ethnic languages can choose to use it.
• For legitimacy and accuracy, there’s an “Updated at” note, and a dropdown info box that talks about our data sources, for those who wish to verify the legitimacy of the data.
• Customary links to introduce myself and an online form for feedback/bugs, as well as a Buy Me A Coffee button for those who would like to support my tech for good projects (those expensive .sg domains don’t pay for themselves!).
• Lastly, to make it easier to access than having to google for the uvindex.sg website every time, I added a “Add to home screen” instructions at the bottom of the site.

Tech stack

This time I only took one day to build the MVP version because I mostly copy-pasted code over from PSI.SG. I spent the 2nd day polishing up the rough edges. It’s pretty much 90% similar in terms of concept—just a frontend PWA-like web app fetching data from a government API and showing a number—so there wasn’t a need to reinvent the wheel. That’s why it looks the same! (Maybe too similar… 🤔)

The entire web app is made in plain Javascript with a sprinkling of Vue.js, in a single index.html file. The code is a public repo on Github, and hosted on Cloudflare Pages. Barebones basic and simple stack, no need build tools, framework or anything fancy since it’s a single feature micro app.

I saw that the domain uvindex.sg was available, so quickly bought it and hooked it up to Cloudflare domains too. As always, I try to use a plain boring descriptive domain name for my social good apps – cognitively easier to recall and search, better for SEO, pragmatic.

So what do you think? Let me know if you think it works!