Zeh Fernando: Works

Iconfound

Zeh Fernando — Sat, 18 Jul 2026 02:30:23 GMT

Daily Codebreaking Puzzle

My good friends Don and Mike had the idea for a cryptogram-like puzzle built on simple symbols, played as a daily word game (in the style of Wordle). I jumped at the chance to build a web-based PWA, and Iconfound is the result.

In Iconfound, you’re given five encoded words around a common theme, and you have to work each one out from its symbols. There’s a new puzzle every day, plus all the patterns you’d expect from the genre: an archive of past games you can replay, streak tracking, a mobile-first design, and more.

The implementation of the game itself is very straightforward. It works as a simple React Single Page Application made in TypeScript, with minimal dependencies (e.g. no global state management library), and no server component.

No logins, no ads; just pure puzzling, made out of love for the genre.

CAVA Grill

Zeh Fernando — Tue, 16 Jun 2020 14:29:38 GMT

Modern food ordering app

CAVA is a growing Mediterranean, fast-casual restaurant chain with a flavorful menu of customizable bowls, salads and pitas.

The client had already published a successful cross-platform React Native mobile app to support their order ahead system, and Work & Co’s mission was to create a new version of that app, still using the same technologies.

The application’s design and implementation was centered around the concept of “order sentences”: customers could create new customized orders using a text-like interface, and use an “emoji” keyboard for ingredients. That way of representing orders was reused throughout the app, including in non-editable order views, creating a language of its own for the restaurant chain’s rich menu.

We had a large team for this project (relatively speaking) that worked closely with the client’s engineering team not only to create a new version of their mobile app, but also to help them redefine the schema for a new version of their server-side APIs based on new business requirements.

This project presented several interesting visual challenges. The home screen carousel (a custom carousel featuring diagonally masked, parallax supporting content), many subtle but complex animations, and some of the layout aspects of the order sentence component (where emojis and text components had to be mixed with custom layout rules) were highly challenging and yet thoroughly enjoyable highlights for me.

MTA Map

Zeh Fernando — Mon, 16 Nov 2020 18:21:26 GMT

New web version of the iconic subway map

Annually, Work & Co performs an internal survey to identify projects and clients the company’s employees want to work on. MTA has always rated high up in that survey, and after some insistence, we were lucky enough to strike a partnership with MTA and their design firm to then develop a new version of their famous online map, pro-bono.

Under the geometry-rich leadership of Robert Penner, Work & Co developed a beautiful, data-rich new map that not only attempted to be more useful than ever, but also to settle long-disputed design questions between Vignelli’s and Hertz’ version of the iconic subway map.

While it was done for free, this was a long project. Its development took over a year, with a full team and a wonderful client that was fully invested in improving the user experience of the existing map. My own contributions were in helping optimize some data transformation performance, increase visual fidelity, and reduce overall memory usage.

Still, given its significance, it’s a project I’m most proud of having helped bring to life. I’m also excited to see where it is taken to after the beta phase ends.

Random Art Generator

Zeh Fernando — Mon, 16 Nov 2020 18:21:26 GMT

Command-line application to produce generative art

As an attempt to create a tool for generating seemingly abstract art from photographs, and also as an excuse to learn the Rust language, I decided to create a command-line based application that takes an input “target” image and attempts to recreate it solely with randomly placed image elements such as squares and circles, using a technique known as hill climbing.

The result is Random Art Generator, or RAG, a Rust-based, low-dependency command line application that takes a rich number of input parameters and creates an image according to those.

This was a fun, open-source personal project with no serious purpose, but it worked very well as an introduction to the language, and to scratch the itch I’ve had of creating this tool for a while. As such, I’m still evolving it by adding more features and improving on the code when I can, at the same time posting some creations online at Instagram and Twitter.

It also made me really fall in love with Rust. I expect to be using it for a while, even if only in personal projects.

Daily Harvest

Zeh Fernando — Fri, 29 Apr 2022 17:57:07 GMT

App for food subscription service

Daily Harvest is a company serving sustainably sourced, healthy, easy-to-prepare food as a subscription-based service.

While they already had a pretty sleek mobile app for Android and iOS (created by Per Kreipke using React Native and Expo), they approached Work & Co to help them get it to the next level. We collaborated extensively with their design, marketing, and engineering teams by updating its design, implementing new functionality, and optimizing the performance of what was already in place.

In that sense, that was an uncommon project for Work & Co: rather than create a new application from the ground up, the role of developers was more to revamp and refactor existing parts of the current application and make the overall experience better. We had some pretty unique challenges to solve for animation, performance and user interface (scrollviews within scrollviews within scrollviews!), and I believe we solved them well.

Fortnite Installer

Zeh Fernando — Sat, 14 Sep 2019 23:19:44 GMT

Mobile installer for the Android version of Fortnite

As part of the retainer work Work & Co has been doing for Epic Games, we were tasked with helping them get an Android application ready to serve as an installer for their hit Battle Royale game, Fortnite. This was a unique opportunity: being part of a talented team, and helping create an application that would be used by millions of people across the globe.

As an embedded part of their team, Work & Co’s role was mostly focused on designing and implementing the user interface for the app. The UI uses modern web technology (React, Redux, etc.), and is loaded from a server by a native Android application through a webview.

My role in this project was mixed. As part of the Work & Co team, I had to help oversee some of the managerial aspects of the project, as well as actually implement some features. I ended up helping both on the native side, implementing some native Android features and fixing bugs using Java, as well as on the user interface side, working on the web UI that is seen by the users in JavaScript.

With a team of dozens working on both the native application and the web UI, my contributions to the project were relatively focused. Still, it was a project I’m proud of having helped bring to life. It’s not always that you get to create something that is seen by 16 million people (as of December 2018).

Also interestingly, this installer was always meant to live on: despite starting as an exclusive Fortnite installer, it later morphed into Epic Games’ official game installer.

Work&Co Posters

Zeh Fernando — Sat, 22 Sep 2018 04:00:00 GMT

Code-driven posters to celebrate Work & Co’s 5th anniversary

To celebrate Work & Co’s 5-year anniversary, Spanish design studio Hey Studio was tasked with creating minimalist, modern posters for the occasion. These posters were printed and distributed around the company.

To expand on the celebratory nature of the occasion, and to symbolize the balance between design and technology that are pillars of Work & Co’s work, we decided to create pure programmatic versions of the posters.

The result is three designs programmatically recreated in JavaScript using no external assets or resources. All graphics and animations are code driven, and perfectly replicate the original poster designs.

Originally, the intention was to have anyone “extend” the code provided, tweaking its elements and adding their own twists to the code. To get everyone from programmers to designers to product managers involved, the project was built in a way that uses no external dependencies and has no build workflow. It doesn’t use webpack, Babel, Grunt, Gulp, or any of the tools normally used in modern JavaScript development.

This means that files can be edited in any text editor, and reloaded in the browser without the need for specialized tools, any complicated setup, or the use of the command line. In other words, it’s much easier to play around with it.

Unfortunately, in the end, the programmatic posters were not publicly used. But the code remains and, overall, it is still a project I’m proud of.

Philz Coffee

Zeh Fernando — Mon, 12 Mar 2018 04:00:00 GMT

Order-ahead system for a beloved coffee brand

When beloved West Coast coffee brand Philz Coffee wanted a partner to help them design and develop their “order ahead” mobile apps, Work & Co was the chosen company to get the project and I was lucky enough to be one of the developers involved, leading development of the client apps.

What started as a simple MVP candidate turned into a nearly one year commitment, with a lot of research and polishing involved in creating a beautiful, yet performant application that manages to awe and never compromise. To keep the application consistent across Android and iOS, and guarantee near-immediate release on both platforms, we ended up basing the whole application in React Native, a somewhat new platform for us.

While I had React and some React Native experience, this was also a project of many firsts for me. For one thing, it was the first time I had to focus on actual native iOS development (using Objective-C), since we had many components that required a native counterpart to be built or linked.

It was also the first project where I seriously dived into GraphQL, as it was our chosen API architecture. We first created an initial GraphQL schema based on our design’s business requirements, as well as a mock server as a proof of concept, and then handed off the responsibilities of creating the production server to a third-party chosen by the client (Lohika). This worked very well to ensure that the platform met our expectations.

On a less technical note, with a size varying between 2-5 developers at different times, it was also the biggest frontend team I’ve led and helped manage until that date. This team ended up setting the foundation for Philz’ own new engineering department, as we helped recruit and train new engineers that took over the project from Work & Co’s hands.

And finally, this was also my first project to ever be featured during a WWDC keynote, when Apple used Philz as an example of how a new iOS feature (Siri shortcuts) would work. I wasn’t directly involved with any of the material used in the presentation, but it still was a proud moment to see an application you helped develop in front of so many eyeballs.

Security Planner

Zeh Fernando — Mon, 18 Dec 2017 05:00:00 GMT

Confidential online safety checking tool

Websites with a good cause are always a pleasure to work with. This one - a concerted effort by Google’s Jigsaw and CitizenLab - aims to help non-expert visitors such as journalists and activists identify their probable security vulnerabilities, and recommends tools to help solve those problems.

This very nicely illustrated and animated website was a lot of fun to create. It did have its share of challenges, however. Those include a development and testing schedule that saw the project put on hold twice (extending the development time to more than two years), as well as a handoff of the source that guaranteed the current version has little resemblance to the original designs. The latter is not necessarily a bad thing: many fixes and improvements have been made to the original project, and I applaud the version that went live.

This was also a lesson on changing scope and increasing UX complexity during development. After this project was over, I made a promise to myself: not to use global CSS anymore (picking CSS modules instead), and no more JavaScript-based React projects (TypeScript being the way to go).

Forward Majority

Zeh Fernando — Sat, 25 Mar 2017 04:00:00 GMT

Website for a democracy-defending group

In order to gain control of state chambers and combat gerrymandering at the national level, prominent figures of the Democratic Party decided to start Forward Majority, a movement to raise awareness of the problem and ask for help targeting specific state legislature voting in the coming years.

This was a pro-bono website project championed by Work & Co in the wake of the 2016 election results. We worked with the Forward Majority team to come up with a fast yet elegant design that successfully communicated the mission of the group. The powerful yet clear design identity shows.

The result was one of the fastest projects of my career: it took about a week and a half from beginning of development to the day it was published. Yet, it is a no-compromise project that is likely to be live for a while.

Virgin America App

Zeh Fernando — Sat, 09 Jul 2016 04:00:00 GMT

Virgin America’s mobile Android application

Following on the work done for Virgin America’s new website, Work & Co was tasked with creating Virgin’s new mobile app for iOS and Android.

The elegantly simple design was carried over from their site’s identity, and the result was a straightforward native experience that uses the best of each of the platform’s strengths.

While still using the native user interface for all interactivity and rendering, the app features a Lua-based internal middleware for most of the business logic. This allowed us to keep behavior consistent across platforms, and minimize complex code duplication efforts.

One thing I learned with this project is that working with airline data is more complicated than I initially imagined. User actions warrant more edge cases than it would seem at first glance. Because of that, this project was a massive undertaking, with about 8 software engineers working on it for most of its duration.

My role as a developer on the Android team was writing a good chunk of the code needed for the user interface, helping with the development and testing of the Lua middle layer, and helping with testing and automated deployment.

The Art of Patrón

Zeh Fernando — Sun, 19 Mar 2017 04:00:00 GMT

VR experience player, controller, and recorder

After working on Dew VR Skate and Dew VR Snow, Firstborn was aiming high with their work on interactive 360” videos. When Patrón approached the company for a VR experience of their own, the decision was made to create a 360” experience that was a mix of drone-filmed 360” footage and computer-generated graphics.

The result was “The Art of Patrón”, an interactive visit of Patrón’s Mexico hacienda through the eyes of the bee that represents the spirit of Patrón. From a technical standpoint, we worked on top of the existing VR platform created for previous projects. The difference in this case was that on top of creating the application for an interactive installation, and exporting MilkVR-ready videos, we also created an online, web-based player that would allow visitors to watch a video in 360” mode.

In that video player, they could use either their mouse to look around, or, when using a mobile device, just move around to look at different angles as if they were inside the experience (this last feature was implemented before YouTube had a 360” video player of their own).

The final experience was unveiled at Patrón’s own events in Los Angeles and New York, in a very well put together installation that mimicked their own Hacienda. A great client all around, too.

Dew VR Snow

Zeh Fernando — Sat, 12 Aug 2017 04:00:00 GMT

VR experience player with user interaction, controller, and recorder

Following on the success of Dew VR Skate, we wanted to update the application for a new Snowboarding experience. After having created the recorder component for that previous version, I was brought in as the lead developer for this new project.

The new version was further optimized for resolution and performance. It also allowed for further control of the experience: by using a one-button wired controller, visitors could slow down time and watch parts of the experience in slow motion. It also allowed for rewinding, although that feature was disabled during live performances in the Dew Tour (otherwise visitors could extend their experience indefinitely).

A big chunk of the work for this version was about coming up with better workflows for video encoding, including to deploy it to Samsung’s new Milk VR platform. This was accomplished with widespread use of FFmpeg.

Kabeat Kabox

Zeh Fernando — Sun, 12 Feb 2017 05:00:00 GMT

Mobile audio mixing for kids

Lunchables Kabeat Kabox allows kids to create personalized music tracks to share with friends. They start by recording a short phrase or word, and then can tap, swipe and slide to mix and match pre-loaded melodies and beats.

This was a fun, interactive experience that allowed kids and adults alike to create funny and inventive beats.

This project was led by Dofl Yun in general, and Ali Jafaar on the Android side. My role was one of support, implementing a performant animation for one of the modes on Android, and making the application as a whole more stable.

Dew VR Skate

Zeh Fernando — Sun, 19 Feb 2017 05:00:00 GMT

VR experience recorder

Firstborn created a 360” live-action video VR experience where famous skateboarders were filmed skating through Las Vegas. Then, during the Brooklyn leg of Mountain Dew’s “Dew Tour”, visitors were invited to experience it as a 2-minute VR ride using the Oculus Rift DK1.

During the ride, they were also filmed for 10 seconds and could later share that experience as a split-screen YouTube video.

With Anthony Tripaldi as a lead developer creating the actual VR application using Cinder, my role was to develop a secondary application (also in Cinder) that would run from a separate computer. This application recorded a camera feed, recomposed it as a split-screen video showing the visitor’s in-VR point of view, and encoded it so it could be uploaded to YouTube for sharing. It talked to the VR application through the network (using OSC) so it would know when to start and stop the recording, as well as the direction the visitor was looking at.

This project was a great opportunity to get my C++ juices flowing again. I hadn’t worked with the language in any serious way in many years, and was certainly excited to see what Cinder was capable of. It did not disappoint.

While I was not the lead developer in this project, I was very proud of my overall role in it. I had brought my own Oculus Rift DK1 to the office months before, and used it in numerous demos to the company and to clients. That culminated in plenty of VR project ideas. I like to believe it is what got the concept of this project started, as well as many other similar VR projects that Firstborn developed since then.

In the end, I also helped run Mountain Dew’s booth for Dew Tour in Brooklyn, and demoed the experience to hundreds of people (most of them Skateboarding fans). It was pretty refreshing seeing everyone’s vastly positive reactions to it.

Escape Drill

Zeh Fernando — Thu, 08 Nov 2018 05:00:00 GMT

Weekend game project

The theme for Ludum Dare #29 was “Beneath the Surface”, and my entry for this 48 hour game jam Compo was a simple Unity game called “Escape Enclosures Expeditiously” (in keeping with my alliteration name themes I’ve used in previous Ludum Dares).

In this game, the player must get to the end of an isometric level while avoiding contact with enemy pieces. Movement is simple, and each enemy follows specific rules, so it’s up to the player to identify the rules of each enemy type and maneuver around them to get to the objective.

Interestingly enough, however, my goal with this weekend project was not as much to create a full game (although that would be fun!), but to extend the Unity editor in a way that would allow me to create new game levels inside of it. For this, I created custom mesh builders and editor tools which allowed me to extend a tiled isometric grid, control the height of each grid cell, and paint them with different tile types, each with different attributes (water, grass, colors, etc.).

The end result was a simple yet fun game to play. I finished the 48 hour compo with 3 levels; it was extended with 4 more and some ranking/high-score tracking a day later for the post-compo version, and before it was published on game portal websites like Kongregate. It was also renamed to “Escape Drill” then.

This little project was an exhilarating experience and a great way to get deep with Unity’s editor. It opened my eyes to its extensibility, and scratched an itch that I’ve had for a long time.

Pepsi Spire

Zeh Fernando — Sat, 04 Mar 2017 05:00:00 GMT

Touch screen interface for Pepsi’s new generation of soda fountains

Oh boy, how do I even start describing this project. I suppose I should start by stating this is one of my favorite projects of all time.

Firstborn was asked to design and implement the graphical user interface for Spire, Pepsi’s new generation of soda fountain machines. After a long period of designing, prototyping, and user testing, we came up with a flexible family of interfaces that served two different form factors for their soda machines: Pepsi Spire 2.0 (a small size, up to 12 brand soda fountain), and Pepsi Spire 5.0 (a large-size, up to 16 brands version).

The HD screen rendered our continuously animated user interface in its full glory. Firstborn’s superb motion design and the device’s clean yet delightful interface produced a stunning product.

I am very proud to have been the lead developer on Spire’s front end. Bringing this project to life was no easy task. We worked under many constraints, trying to get the best performance out of the small form-factor Intel NUC used internally.

This project was implemented in Flash, decidedly the best platform for the job at the time. However, the usual Flash display list was circumvented almost completely in favor of using GPU-accelerated graphics rendering. A lot of time was spent on optimizing texture memory use and draw calls. The result is an interface implementation that has more in common with OpenGL/DirectX graphics than with the typical Flash application.

This is, by far, the code I spent the most time profiling and optimizing. From debugging frame rendering using Intel DirectX tools, to measuring resources and memory use for up to 40 days (my target uptime), it offered many unusual challenges that were only matched by the satisfaction of accomplishing them.

This was also the first time I worked in something I could call a real product. Iterating, testing, and making it better was a pleasant, refreshing experience that made me realize how awesome it could be to make something that people use every day better and better.

Pop The Bubbles

Zeh Fernando — Wed, 07 Sep 2016 04:00:00 GMT

Interactive vending machine game

Along with their fountain machines, Pepsi also commissioned Firstborn to create the touch screen interface for their new touch-screen bottle vending system, dubbed Pepsi Interactive Vending.

Lee Felarca led the project that implemented a complex beverage vending UI that supported many additional features such as multimedia campaigns, remote beverage gift-giving, and its own executable platform.

One of such executables created for this machine was “Pop the Bubbles”, a quick touch-screen game where consumers could either try to reach a certain score, or try to win a free beverage.

While simple in functionality, the game featured some complex effects to simulate the bubbles and maintain the desired framerate. Many of the common game development tricks - such as object pooling and ray casting - had to be used, ensuring this was indeed a fun project to implement.

The Pepsi Interactive Vending system was first tried out at Penn State University, with plans to roll it out to other markets at a later time.

2001: A Space Oculus

Zeh Fernando — Fri, 23 Apr 2021 02:45:06 GMT

Weekend game project

Once in a while, I take part in a game jam called Ludum Dare. In this friendly competition, developers all over the world spend a (frantic) weekend coming up with a game from scratch based on a mystery theme that gets announced the day before the jam starts.

The theme for Ludum Dare #26 was “Minimalism”. As I wanted to create a real-time VR experience for the (then) newly released Oculus Rift, I decided to re-create a scene of the movie “2001: A Space Odyssey”; more precisely, the scene where astronaut David Bowman (the protagonist) has to rescue Dr. Frank Poole by maneuvering in space, outside of their spaceship (in other words, what happens right before the famous “I’m sorry Dave, I’m afraid I can’t do that” scene). I reasoned that a solo experience in space was “minimalist” enough for the theme.

The result is an experience called “2001: A Space Oculus”. In this “game”, you have to rescue an astronaut that has been floating in space (represented by a ragdoll model) by taking him to the front of the spaceship using your pod’s claws.

Other than creating a real-time VR experience, I had several additional goals with this project: to experiment with Unity’s new VR support, with its physics features, and to create a simulator based on difficult controls (QWOP-style). As such, I ended up using third-party models based on the movie (with some small modifications) rather than creating my own, so I could focus on these aspects of the game.

The end result, to be fair, is not much of a game; it’s more a challenge of one’s patience than anything else.

Still, this was again a great learning experience, and hopefully more people will enjoy floating around in space and simulating that scene from the movie. I was certainly overjoyed. There are some things you can only experience with the Oculus Rift. For this reason, a noclip/free mode is included in case one just wants to float in space and look at the ship.

Lugr Log

Zeh Fernando — Sat, 17 Mar 2018 04:00:00 GMT

Disposable photo app for Firstborn’s holiday party

Firstborn celebrates their “holiday” party every year at Luger’s, a famous steakhouse in Brooklyn. This is generally not just a reason to eat and be merry, but for all to come up with something special that celebrates all things Firstborn.

For Luger’s 2013 (celebrated in March), we created a “disposable” photo app specially for the event: that is, an application that allowed users to take a limited number of photos during the day, with very limited preview capabilities, and no editing (or deleting!) possible.

Since Luger’s day is an event that takes the whole day (and most of the night), the app unlocked in the morning. Through the day, users were allowed to take a maximum of 36 photos that were automatically uploaded to a server. Once all photos were taken, the application “self-destructed” and became unusable.

The next day, photos were “revealed” in real time in an online gallery, showing up exactly 24 hours after they were taken. This allowed everyone to follow photos of the event in the order it happened (for better or worse).

This application was designed and built by the development team at Firstborn over the span of about a week, and then tested for another week. It was available both for iOS and Android, plus its web counterpart for the reveal gallery. My part was creating the Android application.

A very slightly revised version of the app was later used for Luger’s day 2014.

UNIQLO Pinstorming

Zeh Fernando — Tue, 21 Feb 2017 05:00:00 GMT

UNIQLO takes over Pinterest’s feed

To increase awareness for their brand new Dry Mesh collection in the western world, UNIQLO wanted an online campaign of high impact and low budget. The briefing we were given didn’t have lots of constraints, but using Pinterest was one of the main requests.

Our suggestion was to create a series of very high images and post them in rapid succession on Pinterest, essentially taking over the image feed with Pinterest billboard-like images.

What followed was an intense period of research, not only to find out what was the highest image height (or smallest aspect ratio) allowed by the site, but also to figure the anti-spam mechanisms employed in the public category feeds.

We had many doubts at the beginning of the project. The feasibility of the whole concept was still an open question, and the plan was at constant risk of being called off. However, after about two weeks of tests, with more than a hundred accounts created and spreadsheets full of tests results, we knew it was possible and how to achieve it.

Doing automated posts was out of the question due to the way Pinterest’s session login worked. Instead, we enlisted the help of several people from Firstborn. Using an internal HTML site assembled especially to help with the post process, we were able to coordinate “Pinstorming” sessions, where each person of our group would perform a series of clicks to pin images to a specific category at the same time.

The process worked fantastically. We were able to storm all our target categories, including the most popular ones (like Fashion). For a fleeting moment, visitors to those categories would see the page taken over by UNIQLO’s creative vertical billboards. And more than being simply spammy, the billboards were unique and fun; our hope was that Pinterest users would be caught by surprise rather than being annoyed. And responses to the campaign seem to have shown exactly that.

On a personal level, this project was a great learning experience. For one thing, because it showed that perseverance sometimes pays off, and sometimes it’s too early to give up just because you don’t know whether something will work or not. And for another, it also showed that sometimes efficacy in tech is not only about creating something in a given programming language, but also some lateral thinking in how to solve uncommon problems.

Redken Style Station

Zeh Fernando — Sun, 05 Mar 2017 05:00:00 GMT

A mobile tool for hair stylists

Redken Style Station was an application created to help hair stylists with their daily work. It included several different tools such as timers, a lookbook, tutorials, and a formula guide using Redken’s products.

This was my first real Android application after spending a good number of years dedicated to Adobe Flash. It was a challenge, but one that made me really start liking the platform.

The biggest feature in this application was the list of formulas. In it, hair stylists had access to thousands of different formulas that they could apply to their clients’ hair. Each formula had a list of ingredients and steps needed to be taken for its application.

This section also presented the biggest challenge when developing the application. Since each formula featured a unique hair color preview thumbnail, embedding all the formula previews in the application would be unfeasible; about 2,000 formulas were initially planned.

Mathieu Badimon, the lead developer on the hair preview concept, solved this problem by coming up with a system of different image layers that could be mixed to create any hair color possible. Then, on the mobile side, we would use these 3 separate layers and recompose them according to specific rules to create the final preview image in real time. A live Photoshop of sorts.

On the Android side, this was solved by writing C code to recreate the formula preview images as fast as possible. Going back to C was interesting after not having used it for more than a decade, but also very satisfying when done: the needed image processing was 10 times faster in it than it was when done on the Java side. (This application supported Android 2.2, and RenderScript wasn’t available back then.)

The application also employed a clever update system: most of its data is stored in standalone XML files. Then, once in a while, the application checks for updated files from a server, downloading and installing them if needed. That way, the data is kept up-to-date, without the need for a constant internet connection.

This is also true of the formula list: in the original plan, the application would have up to 2,000 formulas listed. It currently features 12,000 formulas, all updated without the need for an updated version of the app.

Kana Mind

Zeh Fernando — Sat, 03 Feb 2018 05:00:00 GMT

An app to help Japanese learning

I always had a desire to learn Japanese, mostly due to the influence of the community I grew up in. Brazil has a huge Japanese immigrant community, and I spent some years in a city that received a big influx of Japanese immigrants. I had been learning the language on and off for a while, but making progress was always a struggle: whatever mastery I gained over the two basic alphabets - the Katakana and the Hiragana - faded after a while without regular practice.

That’s when I had the idea of creating a piece of software that could serve not only as a teaching aid, but also as a knowledge-reinforcement tool: an application that would teach symbol pairs by introducing them one by one over time, reinforcing them as needed, and testing memory retention with clever algorithms based on actual research into learning and repetition.

It was an idea I’d kept around for years, so when I wanted to learn how to use Adobe AIR to build a mobile application, the concept was the perfect excuse. And thus Kana Mind was born.

There are many games that test your Kana knowledge by matching each symbol to its romaji equivalent: memory games, flash-card-style games, dictionary games, and the like. However, none of them seem as serious about teaching, testing, and reinforcing memorization, nor as focused on the task of memorizing Kana, as I believe Kana Mind is.

As an experiment, it was a success. Released as a 100% free app for both Android and iOS, it’s no massive download hit, but reviews are overwhelmingly positive, especially in regard to the teaching algorithm. Not bad for something that never had any real marketing effort put behind it.

Sobe Staring Contest

Zeh Fernando — Sun, 27 Aug 2017 04:00:00 GMT

A webcam and computer vision-driven staring contest with Kate Upton

Sobe’s Try Everything campaign was about trying different things. Their website featured several different experiences that followed this principle. To me, this was the biggest one.

In the “Staring Contest”, Sobe’s model Kate Upton invited visitors to play against her on a staring contest. Targeting a young male audience, the objective of the game was to stare into the model’s eyes without deviating your gaze into other parts of the screen.

On the technology side, this started as a big challenge: we wanted to create a game that tracked the visitor’s eyes (using a webcam) to detect whether they were staring at the model. We started the project not knowing whether it was going to be possible, and if so, how effective it would be.

It all worked out in the end, however. First, the final solution used a third-party face detection library to detect the user’s face in their webcam feed at 30 frames per second. From there, it created a black-and-white mask of their eyes, measuring the amount of dark along a vertical axis in each eye. Using calibration settings detected previously by clever positioning of buttons on the screen - users had to click buttons on the top and bottom of the screen, thus mapping the detection mechanism to their light conditions and eye features - we ended up with remarkably accurate values for the gaze’s vertical axis.

The solution wasn’t perfect, as very dark light conditions and accessories such as glasses could impact the accuracy of the detection. Sometimes, users would also fail to realize having their eyes covered by hats or hair was detrimental to the experience. Still, the result worked surprisingly well, all things considered.

As a bonus/surprise feature for webcam users, cutscenes throughout the experience would show their own video feed mapped into the “challenger laptop” used in the staring contest. This was something that never failed to catch visitors off-guard, and, from my knowledge, one of the first times this was done in Flash (in our case, with the mapping of the webcam feed to coordinates pre-defined for every frame of the video). This technique became pretty popular in the months that followed.

For visitors without a webcam, a mouse version of the game was also available. It was equally fun to play.

This was probably one of the most successful online experiences I’ve ever created in terms of engagement metrics and online publicity generated.

Try Kissing the Office Hottie

Zeh Fernando — Sat, 14 Oct 2017 04:00:00 GMT

A funny camera-driven experience

This was another micro-site for Sobe’s Try Everything campaign, similar in its approach to the Staring Contest but smaller in scope. It was created in about a week, something that still amazes me to this day.

This was a quick, linear experience anchored on Sobe’s then current campaign based on quirky humor. In it, visitors could pick one of two “office hotties” to interactively kiss.

The playful aspect of this experience was on how this played out: we asked visitors to “kiss the camera”, and detected (by measuring the camera’s input brightness) whether they had done so.

In case of success, the conclusion of the experience was seeing their designated “hottie” turning into Sobe’s signature lizard and walking away.

A simple experience, and of tricky sensibilities. But, as expected of Sobe, one that surprised visitors in its unconventional interaction expectations.

AT&T Mobile Barcodes

Zeh Fernando — Wed, 14 Mar 2018 04:00:00 GMT

Video-based experience for a barcode system

Before 2D barcodes/QR codes were too out of fashion for the general public, AT&T created a new URL barcode system with marketing features: it redirected to an internal service first (to gather analytics) before redirecting to the final destination, very similarly to how link shorteners work today.

To sell the idea of their own format and their own mobile application, they decided to create a campaign based on several video vignettes showing how barcodes should be used to help customers, the advantages of their system, and a little tutorial on how to use it.

The website itself worked like a long, interactive video experience. It augmented the educational aspect of the video content by allowing users to navigate back and forth between each video segment, offering little cues and links when appropriate.

At a time when video streaming and free seeking was a pipe dream, this website’s implementation surprised many by making it effortlessly easy to navigate through the video experience, and learn about barcodes.

While I’m pretty proud of the technical work involved in getting this site done, it’s interesting to notice that just a few years later, almost everything about this website is outdated. An experience like this can now easily be implemented with some embedded YouTube videos, Flash itself is not even a thing anymore (even for interactive video content), and 2D barcodes, well… they were never exactly popular.

Expedition Titanic

Zeh Fernando — Sun, 07 Jan 2018 05:00:00 GMT

Online journal for a new Titanic expedition

To advertise a new expedition to the Titanic shipwreck, RMS Titanic Inc wanted to have an online, semi-live account of the expedition’s efforts to document the current state of the wreck and the environment around it. The resulting website worked both as an explanation of the project - with photos, maps, 3D renderings, and videos - and as a journal of its results via multiple constantly updated media feeds, a novelty at the time. It was, in my opinion, a unique storytelling experience that used the medium at its best.

Implementation wise, the website was made of an interesting mix of motion graphics, unique interaction metaphors, text, and media galleries. I am particularly fond of the main page scrolling: it doubles as a metaphor for diving deeper and deeper, until the visitor gets to the actual shipwreck information at the very bottom of the page. Small tidbits like that, or the semi-realistic water physics simulation used in the home page, were also super fun to code.

This was a fun project, not just because of the beautiful content and UI, but because of the mission. It triggered a brief mini-obsession with the Titanic in me that didn’t subside until I bought a Titanic replica for my desk and read a couple of books on the subject.

Interestingly, while this was built in Flash, this is a website that would work wonderfully using today’s (HTML5) technology.

5 React

Zeh Fernando — Sat, 14 Oct 2017 04:00:00 GMT

A personalized sensory experience

To announce “5 React”, their new gum flavor, 5 Gum chose to create an interactive, sci-fi-esque experience that aimed to “activate your senses”.

Firstborn came up with a solution that was very novel at the time: an interactive experience that would connect to the visitor’s Facebook profile, and use their pictures inside the experience in unexpected ways.

This translated into a 3D video sequence where visitors would see their photos seemingly rendered into the video, having their profile “analyzed” and ultimately chosen to be part of their campaign. They could then sign up to receive one of the 100,000 samples of 5 React that the brand would be sending to fans.

This was an amazing learning experience on exploiting the use of video metadata and plane projection in Flash. While proper syncing was an issue - some computers could be 1 or 2 frames out of sync during animation sequences, resulting in a less-than-perfect projection - the result surprised everyone who experienced it.

The campaign itself was also a success, with a tremendous amount of publicity buzz. Seeing people freaking out in social media in response to seeing their photos in the video was especially rewarding. In the end, the client had to shut down free gum distribution ahead of schedule: 100,000 packs of gum were not enough for the amount of interest the campaign created.

The website also featured a post-experience interactive music visualization creation tool created by Evolution Bureau.

Share The Rainbow

Zeh Fernando — Sun, 15 Sep 2019 21:47:14 GMT

A shared experience for Skittles fans

For Skittles’ new “Experience the Rainbow” campaign (led by Big Spaceship), Firstborn created a new microsite entitled “Share the Rainbow”. This was a shared experience where visitors were invited to record “Sharing” and “Tasting” videos, and then mash those together to create funny video sequences of Skittles being sent over the screen (“sharing”) and being received on a separate video (“tasting”). Everything was done by using YouTube’s (then) somewhat novel XML API through a custom Flash client library.

This was well in line with Skittles’ unorthodox approach for online advertising: a playful take on sharing, something that still was starting to become part of the online, social media parlance.

Ultimately, the website failed to gather much traction; it didn’t go “viral” as expected. Still, I think it’s a great example of amusing design, witty copywriting, and crafty development.

Aflac Redesign

Zeh Fernando — Tue, 22 Oct 2019 02:26:33 GMT

Interactive content for a corporate website

When Aflac decided to redesign their corporate and consumer website, Firstborn had the responsibility of not only creating a new design, but also of coming up with numerous 3d-rendered animated experiences using their well known duck.

The result is a playful yet informative website that communicates Aflac’s mission and advantages in a positive way, using “Aflacts” to educate employers and employees alike about the advantages of using Aflac.

Many of these “Aflacts” were interactive in unique ways. Using clicking or dragging, visitors could personally control the experience, thus directing their own learning experience.

In addition to the “Aflacts”, custom content for this redesign also included many richly designed interactive experiences meant to educate visitors in a playful manner. Animated savings calculators, video-based testimonial experiences, a feature-rich navigation menu, and other experiences were featured in the new website.

Fnk

Zeh Fernando — Sat, 14 May 2022 17:31:54 GMT

Visual programming environment

Fnk was a visual programming environment using a dataflow approach for the analysis, processing and synthesis of image, sound and other data in real-time. It aimed to be an easy and fun way to create multimedia experiences on a browser, or as a standalone desktop application.

Fnk was created as part of the graduation thesis for my Digital Interface Design bachelor degree at Senac São Paulo. In practice, it was a node-based visual representation of a functional language: within the Fnk environment, instead of writing code, one would connect nodes to perform live data transformations, and see the results flowing in real time.

Also importantly, in Fnk there was no difference between run-time and design-time: data flows constantly, even while the nodes are being assembled. This invites experimentation, and, I believe, makes the process of development fun.

Many of the concepts used by Fnk are inspired in other environments such as Max/Jitter, Pure Data, and vvvv. At the time, bringing those to the web was pretty novel; today, several similar such platforms exist, and node-based editors are much more common as “scripting” layers for existing platforms than they used to be.

The project didn’t last very long: the technology used (Adobe AIR) got somewhat outdated fast, I didn’t have time to expand its standard library of built-in nodes, nor to add many features that I had planned.

Still, this was an amazing project to create. It was one of the most creatively rewarding and fun projects I’ve ever worked on, and today, more than a decade later, I’m still in awe of the results.

Sunnyville (Welcome Back Spring)

Zeh Fernando — Wed, 23 Aug 2017 04:00:00 GMT

Campaign website for sales of home improvement goods

This rather large website, created for the “Welcome Back Spring” campaign for home improvement stores Lowe’s, was assembled by a team of several developers under the supervision of Francis Turmel.

I created two of the mini-sites featured in this project. The first one was “Moe’s Pattern Challenge”, a challenging yard grass mowing game. The second one was a yard creator that allowed players to take care of a virtual yard and furnish it with Lowe’s products, in a “The Sims”-style environment.

Let Your Worries Go

Zeh Fernando — Mon, 20 Feb 2017 05:00:00 GMT

Playful online insurance campaign website

This was a website for Northwestern Mutual’s online “Let Your Worries Go” campaign. Visitors could select a number of worries they want to get rid of, and how they wanted to do so.

It worked not only as a playful take on problems Northwestern Mutual can help their customers with, but also as a voting tool: at the end of the campaign in December 2008, the company donated 1 million dollars to causes that targeted the worry picked by the majority of the website’s visitors.

The ragdoll physics were fun to play with; your worries responded to mouse dragging realistically, and it was amusing to just drag them around or to throw them away.

This was the last Flash website I developed using ActionScript 2, as ActionScript 3 already had many performance and development benefits.

Wild Turkey Bourbon

Zeh Fernando — Wed, 23 Aug 2017 04:00:00 GMT

Website for a traditional American Bourbon Whiskey

My first work for Firstborn was a website for Wild Turkey Bourbon, a traditional American Bourbon Whiskey brand. Despite the simplicity of the design, the website was quite complex in behavior: “pages” were based off templates with their own rules, and everything was dynamically editable through the (then) magic of XML.

All transitions and slides were also fully animated, bringing some of the best features that Flash could offer to a Web that was very much in transition.

Absolut Ruby Red

Zeh Fernando — Mon, 09 Sep 2019 04:00:00 GMT

Playful personality quiz website

Website for the Brazilian Ruby Red campaign for Absolut, starting a new marketing phase for the brand in Brazil. The idea is both to introduce the grapefruit - largely unknown in Brazil - to a local audience, and to advertise Absolut’s own grapefruit-flavored vodka, “Absolut Ruby Red”, using its own brand of surreal identity.

That was accomplished with an overwhelmingly animated, sometimes even chaotic, website. In it, visitors are asked to answer a personality quiz that questions their approach to everyday moral puzzles; then, based on the visitor’s answers, the website slowly transforms itself to match. The visitor’s answers also help inform an ideal Absolut Ruby Red-based cocktail selection, presented as a suggestion of a drink that perfectly matches the visitor’s personality. Visitors were also able to download personalized artifacts such as wallpapers and ringtones.

Finally, the website also features an option for visitors to invite their own friends to visit the experience and answer the quiz. The twist here is that, in perfect Absolut’s playful fashion, their friend’s answers to the moral questions would be emailed back to the user who invited them in the first place, exposing potentially embarrassing answers to the personality quiz.

Answers to the personality quiz were also aggregated globally; visitors could check individual questions and see the percentage each answer had been picked by other visitors.

My role in this project, as in many projects at the time, was on everything that needed to be developed. That included the frontend Flash UI (including implementing all the animations), as well as the backend (using PHP and MySQL) to send email invitations, gather statistics, and create customized wallpapers on-the-fly.

This website was published in Brazilian Portuguese, English, and Russian. This presented an interesting challenge. It’s common that I have to edit fonts to adequate them to websites I developed; for example, when certain Latin accented characters (common in Brazilian Portuguese) are missing from the original font. This was not different in this case. However, here, a lot of work was also done to adapt different fonts to Cyrillic for the Russian version to work correctly, as a different font needed to have its weight, metrics and slant changed to match our designs consistently across languages.

Still Alive

Zeh Fernando — Sun, 14 Jan 2018 05:00:00 GMT

Online cooperative stitching experience

Still Alive (or “Vale Florestar”, “Vale Natureza”, and finally “Natureza Viva”, in its original Brazilian Portuguese) was an online campaign by Brazilian mining company Vale do Rio Doce. This project’s aim was to showcase the company’s reforestation efforts to the general public, as they were the largest investor in environmental causes in the country.

Beautifully designed by Victor Sahate, the main experience in this website features a stitching mesh with a dead tree as its background. Visitors can virtually “stitch” away at the mesh, revealing a tree that’s full of life as well as hidden wild animals that are “saved” once they’re completely revealed, in a game-like experience.

If all animals are revealed by a visitor, their names are then saved to a list of people who symbolically helped the cause, and exposed in the website.

One of the coolest features of this website was the cooperative aspect of it. Using a socket server, up to 8 users could be sharing a “room” and virtually stitching the same mesh at the same time. Visitors could see other visitors’ actions (as well as their mouse cursor positions) as they used the website, making it clear that they were not alone in their efforts to reveal the hidden figures in the mesh.

This was a great looking experience and a very challenging yet fun project. It was also my first commercial project using Flash Media Server. Defining a multiuser protocol for real time communication was something I had to do several times more after this.

The experience also contains a surprising amount of artificial intelligence: if you join the website when there’s no one around to stitch with you, or if you’re visiting it from a network that blocks socket Flash (RTMP) communication, the website creates “bots” that simulate a real person moving the mouse and stitching (generally, just moving around the stitching area randomly, which simulates visitor behavior surprisingly well). In good multiplayer bot fashion, these bots leave the website when a real person joins.

Agência Tudo

Zeh Fernando — Thu, 15 Mar 2018 04:00:00 GMT

Playful website for an event agency

Agência Tudo (“Tudo Agency”), from São Paulo, Brazil, is a promotions agency who provides service for the event, promotion and sponsorship industries, such as designing and organizing a new product release or other commemorative events.

Their debut online presence mimicked a desk full of interactive objects. The site’s content was accessible by interacting with those objects, many of them stickers that could be pulled out to navigate to new areas.

Despite looking somewhat simple and playful, and despite being used sparingly, this was one of the most complex UI interactions I ever had to create, as it required more than the usual dosage of trigonometry of a standard UI.

This effect shares some similarity with a classic (almost cliché) Flash effect, the famous “page flip”. However, this one was not just coded from scratch, but added a degree of complexity to the whole idea of flipping since we used irregular shapes that could be dragged and detached from any of their sides.

The end result was a playful website that employed many of Flash’s coolest features at the time, such as displacement maps for graphic effect and even a little bit of roaming A.I. employed in the ants: they’d continuously walk in and out of a cookie, but could be pushed out by the visitor, only to re-route and return later. This remains one of my favorite features of the whole experience.

Middle Finger Pub

Zeh Fernando — Sun, 08 Oct 2017 04:00:00 GMT

Launch site for new media agency Gringo

The debut agency website for Andre Matarazzo’s “Gringo” provides a way for unhappy employees to vent their frustration at their bosses. In this playful website, visitors are allowed to watch and select different complaints from each of the typical digital agency employees: the webdesigner, the programmer, the account manager, and so on. Then, with all complaints selected, a video is created and sent to the visitor’s boss, along with a friendly message - all anonymously.

In concept, this is a simple website: select some videos, sort them out, send them to somebody that will play them back. However, other than the subversive (and highly talked about!) idea, I especially like it for its design (the work of Ricardo Landim) and for some of the flash solutions I was able to get into it when coding the website. The parody of Mac OSX’s “genie effect” and the pseudo-3D interface involved in the video selection are still among my favorite visual implementations of all time.

Implemented in 5 languages in its final form, this website was the perfect launch campaign for Gringo. It followed its fresh approach to concept, design, and technology, and judging from some of the hate mail the agency got from targeted bosses, widely successful. Talk about starting with a bang.

Defence Alliance 2

Zeh Fernando — Thu, 11 Jan 2018 05:00:00 GMT

An assault mod for Unreal Tournament 2004

Defence Alliance 2 was a great Unreal Tournament 2004 (and later Killing Floor) mod, featuring class-based, cooperative assault-like gameplay against AI players. I had joined this modding team to work on creating UV maps, but as they announced their need for a GUI developer, I quickly took the task of designing and developing the new graphical user interface (my main area of interest) for their mod.

The workflow entailed creating the designs using Photoshop and Illustrator, and then implementing it using UnrealScript. It was a big challenge; even though I had worked with game GUIs and UnrealScript in the past, I hadn’t done so as the member of a huge team, and I lacked experience in some aspects of game user interface design. Still, designing each screen widget and menu was a blast, and learning the intricacies of the legacy-code-ridden UT2k4 user interface classes was a huge but satisfying challenge.

In the end, hundreds of different screens were created for the mod, and at least from my experience, this was the most professionally-looking UT2k4 mod GUI out there. Some screens were mere reskins of the original GUI classes, but many were original designs that gave the mod its own identity.

Zine Store

Zeh Fernando — Sat, 20 Jan 2018 05:00:00 GMT

Design book and magazine store

The Zine Store was a completely Flash-driven e-commerce website for a local São Paulo store that specialized in imported design and art books and magazines.

A real technical feat at the time, the website used Flash to give it an application-like feel and immediately responsive interface, even when doing complex searches or queries (given the limited inventory for the store, it was all loaded and kept in memory).

Despite the somewhat outdated design, this website was simple, powerful, and very easy to navigate. It was the most complex and most technically rewarding project I had ever done up to that point.