Industrial design

When it comes to the look of the device, we took inspiration from many different products, everything from cameras to cars to coffee machines. On our mood board, the common design theme became minimal exterior with complex interior.

Product renders

As we started designing the Quantum Wallet, we experimented with different shapes to find the perfect fit. We initially considered a pill shape that would house a miniature quantum computer, but we ended up discarding the idea as it felt uninteresting just to scale things down. We also explored a cylindric shape, but we thought it looked too much like existing smart speakers and wifi routers on the market.

Ultimately we landed on a hexagon shape that perfectly fit the aesthetic we were going for. Going through this iterative process allowed us to explore different design options and arrive at a shape that we were happy with.

Visual design

The narration around the Quantum Wallet was meant to be believable at first glance, then get progressively more ridiculous. We used ever-changing gradients in the background to act for a heat map that represents the thermal status of the device. Gradients shapes mimicked quantum field patterns, and we added particles in the background to simulate electrons in a quantum cloud. For a futuristic and sci-fi look, we introduced some blurred panels with thin line graphs on them.

For our font selection, we chose PP Neue Machina for headlines to give a futuristic vibe with mono-spaced coding characteristics. For the body copy, we used Silka to keep the tone mature and balance out the whimsical parts of PP Neue Machina. To go all in on the sci-fi feeling, we added a glitch text effect that swapped characters back and forth with large blocks to make the headlines feel a bit glitchy.

The Quantum Wallet hardware design was heavily inspired by Teenage Engineering industrial design language and was meant to be minimal and iconic. The device shape is a simple hexagon with a single cylindrical dial for user input. The interior isn’t shown until further down on the site, and it was meant to immediately reveal that it was a joke with a magical crystal powering the entire wallet.

Wireframes

Since we wanted to make a realistic product, it shouldn't be too obvious that it was fake. We decided to increase the level of absurdness, gradually with each section, starting from believable and ending with ridiculous. At the end of the page, we wanted to reveal the purpose: Showcase our talents and give potential clients a reason to contact us for exciting projects.

Companion app

Since our product is a physical object without much of a user interface, we needed a way to show how users would keep track on and interact with their Quantum Wallet.

One of our main selling points for the Quantum Wallet is its high level of security and the ability to hack anyone trying to hack the wallet — a feature named HackBack. We felt it was the perfect showcase for the companion app.

To create the app UI and animations, we used Framer, and for the 3D model, we used Spline. Both tools were new to us, but in the spirit of Hack Friday, it was a perfect excuse to learn more about these trendy applications.

Copywriting

To be able to keep a linear progression between realistic to crazy when visiting the page, we decided on a “scrolly-telling” approach. This gave us more control to let the visitor unfold the story as they scroll further down the page.

Since quantum computing is such a niche topic, we wanted to use a language that would resonate with a wider audience. In the copy, we focused a lot on recognizable web3 enthusiasts that could be tied to quantum computing, such as security and temperature.

Sound design

To take the project to the next level, we wanted to add sound effects to make the experience more immersive. We browsed sound effects from Splice and bookmarked those effects and background sounds that we thought were fitting to our experience. Most of the sounds that we liked were inspired by fantasy and science fiction movies and games.

Summary

Working on the Quantum Wallet has really encouraged us to keep learning and experimenting with new tools and technologies and to inspire others to do the same. If you're feeling stuck or uninspired, please take a cue from our Hack Friday and set aside some dedicated time to work on a passion project. It could be anything from exploring a new tool or technology to bringing a creative idea to life. Who knows? Your next great idea could be just a Hack Day away. So go ahead, take the plunge, and create something amazing!

One more thing… If you are interested to know how our super-talented developer team implemented this into an amazing website, stay tuned for part 2 of “Making the Quantum Wallet”.