I'm Eric, the co-founder of Versive, an AI-powered survey platform. Before starting Versive, I worked in product and design, most recently at Vareto, Uber, and Bread.
I spent New Year’s weekend rebuilding my personal website (ericli.io) as a game-inspired interface. Here's how I did it (with some takeaways at the end).
CleanShot 2024-01-08 at 21.43.30-converted.mp4
I’m a self-taught designer and developer who loves to learn by creating. I think a personal website is the perfect place for learning and experimenting. In fact, the last version of my website had an animated lucky cat from when I was learning 3D modeling.
The previous version of my site
Over the holidays, I read Tomorrow and Tomorrow and Tomorrow, a book about friends who start a video game company. This made me want to build a game, but I didn’t have the time. So, I tackled the more modest goal of redesigning my website with game-like features.
I treated this redesign as more of a creative outlet than as a practical way of showcasing my work and resume. As a designer who now spends most of my time writing code and talking to customers, this project was a nice escape that allowed me to explore something creative without business constraints.
I tried to keep the scope small. I’d create a site where you could use the keyboard to move a character around, like in a retro side-scrolling video game. As the user navigated, I would tell a story with text.
I time-boxed the project to New Year's weekend so I could return to focus entirely on Versive after the holiday break.
First, I decided how I would build the site. I built my last site with plain HTML, CSS, and Javascript. This time, I wanted to support more interactivity and the option to add more complex features in the future. I decided to use Next.js because I was familiar with it and knew I could get something live quickly.
I also researched libraries like Phaser and PixiJS that could help me implement game mechanics, like rendering sprites and handling physics. After getting some advice from ChatGPT, I decided these libraries were overkill and could simply implement the features I wanted with Javascript.
Next, I started to create some rough designs in Figma. My original thought was to keep the site minimal, with an avatar of me and some giant scrolling text telling my story.
My initial design for the site with a text-only background
I worked on drawing myself as a low-res avatar. I had never created pixel art or character sprites before, so I did some googling and found lots of helpful examples (🧡 Pokemon fan art).
The simple sprite-sheet I used to animate my avatar
I drew my character using the rectangle tool in Figma and created variations for standing and walking animations. I kept refining this as I built out the rest of the site (I'm still not completely happy with it).
In the midst of my rectangle-drawing struggles, I tried generating an avatar using Midjourney, but the output wasn’t great. While I was using Midjourney, though, I thought it might be cool to try generating some background images for the site. I tried creating a scene of a street in Brooklyn (where I live), and it came out beautifully on the first try.