When I thought about converting the Skyscrapers PDF downloads into an interactive experience I was torn between designing a flat form-based experience vs something more...gamified. I wanted to create an interface that felt inviting, fun, and a little bit cheesy, just like the good old days. The first logical consideration was which game engine I should use, which led down a Steam vs web-publishing second-guessing spiral. Alas, I chose to skip Steam and focus on convenience for my followers who access the daily puzzles via Instagram.

Dev-First Thinking

Being chronically developer-brained, I started with the evaluation of technical constraints, how the site would scale, where to store data, how uses would access the platform securely, and choosing the best coding tools and libraries. Optimizing for development fun, of course. The goal was to make sure that in the future I can allow users to track their progress, daily activity, and that regardless of scale that the platform remains responsive and loads quickly on different devices.

I adopted a mobile-first design approach, designing the game interface specifically for mobile devices first and then adapting it for desktop computers. I had to consider things such as page load times, data caching, image optimization, performance limitations on older devices, etc... These factors were crucial in the research phase when deciding what kind of code architecture, platforms and tools to build with.

Technically Designing

Next up was the visual design phase, and time to pull out my first love, Flash! There were a fair amount of technical design considerations, such as adaptive sizes for different screen resolutions, respecting minimum pixel sizes for touch targets. One particular sticking points was how users would be able to select which numbers to place in a cell without taking up a large portion of the screen with a “custom keyboard”.

The first iteration of the game looked quite plain and felt “dry” so I added a light blue-gradient background, add a looping city skyline for atmosphere and style. For font and background color selections, I focused on readability and chose colors and fonts that provided sufficient contrast for legibility.

Hands-on Development

Finally it was time to put pen-to-paper, as they say. I started with building up the basic game implementation system, so that I can reuse it in the future for other games/applications on the platform. Then I worked on the UI, creating reusable, customizable components such as buttons and form elements as I moved forward. Things were looking good. However, things were feeling “dry” again. So, I sourced some music and incorporated some background traffic noise for ambiance.

Right now I am still in the development phase, mostly iterating over building interactions, debugging and testing each edge case as I implement them. It’s a bit of a circular process, but it’ll save me headaches well into the future.

Looking to the Future

As I continue to develop and refine the game, I am also considering the future additions such as user sessions and progress saving. Both of which are a part of the long-term plan to create an engaging, interactive platform with minor social elements that can become a place to relax and hang out with cool people online.

Admittedly, my focus is split between the game itself and the platform infrastructure, causing the development process to take longer than strictly necessary. However, I am prioritizing releasing the playable version of the game before adding any platform-related doohickeys.

As usual, I am having a lot of fun with the process and I hope everyone will enjoy the final result!

That’s been my life recently. Besides having way too much on my plate, self-inflicted, I am vastly under-slept. One thing I’ve learned is that when my body is tired I sleep better. Today, being exhausted, I figured I wouldn’t be able to make any decent progress on any tasks. So, why not prioritize feeling better physically? I tossed today’s tasks into my pomodoro and set it to 20 minutes of work, with 3 minute mobility breaks.

The whole concept seemed counter-intuitive. I didn’t expect to get much done, just to maintain some sanity. To the contrary, and my surprise, not only did my mood improve significantly, but my focus also improved, despite the fatigue.

So, what’s the deal?

I believe the biggest factor is that I wasn’t taking “passive breaks”, like texting, scrolling on my phone, or watching a video. I was actually engaging and present with my body. The 3-minute time limit for physical activity meant I didn’t become exhausted and was actually energized. In similar fashion, the 20-minute time limit for work left me excited to get back to work.

That said, I hate exercise. More specifically, repetitive exercise. I do not like picking things up and putting them down in an infinite loop. So, for my breaks I focused on mobility; sitting in a deep squat, toe touches, stretches and later, things like dead hangs and farmer’s walks. All of these are easy to execute even on low-energy days, and are insanely beneficial.

How did we get here?

A few months ago, I fell into extreme competitiveness with my childhood self. Why am I proportionally weaker than I was as a child? Absolutely not. That’s crazy. So I decided to start with calisthenics, but with my negative strength stats and maxed out laziness trait that was a HARD “No!”. So, I started with something simpler, working on my deep squat. Later, I added strength exercises like dead hangs and farmer’s walks.

These exercises that I gravitate towards are easy to execute and lean heavily into the isometrics category. Exercises that force you to engage with your muscles, focus your mind, and build stability. Doing these exercises have actually resolved a lot of aches, pains and struggles.

What now?

I encourage you to give it a shot yourself. Incorporate bits of active play and movement into your daily routines; a couple minutes here to challenge yourself. Be able to climb, jump rope, do bridges and all of the other BASIC things we could do as kids without thinking.

It’s amazing how much small tidbits of effort culminate into real change.

Here’s a Lazy Fitness Activity Tracker to help you stay motivated.

Lazy Fitness Activity Tracker

59.5KB ∙ PDF file

Download

This tracker was born from a simple realization that short movement breaks during the workday did more for my mood, focus, and energy than pushing through exhaustion. It's a 30-day experiment in what happens when you simply get up and move.

Download

For the last few months I’ve been sharing Skyscraper puzzles on Instagram, with links to downloadable PDFs. The PDFs were created so that people could actually print them and play offline, or use the interactive form feature to play on their computer. My original thought was that users would appreciate having puzzles they could tackle whenever and wherever they wanted. However, it was only later on that I realized how out of touch I seem to be.

The Turning Point

I’ve always been a fan of traditional puzzles and puzzle books, which is naturally why I published the Skyscrapers puzzle book series. So, I was deeply entrenched in the mindset of things need to be accessible offline, things need to be printable. However, after interacting with Instagram and Facebook for the last few months I realized that the puzzles are not convenient or accessible for mobile users. More specifically, that they would find it difficult to engage with PDFs on their devices.

Then came the lightbulb moment: “These puzzles should be interactive!” If people can’t play them, what’s the point? I’m not accomplishing anything.

Let’s Start with Scope Creep

Given the complexity of building an app, I’ve decided to start with a web experience first that works on mobile. It’s faster to build, with my limited free time, and reduces the burden of developing for multiple platforms.

True to form I immediately began to over-complicate the process, extend features, delve deeply into research and just generally start spinning my wheels and compounding stress. Yeah, no. I’m not allowed to do that anymore. So I’ve pared all of the features down to just get the playable application out the door and into your hands. Err.. devices?

The State of Things

Luckily it wasn’t too hard to choose an engine and ramp up my knowledge on the syntax and framework. Then it was time to hop into my beloved Flash (animation software) to make assets! The biggest challenge has been building things to be extremely mobile friendly and responsive, which I imagine is going to take quite a bit of testing and debugging to get just right, but I’m optimistic.

As of now, I’ve gotten the design finished and the basic UI working; implemented menus, settings and dynamic puzzle population. However, there’s still some work to be done; cross-platform number inputs, pencil marks, hints, solution checking and a bunch of testing.

Designing the user experience is a fun challenge; I want to create an interface that feels inviting, fun and a little bit cheesy, just like the good old days.

To infinity and beyond

The rest of the site is currently in development, and will offer more features, such as: daily tracking and minor social elements. I hope to expand this into a full-fledged app, complete with more puzzles, games, and creative content. Naturally, all of you being able to access and enjoy the content is the most crucial thing. Feel free to reach out and let me know if you’re interested in early-access, beta testing new features, or if you just have something that you’d like to see. There’s so many things I want to build and I can’t wait to share them all with you.

The Backstory

My first reel was a re-upload of my first game trailer, created with video editing software. Years later, after a long hiatus, I settled on a cartoon-based comic style for my content. Naturally, a cartoon style steered me straight toward vector art and into the arms of the old animation software I love, Flash.

My initial intention was to post exported comic-style scenes as static images on Instagram, but the algo-gods wagged their fingers, saying “No no no no, we promote carousels ‘round these parts”. Alright. So I pivoted into doing carousel-style posts instead.

Shortly after that I heard a whisper in my ear at night saying “... but reels would be even better-”.

Thank you algo-whisperer.

The Reel Life

After that new revelation, I decided to upload my individual carousel images on the Instagram app and have it piece a reel together. The process was much smoother than I thought it would be, however it placed inconvenient watermarks on the final version, so that was a no go. In the end I decided to use my video editor, begrudgingly, to export the final video and add audio via the app.

The Struggle: First Book Release Reel

When the time rolled around to announce a new Skyscraper puzzle book I was in the mindset of “Okay, this is a physical book so it should be photorealistic. Most of the creative work was done in Photoshop and exported as individual images into the video editor for animation and processing.

Remember how I mentioned that I was begrudgingly using the video editor? Yeah... buckle in.

This PAID video editor ships with the following features:

• Clip snapping always enabled

• Only able to add transitions on the bottom-most layer

• A composition-free experience

• Drag to scale only, with no numerical input or feedback, keeping scaling a fun visual adventure

• Auto-determined video length, with no in point or out point

• A library of features you can pay to enable

...and the list goes on. It almost makes me miss After Effects... almost.

That said, it’s not without its merits and if you look at it through the lens of being a more feature-full version of Windows Movie Maker it’s even quite good.

Regardless, I managed to get the first book release reel out the door, with some minor dissatisfaction. But you know what? It did the job.

[First book release reel]

A New Way to Work

At this point, I had gotten so comfortable using Flash again that I thought, “You know what? Let me try doing a full animation for the new puzzle-solving tips reels.” So I created a few tutorial reels in Flash over the next month, replete with a growing library of reusable components. I would then use the video editor for some basic transitions and to export to an Instagram-compatible format.

The new process worked surprisingly well, and I continued to oscillate between two workflows; a photorealistic workflow, based on video recordings and Photoshopped images, and a cartoon workflow, centered on Flash animations.

The Renewed Struggle? Second Book Release Reel

Soon the second month’s book release peeked its head around the corner. I opened up the previous month’s project in the video editor optimistically, just knowing it was the better option. After all, it’s just a few drag-and-drop replacements, right?

Oh, so young. So naive.

As much as I love Flash, I had severe misgivings about actually using it for the reel as Flash does not handle photorealistic graphics or video gracefully. However, after tussling with those wonderful video editor features I mentioned, despite my reservations, I switched over to Flash mid-edit, trading the photo quality for a more reliable and fun workflow.

Being short on time I re-exported the assets from Photoshop and recreated the original reel style, with some minor changes to prevent the as much distortion as possible.

I ended up with an easy, streamlined, reusable flow; switch out the book, update the background color, change the volume number. Boom, we’re ready to go. Easy peasy.

[Second book release reel]

Struggle-Be-Gone! Third Book Release Reel

Over the next few weeks I experimented with software to offload the manual character animation process. Just as I was getting into the groove of the new workflows, book release three whipped its head around and stared into my soul.

This time around I opened the previous month’s Flash project and breathed a sigh of relief. The book cover, background and text swap went smoothly and painlessly. At this point I thought, “What would make the reel more interesting?” After all, now that my workflow was smooth I could afford to be creative again.

I decided to incorporate some of the reusable animations from my puzzle tip reels to animate solving the puzzle on the cover of the book. Applying the transition from vector to photorealistic did take some time, but it was still relatively painless.

Finally, I had the reel of my dreams! Yet, something felt...off. It felt too digital, too app-coded; the intro just wasn’t giving off a physical product vibe. I hopped online and grabbed a vector image of a pencil to add to the number animations... It still didn’t feel quite right. I realized that I needed a more realistic, human look, even if it introduced another photorealistic-management challenge.

Let me tell you, the levels of slop I encountered in my local workflow trying to get a passable human hand holding a writing utensil... epic. The hand only appears a few times in the animation to write numbers on the puzzle grid, but I think the effort was worth it.

Finally, I threw my animated characters in the corner using the video editor’s god-level chroma-keying feature.

[Third book release reel]

“And that, as they say, is that.” - Maechen

That said, WHERE is a good place to communicate online these days? Everywhere seems to be saturated with content that is anti-longform, marketing-driven, AI-generated and made for instant-gratification.

Suffice it to say I landed on Substack.

I think it’s difficult in this day and age to connect with people, both online and offline as the individualistic mindset has become very prevalent.

I’d love to see more of the activities we used to love, games we used to play and casual social interactions we used to enjoy. That’s the crux of why I created Random Box Studio in the first place, but that’s a story for another time.

Has Internet Culture Fundamentally Changed?

Those of you from the Millennial generation and beyond might remember the days when many online spaces felt like walking into a convention wearing a “Hug me!” t-shirt. People were just excited to be there and that you were there and couldn’t wait to chat and share ideas. Naturally, some people were stringent, or humourless, and there was obviously a toxic element, but such is the way of humanity. In the end we still managed to have decent communities.

I actually posted on a platform the other day in a puzzle space and I was flabbergasted at the amount of vitriol in the space along with the lack of trust, empathy, manners, and basic human kindness. It was honestly heartbreaking. It was a very strange, isolating, and otherizing experience. I didn’t expect interactions to have changed so much. It feels as though communication that used to be defined as edgy or borderline has now become the net default.

So, how are you?

In light of my recent experiences, I’ve come to hope you all are doing well out here. I want you to know that you’re not alone. Reasonable, chill people, with basic social etiquette still exist. We’re just overwhelmed with social changes, economic changes, the corporate cycle, running businesses, parenting, health-related struggles, and general adulting.

Yesteryear was far from perfect, but it’s also a far cry from what I’m seeing today.

But, let me know if you see otherwise. We’re all being algorithmized into different sections of the internet. Maybe you’ve found a cool one.