Gamifying Sunscreen || Part 3: Ship it!

Before and after photos and a minor confessions.

Oct 13, 2024

This is Episode 3, Part 3 in the [Game On] series, where I attempt to design, code, and ship one new app every other month. Links to Part 1 and Part 2 but the TL;DR is I made an app that gamifies your sunscreen-wearing habits.

I shipped it!
The app is live!
You can download it on the App Store here!

Before and after photos

I spent the last fourteen days converting wireframes into real UI. Here are some of my favorite transformations from MVP to Production:

The Today Tab got a serious facelift. I removed the ←→ arrows and went with a week-long view. Tapping on a day also expands to show your daily “report card”. I went away from the system blue 🟦 (which was never going to stay) to a sky blue 🩵. I loved the “man on fire” image but replaced it with ☢️ so I could keep all the symbols in the app consistent. Plus, I’m realizing that SF Symbols are pretty awesome! You can customize and animate them without much work. Incredibly handy. Thanks, Apple!

The Pet Egg/Awards tab now includes more than just an egg 🥚! Yay! I added a grid of calculations and stats because who doesn’t love seeing their numbers go up 📈?

This was the easiest screen to make improvements to 😂. Having said that, I still tried to keep it informative while using a strong yellow to signal what mattered most.

Some things that made me smile

A collection of things that made me smile more than they should have:

⬆️ ⬆️ ⬆️ I enjoy the subtly of this interaction, especially the award and support icons! Tabbar selections don’t usually do much — a simple font bolding with a color change is par for the course. But I wanted something silly, fun, and under-the-radar.

⬆️ ⬆️ ⬆️ This one was a complete accident. I wanted more depth in my tap interactions with the grid. So I went into “play mode” (throw code at a problem and see what sticks) and this was one of the results. I kept it because it reminds me of my mechanical keyboard. Extremely nerdy. I’m aware.

⬆️ ⬆️ ⬆️ But this one. This is the one that made me laugh out loud (and stupidly proud of myself). I wanted to make the egg challenge adjustable, mainly for the people who are terrible at wearing sunscreen. HOWEVER, I’m sure there are a few of you out there that are INCREDIBLE at sunscreen and need a level more challenging than “hard”. So I created a level with an impossibly high standard — the Asian mom.

(And since I just discovered that my mom reads my Substack — hi mom — this is not an insult. It’s a compliment. Asian moms just have higher standards. IYKYK).

OK, confession time

I shipped the first version of this app in five, not six, weeks. I had to finish it earlier than anticipated so I could make the deadline for a hackathon. Here’s the demo video I made (with narration) to showcase version 1.0:

But that’s not the confession. The confession is that I’m not done with this app and that I’m going to keep working on it! My behavior around sunscreen has shifted so dramatically that my gut tells me I might have something interesting here. Something worthy of time and effort. Something that isn’t just another way to sell you a consumable you don’t need. And sure, you can tell me to get off my high horse but wouldn’t that be cool? To be able to help others be better about sun protection 🤷🏻‍♂️? To turn something as boring as “wear sunscreen” into a game?

Scope Creep

And so here are a few things I built after the first six weeks:

A slightly more elegant (and hopefully less confusing) daily report card.

Full calendar support with daily report cards and emojis: 🆘 = no sunscreen at all, 🥵 = under 15% sunscreen coverage, 🏅= acceptable coverage, 💯= perfect coverage!

Stats that only go up to keep you motivated on your sunscreen journey! But also, just for fun, a good-natured medal of shame with the Crispies 🥵. Think of them like a Razzie Award or SNL’s Pelotaunt — just say NO to toxic positivity!

There’s more meat on this bone

And we all know what that means…

Sorry, I couldn’t resist. RIP Carl Weathers.

But what it actually means is that there is still so much I can do to make sunscreen fun. And most of these things are areas of iOS I have yet to explore so the learning (and writing) won’t stop! Frameworks like:

Swift Charts
WatchOS
Widgets
Apple Intelligence
Sophisticated Live Activity updates
In-App Events (this one’s for you Devang)
App Store offer codes and win-backs (that one’s for you Chi)

It also means I’ll be forced to engage with the marketing side (a side I have zero experience in) by putting myself out there on the socials and talking to people in real life. Stay tuned for those updates because if you enjoy watching disasters unfold, you’re going to love seeing what a human trainwreck of anxiety looks like in action.

For example, I was so nervous when I proposed to Ali, that when I presented her with the ring (that she picked out), instead of asking, “Will you marry me?”, my mouth involuntarily blurted out, “DO YOU WANT IT?”

Yup.
That’s me.
Talking to humans in real life.
We’re in for a wild ride guys.

You can download it now

With all of that out of the way, you can download Daylight (now LUX) here! The first ten days of All-Access are on me. After that, access to today’s data is free (and will always be free) but the calendar and some of the stats will go behind a paywall ($5.99 annually).1 It’s priced exceptionally low because:

I want it to be accessible.
I want sun protection to be fun.
And I want to make a valid attempt at making the world a better place.

And so similarly to how Apple motivates all of us to “close our rings” to be healthier, the LUX app will hopefully motivate everyone to “flip your squares” to be better about skincare!

What’s Next

Dedicating the next couple of weeks to marketing efforts so stay tuned!