Memoroji — How we designed a side project that brings a smile 😂
TLDR;
The process of designing our side-project — a fun and silly game with neumorphic design that you can play here:
Apple AppStore:
Google PlayStore:
Web:
What makes a side-project
The IT industry is a mash-up field that brings many skill-sets together. When everything just works — it can be joyful, fulfilling, and rewarding. But at the same time, it can bring a lot of stress pumped-up from over-promised agileness and deadlines that just sometimes don’t work — dangerous ingredients leading to a state of burnout.
As a User Interface Designer and Web Developer for over 10 years, I am working mostly on enterprise applications. I love the challenges to put myself into the shoes of employees that would stare at my coat of CSS daily, clicking through a big-ass data management application. Heck, talking about enterprise apps, we even have our own ERP product — AMBRI.
I’m happy with what I do! Most importantly — the end-users as well.
But occasionally, you get out of your zone. When you don’t have any inspiration to solve problems. When every solution seems bland, and you are not satisfied with it. No matter how hard you try — that ‘aha’ moment just won’t come.
That’s probably the right time for a side project. A small, fun, and silly side project that would refresh your thoughts. No goals attached, no deadliness to chase, no clients to satisfy, no expectations to meet. Just you.
From my experience, the perfect side-project is:
- Experimental — it should be a playground for your ideas that are buried down into your head
- Fun — it should bring you joy while designing it, coding it, using it
- Short — it shouldn’t take longer than a weekend to do it
Don’t do stuff you already do, don’t bore and overwork yourself. Especially the last one! Give yourself a simple goal with a quick reward in return. Make sure to follow these rules, and you’ll get back into your zone for your daily tasks in no time. And as a bonus — you might end up with a silly project that most people would love!
The birth of an old-school game with a modern twist
I’m a 90s/00s gamer kid. I held onto my candy coins to go and spend it in a local arcade shop to play Cadillacs and Dinosaurs (we only knew it as Mustapha back then). I’ve clicked on Minesweeper for hours not knowing what the heck I am doing. I had my head ringing “Hercules! Come out! Face me!”. I was blown away by the freedom of GTA, by the rich world of Oddworld, by the cartoony style of Monkey Island 3. I’ve witnessed the transformation from 2D to 3D and from CRT to LCD.
Recently, we were discussing with my colleagues at work about the current situation in the gaming world. Particularly — the experimental “put a random noun” simulator games. How experimenting and having fun can lead to a product that the majority of people can experience the same fun while experimenting with it. One thing leads to another — we’ve unintentionally poured ideas on our office whiteboard — let’s build something fun, quick, with minimal amounts of resources. And that’s where the idea about silly memory game was born.
Emojis were the solution to the image resources — basically, you have tons of smiling faces hidden behind an HTML code that you can randomize. The coding logic of a memory game is not complex. We just made it more competitive by implementing a leveling system and time. And we didn’t want to include a main menu with options and choosing difficulties and other unnecessary complexities. I mean, why complicate such a simple game? You should be immediately immersed in the fun. The sounds… Well, we are all kind of youtube addicts, so the inspiration for sounds came naturally. The name… I initially thought of Memoji, but we decided not to go with it for obvious reasons :). So we end up with another combination of Memory and Emoji — Memoroji.
This ticked all of the boxes that make a perfect side-project: experimental, fun, and short. It’s time to work!
The Right Tool for the Right Job
When it comes to tools, I’m a geek and open to trying new things. I have my fair share of history in CorelDRAW, Photoshop, Illustrator… I had an experimental phase using open-source tools like Gimp and Inkscape. I always say that it’s not the tool that is important, but what you do with it.
But, reminiscing the old days — all that work that we poured into designing UIs for different screen sizes, exporting tons of assets, handling different styles in tons and tons of files… It felt cumbersome. It felt like using a bulldozer to mow your lawn.
Then, Sketch came in. It addressed exactly every shortcoming that other apps had. It was the first app that was tailored for designing UIs for the modern world. It was the right tool for the right job.
I love every aspect of Sketch. I use it to design and maintain design systems for complex enterprise applications, and I use it for quick prototypes. Organizing your designs has never been more intuitive — pages, symbols, text styles, fills, and now color variables... It gives us, the designers, agility that back in the days we never had.
I always organize my pages in a Sketch document in a manner that allows hassle-free scaling of the design. For Memoroji, my set of pages looks like this:
For Memoroji’s design language, I’ve started with a card-based approach. Typical for a memory game, I was thinking of implementing nice CSS transitions to achieve a flip effect. That all fell apart since transitions would destroy the experience of a fast-paced memory game with a ticking clock in the background.
I thought of Neuomorphism. All those pretty Dribble shots, and all those articles bashing the usability of it. I get it — I would never use this in any enterprise application — all those shadows and softness deliver low accessibility that would hurt the experience on the cost of a design trend.
BUT, I always thought that Neuomorphism could find its place on small and simple apps — a single knob for a thermostat, a radio app with three buttons, and nothing more. I thought that is where this style excelled — it gives a layer of skeuomorphism over a flat design.
I wanted to try it out, and Memoroji was a perfect candidate!
Draw. Implement. Test. Repeat.
I quickly set up the layout CSS grid and started experimenting with the designs. I tweaked the shadows and appearance in Sketch, copied the CSS attributes in the React Component’s CSS file, and experimented with the results on the actual React prototype.
This gave me great flexibility in experimenting and nailing down just the right amount of shadows and the visual appearance of the elements. All I did was just draw, implement, test, and repeat.
Icon, Banners, Marketing Materials — Blast From The Past
Initially, we only did a web app, so I wanted to give the ability for the user to ‘Add Shortcut to Homescreen’ — and with a couple of HTML meta tags and the right graphics, this could give the experience of a native app.
And for these designs, I let my creativity go way back to my beginnings of design — designing those skeuomorphic icons for iOS. I enjoyed doing these. It was the front-face of the application. You had a small square to best represent what’s more behind it.
I started drawing basic shapes. Experimenting with gradients, laying out shadows and highlights with different amounts of blur to give 3D skeuomorphic depth. I felt like I’m 10 years younger. I felt like Anton Ego, the food critic guy from Ratatouille having the first bite at the end of the movie. It felt good. 🤤
I created a Symbol of the elements that I would reuse, and I followed the same technique creating the cover and banner graphics.
EDIT: Apparently Sketch ❤️ Memoroji (!!!), and shared us on Twitter! 🤯Someone requested the source 💎 Sketch file, so I’m including that one as well.
You can download the Sketch source file here 👇
Every Beginning has its End.
So, you’ve finished the prototype. You test the heck out of it, your colleagues test the heck out of it… You show it to some of your friends, they love it! They have interesting ideas to expand it, you have interesting ideas to expand it… People from Reddit love it, people from LinkedIn love it, Twitter, Facebook… The hype is real!
You can play Memoroji here:
Apple AppStore:
Google PlayStore:
Web:
Just pause for a moment. Give room for your tiny silly side-project to soak-in. Otherwise, you’ll start to set high goals, meet heavy expectations and it will drain your energy and your main focus, which was the main point of starting the silly side-project — to refresh your creativity.
Have fun interacting with it. And, if for some reason — a lot of other people do have fun with it over a period of time, then you can think about moving onto the next phase. Otherwise, use your refreshed creativity and enjoy your work!
