Pixels, Puzzles & Progress

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.

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.

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.

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.

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!